/* ─────────────────────────────────────────────────────────
 * The front page's own UI. Tokens come from MetalUI (tokens.css,
 * bone colorway); nothing here copies a value MetalUI owns. The
 * depicted Mac lives in mac/*.css and never borrows from here.
 *
 *   primitives   page, type, buttons, wrap
 *   hero         the scaled Mac; the after-state in real pixels
 *   play, sees, keeper   the sections after the pull (their own css)
 *   close, foot
 * ───────────────────────────────────────────────────────── */

:root {
  --S: 1;                       /* the depicted Mac's scale, set by front.js */
  --sand: #D9C7A8;              /* the wallpaper's own colour, for the hero's edges */
  --dock-h: calc(83px * var(--S));
}
html { background: var(--mu-page); color: var(--mu-ink); font-family: var(--mu-sans); -webkit-font-smoothing: antialiased; }
body { margin: 0; }
::selection { background: color-mix(in srgb, var(--mu-green) 45%, transparent); }

.skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 8px 14px; border-radius: var(--mu-radius-pill); background: var(--mu-btn-bg); box-shadow: var(--mu-btn-sh); color: var(--mu-ink); font: var(--mu-type-ui); text-decoration: none; }
.skip:focus-visible { top: 12px; outline: var(--mu-focus-width) solid var(--mu-focus); outline-offset: var(--mu-focus-offset); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Type ── */
.display {
  margin: 0;
  font: 700 clamp(34px, 3.2vw + 14px, 56px)/1.02 var(--mu-sans);
  letter-spacing: -0.035em;
  color: var(--mu-ink);
  text-wrap: balance;
}
.lead { margin: 0; max-width: 34em; font: 400 clamp(16px, 0.5vw + 12px, 18px)/1.45 var(--mu-sans); letter-spacing: -0.01em; color: var(--mu-ink2); text-wrap: pretty; }
.cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 8px; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }

/* Buttons: MetalUI's primary and plain caps, at hero size */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--mu-button-gap);
  height: 40px; padding: 0 20px; border: 0; border-radius: var(--mu-radius-pill);
  font: 600 15px/1 var(--mu-sans); letter-spacing: -0.01em; text-decoration: none; cursor: pointer;
  transition: translate var(--mu-button-press-ms) var(--mu-ease-press), box-shadow var(--mu-button-press-ms) var(--mu-ease-press);
}
.btn-primary { background: var(--mu-primary-bg); box-shadow: var(--mu-primary-sh); color: var(--mu-primary-ink); }
.btn-primary:active { background: var(--mu-primary-pressed-bg); box-shadow: var(--mu-primary-pressed-sh); translate: 0 var(--mu-button-travel); }
.btn-quiet { background: var(--mu-btn-bg); box-shadow: var(--mu-btn-sh); color: var(--mu-ink); }
.btn-quiet:active { background: var(--mu-pressed-bg); translate: 0 var(--mu-button-travel); }
.btn:focus-visible { outline: var(--mu-focus-width) solid var(--mu-focus); outline-offset: var(--mu-focus-offset); }

/* ── Hero: one screen, scaled as a whole to the viewport ── */
.hero { position: relative; height: 100vh; height: 100svh; overflow: hidden; background: var(--sand); }
.stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.stage > .mac-screen { position: absolute; inset: 0; width: auto; height: auto; }
.menubar { position: absolute; inset: 0 0 auto 0; z-index: 30; }
.desk { position: absolute; inset: 0; }
.desk > .win { position: absolute; }
/* on a phone the ⌘ panel is the one thing that must stay tappable */
.summon { scale: var(--sm-scale, 1); }

/* ── After the pull: real pixels over the scaled wallpaper ── */
.after {
  position: absolute; inset: 0; z-index: 20;
  display: grid; grid-template-rows: auto 1fr; justify-items: center; gap: 22px;
  box-sizing: border-box; padding: calc(30px * var(--S) + 30px) 20px calc(var(--dock-h) + 20px);
  pointer-events: none; visibility: hidden;
}
.is-after .after { visibility: visible; }
.after-copy { display: grid; justify-items: center; text-align: center; gap: 14px; pointer-events: auto; }

/* The Kamui window: the real web client in its demo mode, see-through over the wallpaper */
.kwin {
  position: relative; width: min(1080px, 100%); height: 100%; min-height: 220px; pointer-events: auto;
  border-radius: 26px; overflow: hidden; isolation: isolate;
  background: rgba(250, 249, 246, 0.42);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  backdrop-filter: blur(18px) saturate(1.2);
  box-shadow: 0 0 0 0.5px rgba(0,0,0,0.14), inset 0 0.5px 0 rgba(255,255,255,0.8), 0 18px 36px rgba(0,0,0,0.26);
  opacity: 0; scale: 0.96;
}
.kwin iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: transparent; }
.is-after .kwin { opacity: 1; scale: 1; transition: opacity 520ms var(--mu-ease-slide), scale 620ms var(--mu-spring-surface); }
.is-after .after-copy > * { animation: rise 700ms var(--mu-ease-slide) both; }
.is-after .after-copy > :nth-child(2) { animation-delay: 90ms; }
.is-after .after-copy > :nth-child(3) { animation-delay: 180ms; }
@keyframes rise { from { opacity: 0; translate: 0 14px; filter: blur(4px); } }

