:root{
  --ink:#06072d; --green:#2ED009; --celadon:#dfefdb; --periwinkle:#9381ff;
  --motion-rgb:147,129,255; --motion-contrast:1; --motion-stroke:1;
  --sunrise-periwinkle-rgb:147,129,255; --sunrise-lilac-rgb:174,90,191;
  --sunrise-orange-rgb:238,97,35; --sunrise-mango-rgb:255,207,0;
  color-scheme:dark;
}
*{box-sizing:border-box}
/* On a desktop the stage is simply the viewport, and the page does not scroll. */
:root{--bleed:0px}
html{min-height:100%;overscroll-behavior:none;background:var(--ink)}
body{
  margin:0; min-height:100dvh; overflow:hidden; color:var(--celadon); background:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,sans-serif;
  overscroll-behavior:none;
}
.stage{position:relative;height:100dvh;overflow:hidden}
.timeline{position:absolute;inset:0;width:100%;height:100%;display:block}
/* On a phone, Safari 26 only paints behind its status bar and floating toolbar when the document
   has scroll state. So html stays scrollable, the stage overshoots the viewport by --bleed on both
   ends, and the pan gesture is blocked on the stage rather than hiding overflow on body. The
   overshoot is symmetric, so the stage's centre is still the visible centre. */
@media (hover:none) and (pointer:coarse){
  :root{--bleed:160px}
  /* Scrollable, but the pan gesture is refused everywhere: touch-action on html covers every
     touch on the page, including ones that land on the fixed layers above the stage. */
  html{overflow-y:scroll;touch-action:pinch-zoom}   /* pans are refused in JS; zoom must stay */
  body{min-height:calc(100dvh + var(--bleed));overflow:visible}
  .stage{height:calc(100dvh + 2*var(--bleed));margin-top:calc(-1*var(--bleed))}
}
/* Enough wash at the centre for the mark to read, and none at the edges. */
.veil{position:fixed;inset:0;pointer-events:none;
  background:radial-gradient(46% 42% at 50% 46%,rgba(6,7,45,.94) 0%,rgba(6,7,45,.7) 46%,rgba(6,7,45,0) 100%)}

main{position:fixed;inset:0;display:grid;place-items:center;padding:24px}
.mark{
  display:block;margin:0;width:min(420px,62vw);aspect-ratio:562/173;
  background:var(--green);
  -webkit-mask:url(assets/motion.webp) center/contain no-repeat;
          mask:url(assets/motion.webp) center/contain no-repeat;
  animation:arrive 1.1s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes arrive{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* The dock does the centring, so the button is free to animate its own transform. */
.dock{position:fixed;left:0;right:0;bottom:calc(clamp(24px,5vh,54px) + env(safe-area-inset-bottom));display:grid;place-items:center;pointer-events:none}
.download{
  pointer-events:auto;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:44px;padding:0 22px 0 19px;border-radius:12px;
  /* Smoked glass: the timeline shows through, darkened rather than lit. */
  background:rgba(9,10,48,.62);
  border:0;
  -webkit-backdrop-filter:blur(16px);
          backdrop-filter:blur(16px);
  color:#fff;
  font-size:15px;font-weight:400;letter-spacing:-.035em;line-height:1;text-decoration:none;white-space:nowrap;
  transition:transform .22s cubic-bezier(.2,.7,.2,1),background .22s;
  animation:arrive 1.1s cubic-bezier(.2,.7,.2,1) .25s both;
}
.download:hover{transform:translateY(-1px);background:rgba(9,10,48,.74)}
.download:active{transform:translateY(0)}
.download:focus-visible{outline:2px solid var(--periwinkle);outline-offset:3px}
/* The mark reads a touch high against a cap-height line. */
.apple{flex:none;height:16px;width:auto;display:block;margin-top:-2px}

@media(max-width:620px){.mark{width:72vw}.download{font-size:14px;height:42px;padding:0 20px 0 17px}}
@media(prefers-reduced-motion:reduce){.mark,.download{animation:none}}

/* Sound, kept to the corner. */
.sound{position:fixed;top:calc(clamp(14px,2.6vh,24px) + env(safe-area-inset-top));right:calc(clamp(14px,2.4vw,26px) + env(safe-area-inset-right));z-index:2;
  width:34px;height:34px;padding:0;display:grid;place-items:center;
  border:0;border-radius:50%;background:transparent;color:rgba(223,239,219,.42);
  -webkit-appearance:none;appearance:none;cursor:pointer;transition:color .2s,background .2s}
.sound:hover{color:rgba(223,239,219,.92);background:rgba(223,239,219,.08)}
.sound:focus-visible{outline:2px solid var(--periwinkle);outline-offset:2px}
.sound svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.sound .waves{display:none}
.sound[aria-pressed="true"] .waves{display:block}
.sound[aria-pressed="true"] .muted{display:none}