/* ─────────────────────────────────────────────────────────
 * The Mac behaves like a Mac (mac/alive.js). Depicted-world values:
 * the Dock's magnification, Tahoe menus, the sleeping screen, and
 * the banner's flight. Nothing here is the site's own UI.
 * ───────────────────────────────────────────────────────── */

/* ── Dock: icons grow upward from the shelf and push their neighbours ── */
.dk-app { --m: 1; width: calc(46px * var(--m)); transition: width 110ms cubic-bezier(.25,.1,.25,1); }
.dk-app > svg { scale: var(--m); transform-origin: 50% 100%; transition: scale 110ms cubic-bezier(.25,.1,.25,1); }
.dk-app[data-app="kamui"] > svg rect { transform-box: fill-box; transform-origin: center; transition: transform 90ms ease-out; }
.dock:not(:hover) .dk-app { transition: width 380ms cubic-bezier(.2,.8,.2,1); }
.dock:not(:hover) .dk-app > svg { transition: scale 380ms cubic-bezier(.2,.8,.2,1); }
.dk-app.is-running::after { transition: none; }

/* the app's name above a hovered icon, on a small glass label */
.dk-tip {
  position: absolute; left: 50%; bottom: calc(46px * var(--m) + 14px);
  translate: -50% 4px; opacity: 0;
  padding: 3px 9px; border-radius: 7px; white-space: nowrap; pointer-events: none;
  font: 500 12px/16px system-ui, -apple-system, "SF Pro Text", "Helvetica Neue", sans-serif;
  color: rgba(0,0,0,0.85);
  background: rgba(255,255,255,0.72);
  -webkit-backdrop-filter: blur(22px) saturate(1.5); backdrop-filter: blur(22px) saturate(1.5);
  box-shadow: inset 0 0 0 0.5px rgba(255,255,255,0.6), 0 0 0 0.5px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.16);
  transition: opacity 160ms ease-out 40ms, translate 220ms cubic-bezier(.2,.8,.2,1) 40ms, bottom 110ms cubic-bezier(.25,.1,.25,1);
}
.dk-app:hover .dk-tip { opacity: 1; translate: -50% 0; transition-delay: 260ms; }

/* ── Menu bar: hit areas over the drawn titles; a Tahoe menu drops from the open one ── */
.mb-hits { position: absolute; inset: 0 0 auto 0; height: 30px; z-index: 31; pointer-events: none; }
.mb-slot { position: absolute; top: 4px; height: 22px; pointer-events: auto; }
.mb-title {
  display: block; width: 100%; height: 100%; margin: 0; padding: 0; border: 0;
  border-radius: 6px; background: transparent; cursor: default;
  transition: background 80ms;
}
.mb-title:hover { background: rgba(0,0,0,0.05); }
.mb-slot.is-open .mb-title { background: rgba(0,0,0,0.11); }
.mb-title:focus-visible { outline: 2px solid rgba(10,108,245,0.6); outline-offset: -2px; }

.mb-menu {
  position: absolute; left: -1px; top: 28px; min-width: 232px;
  padding: 5px; border-radius: 12px; box-sizing: border-box;
  font: 400 13px/16px system-ui, -apple-system, "SF Pro Text", "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased; color: rgba(0,0,0,0.88);
  background: rgba(246,246,246,0.74);
  -webkit-backdrop-filter: blur(40px) saturate(1.7); backdrop-filter: blur(40px) saturate(1.7);
  box-shadow: inset 0 0 0 0.5px rgba(255,255,255,0.55), 0 0 0 0.5px rgba(0,0,0,0.16), 0 12px 34px -6px rgba(0,0,0,0.32), 0 2px 6px rgba(0,0,0,0.08);
  opacity: 0; scale: 0.98; translate: 0 -4px; transform-origin: 20px 0; pointer-events: none; visibility: hidden;
  transition: opacity 90ms ease-out, scale 140ms cubic-bezier(.2,.8,.2,1), translate 140ms cubic-bezier(.2,.8,.2,1), visibility 0s 140ms;
}
.mb-slot.is-open .mb-menu { opacity: 1; scale: 1; translate: 0 0; pointer-events: auto; visibility: visible; transition-delay: 0s; }
.mb-item {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  width: 100%; height: 22px; margin: 0; padding: 0 9px; border: 0; border-radius: 6px;
  font: inherit; color: inherit; text-align: left; white-space: nowrap; background: transparent; cursor: default;
}
.mb-item:hover, .mb-item:focus-visible { background: #0A6CF5; color: #fff; outline: none; }
.mb-item:hover .mb-key, .mb-item:focus-visible .mb-key { color: rgba(255,255,255,0.75); }
.mb-item.is-dim { color: rgba(0,0,0,0.38); }
.mb-item.is-dim:hover { background: transparent; color: rgba(0,0,0,0.38); }
.mb-key { color: rgba(0,0,0,0.42); font-size: 12.5px; letter-spacing: 0.06em; }
.mb-sep { display: block; height: 1px; margin: 5px 9px; background: rgba(0,0,0,0.11); }
.mb-search { display: flex; align-items: center; gap: 8px; height: 26px; margin: 2px 4px 7px; padding: 0 8px; border-radius: 7px; background: rgba(255,255,255,0.7); box-shadow: inset 0 0 0 0.5px rgba(0,0,0,0.14); }
.mb-q { color: rgba(0,0,0,0.4); }
.mb-typed { color: rgba(0,0,0,0.88); }
.mb-typed::after { content: ''; display: inline-block; width: 1px; height: 14px; margin-left: 1px; vertical-align: -2px; background: #0A6CF5; animation: mb-caret 1s steps(2) infinite; }
@keyframes mb-caret { to { opacity: 0; } }

/* ── Sleep: the display goes dark, and wakes on the next touch ── */
.hero.is-asleep::after, .close.is-asleep::after {
  content: ''; position: absolute; inset: 0; z-index: 50; background: #000;
  animation: mac-sleep 1.1s cubic-bezier(.6,0,.9,.4) both;
}
@keyframes mac-sleep { from { opacity: 0; } }

/* ── Banners: in from the right on a spring, out to the right ── */
.notif-live .notif { transition: translate 560ms cubic-bezier(.2,.9,.25,1.08), opacity 240ms ease-out; cursor: default; }
.notif-live .notif.is-in-flight { translate: 380px 0; opacity: 0; }
.notif-live .notif.is-out { translate: 380px 0; opacity: 0; transition: translate 380ms cubic-bezier(.5,0,.9,.6), opacity 300ms ease-in; }

@media (prefers-reduced-motion: reduce) {
  .dk-app, .dk-app > svg, .dk-tip, .mb-menu { transition: none; }
  .mb-menu { scale: 1; translate: 0 0; }
  .notif-live .notif { transition: opacity 200ms; }
  .notif-live .notif.is-in-flight, .notif-live .notif.is-out { translate: 0 0; }
  .hero.is-asleep::after, .close.is-asleep::after { animation-duration: 1ms; }
}