/* The demo's pointer, drawn as the Mac arrow over the live window */
.demo-cursor { position: absolute; left: -1px; top: -1px; z-index: 5; pointer-events: none; transition: translate 60ms linear; filter: drop-shadow(0 1px 1.5px rgba(0,0,0,.35)); }
.demo-cursor.is-down svg { scale: .92; transform-origin: 1px 1px; }

/* ── Sections after the pull ── */
.play { padding: 96px 0 72px; }
.sees { padding: 72px 0 96px; }
.play .wrap, .sees .wrap { display: grid; justify-items: center; text-align: center; gap: 14px; }

/* ── Close: a clean desktop, and the keys ── */
.close { position: relative; height: 100vh; height: 100svh; overflow: hidden; background: var(--sand); }
.close .stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.close .mac-screen { position: absolute; inset: 0; width: auto; height: auto; }
.close-copy { position: absolute; left: 20px; right: 20px; top: calc(30px * var(--S) + 60px); z-index: 21; display: grid; justify-items: center; gap: 14px; text-align: center; }
.close-desk .summon { top: 330px; }
.close-keeper { position: absolute; left: 50%; bottom: calc(var(--dock-h) + 40px); translate: -50% 0; z-index: 22; }
.close-desk .dt-item.is-feedable { cursor: grab; touch-action: none; transition: scale 200ms var(--mu-spring-part), filter 200ms; }
.close-desk .dt-item.is-dragging { cursor: grabbing; scale: 1.06; filter: drop-shadow(0 12px 14px rgba(0,0,0,0.3)); z-index: 5; transition: scale 200ms var(--mu-spring-part); }
.close-desk .dt-item.is-near { scale: 0.9; }
.close-desk .dt-item.is-gulped { visibility: hidden; pointer-events: none; }
.close-desk .dt-item:focus-visible { outline: var(--mu-focus-width) solid var(--mu-focus); outline-offset: 2px; border-radius: 12px; }
.foot-tools { grid-column: 1 / -1; margin: 0; }

/* ── Footer ── */
.foot { background: var(--mu-page); border-top: 0.5px solid rgba(0,0,0,0.08); }
.foot-in { max-width: 1120px; margin: 0 auto; padding: 36px 24px 44px; display: grid; grid-template-columns: auto 1fr; gap: 10px 32px; align-items: center; }
.foot-mark { margin: 0; display: flex; align-items: center; gap: 10px; font: var(--mu-type-display); letter-spacing: var(--mu-type-display-tracking); }
.foot-mark svg { width: 28px; height: 28px; }
.foot-links { justify-self: end; display: flex; flex-wrap: wrap; gap: 6px 22px; }
.foot-links a { font: var(--mu-type-lead); color: var(--mu-ink2); text-decoration: none; }
.foot-links a:hover { color: var(--mu-ink); }
.foot-links a:focus-visible { outline: var(--mu-focus-width) solid var(--mu-focus); outline-offset: 3px; border-radius: 4px; }
.foot-fine { grid-column: 1 / -1; margin: 6px 0 0; font: var(--mu-type-body); color: var(--mu-ink3); }

@media (max-width: 720px) {
  .foot-in { grid-template-columns: 1fr; }
  .foot-links { justify-self: start; }
  .play, .sees { padding: 64px 0; }
  .close-copy { top: calc(30px * var(--S) + 36px); }
  .after { gap: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .is-after .kwin { transition: opacity 200ms; scale: 1; }
  .is-after .after-copy > * { animation: none; }
}

/* ── The gather: the layer is up before the headline ── */
.is-gathering .after { visibility: visible; }
.is-gathering .after-copy { visibility: hidden; }
.is-gathering .kwin { opacity: 1; scale: 1; }
.mac-screen.is-gathering > .desk { transition: filter 600ms var(--mu-ease-slide); filter: saturate(.9) brightness(.97); }
.gather-well {
  position: absolute; left: 50%; top: 50%; width: 120px; height: 120px; margin: -60px 0 0 -60px;
  z-index: 3; pointer-events: none;
  animation: well-open 520ms var(--mu-spring-object, cubic-bezier(.2,.9,.25,1)) both;
  filter: drop-shadow(0 10px 24px rgba(0,0,0,.28));
}
.gather-well svg { width: 100%; height: 100%; display: block; }
.gather-well .gw-r { transform-origin: 60px 60px; animation: well-ring 1.6s linear infinite; }
.gather-well .gw-r:nth-child(2) { animation-delay: -.53s; }
.gather-well .gw-r:nth-child(3) { animation-delay: -1.06s; }
.gather-well.is-closing { animation: well-close 380ms var(--mu-ease-press, ease-in) both; }
@keyframes well-open { from { scale: .2; opacity: 0; } }
@keyframes well-close { to { scale: .2; opacity: 0; } }
@keyframes well-ring { from { scale: 1.35; opacity: 0; } 30% { opacity: 1; } to { scale: .4; opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .gather-well, .gather-well .gw-r { animation: none; }
  .mac-screen.is-gathering > .desk { transition: none; }
}

/* on a phone the widgets would sit under the headline once the desk is clear */
@media (max-width: 719px) {
  .is-after .dt-widget { opacity: 0; transition: opacity 400ms var(--mu-ease-slide); }
}