/* Twist Tunnel landing — damianai.org/twist/ (built from the xCinema page)
   Every animation cites MOTION.md. All paths are relative, so the page works under any prefix. */

@font-face{font-family:"Barlow Condensed";font-weight:700;font-style:normal;font-display:swap;
  src:url(assets/fonts/barlow-condensed-700-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Barlow Condensed";font-weight:700;font-style:normal;font-display:swap;
  src:url(assets/fonts/barlow-condensed-700-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Inter";font-weight:100 900;font-style:normal;font-display:swap;
  src:url(assets/fonts/inter-var-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-weight:100 900;font-style:normal;font-display:swap;
  src:url(assets/fonts/inter-var-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  /* colour: the game's night tunnel — neon blue and pink on near black (Tuning.palettes[0]) */
  --bg:#0b0a1a;
  --bg-2:#131030;
  --ink:#f4f0ff;
  --ink-2:#b8b2d8;
  --pink:#ff4fbf;         /* the tunnel's pink ring */
  --pink-ink:#1a0414;
  --blue:#3d8bff;         /* the tunnel's blue ring */
  --cyan:#5fe6ff;         /* kicker text, passes 4.5:1 on --bg */
  --line:#2c2752;

  --disp:"Barlow Condensed","DIN Condensed","Arial Narrow",sans-serif;
  --body:"Inter",system-ui,-apple-system,sans-serif;
  --gut:clamp(16px,5vw,72px);

  /* motion tokens — MOTION.md */
  --t-hover:160ms;
  --t-pose:420ms;
  --t-entry:600ms;
  --ease:cubic-bezier(.2,.7,.2,1);

  /* the iPhone Duo captures (assets/duo, Device Hub at one zoom): width / height */
  --open-ar:1.3994;      /* 1948×1392 */
  --half-ar:1.3200;      /* 1951×1478 */
  --closed-ar:.7200;     /* 1008×1400 */
  --shadow:drop-shadow(0 0 46px rgba(150,90,255,.30)) drop-shadow(0 30px 40px rgba(0,0,0,.55));
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:4px}
::selection{background:var(--pink);color:var(--pink-ink)}

.skip{position:absolute;left:12px;top:-60px;z-index:100;padding:10px 16px;background:var(--pink);color:var(--pink-ink);
  font-weight:600;text-decoration:none;border-radius:8px}
.skip:focus{top:12px}

/* ── nav ─────────────────────────────────────────────── */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  padding:14px var(--gut);background:linear-gradient(180deg,rgba(11,10,26,.94) 40%,rgba(11,10,26,0))}
.wordmark{display:flex;align-items:center;gap:10px;font-family:var(--disp);font-size:24px;letter-spacing:.02em;
  text-decoration:none}
.wordmark img{border-radius:7px}
.nav-right{display:flex;align-items:center;gap:14px}

/* ── buttons ─────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 24px;
  border-radius:999px;font-weight:600;font-size:15px;text-decoration:none;
  transition:transform var(--t-hover) var(--ease),background-color var(--t-hover) var(--ease)}
.btn-small{min-height:36px;padding:7px 16px;font-size:14px;background:var(--ink);color:var(--bg)}
.btn-primary{background:var(--pink);color:var(--pink-ink);box-shadow:0 0 28px -6px rgba(255,79,191,.7)}
.btn-ghost{border:1px solid var(--line);color:var(--ink)}
.btn:hover{transform:translateY(-1px)}
.btn-ghost:hover{background:var(--bg-2)}

/* ── type ────────────────────────────────────────────── */
.kicker{margin:0 0 14px;font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan)}
h1,h2{font-family:var(--disp);font-weight:700;text-transform:uppercase;line-height:.98;letter-spacing:.005em;margin:0}
h1{font-size:clamp(48px,7.4vw,112px)}
h2{font-size:clamp(36px,4.6vw,68px)}
h1 span:first-child{display:block}
/* the highlight glows like the game's neon banners; the colour itself passes 4.5:1 on --bg */
.hl{color:var(--pink);text-shadow:0 0 18px rgba(255,79,191,.55),0 0 42px rgba(255,79,191,.35)}
.lede{max-width:52ch;margin:20px 0 0;font-size:clamp(16px,1.25vw,19px);color:var(--ink-2)}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}

/* ── stage: hero + the fold (MOTION.md "Fold") ─────────
   data-pose is closed → half → open as the stage scrolls. The HTML says "open", so without JS the open phone shows. */
.stage{position:relative;height:300vh;
  background:radial-gradient(60% 50% at 75% 30%,rgba(61,139,255,.18),transparent 65%),
    radial-gradient(45% 45% at 60% 75%,rgba(255,79,191,.14),transparent 65%),var(--bg)}
.stage-sticky{position:sticky;top:0;height:100svh;min-height:620px;display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-rows:1fr auto;align-items:center;gap:0 4vw;
  padding:96px var(--gut) 36px;overflow:hidden}
.hero-copy{grid-column:1;grid-row:1}
.duo-scene{grid-column:2;grid-row:1;position:relative;display:flex;justify-content:center;align-items:center;height:100%;min-height:0}
/* one box shaped like the tallest pose (half open); every pose is centred in it at the simulator's own scale */
.poses{position:relative;width:min(100%,calc((100svh - 280px) * var(--half-ar)),980px);aspect-ratio:var(--half-ar);filter:var(--shadow)}
.pose{position:absolute;left:50%;top:50%;height:auto;max-width:none;opacity:0;transform:translate(-50%,-50%) scale(.965);
  transition:opacity var(--t-pose) var(--ease),transform var(--t-pose) var(--ease)}
.pose-open{width:100%}
.pose-half{width:100%}
.pose-closed{width:51.67%}
.stage[data-pose="closed"] .pose-closed,.stage[data-pose="half"] .pose-half,.stage[data-pose="open"] .pose-open{
  opacity:1;transform:translate(-50%,-50%)}
.beats{grid-column:1 / -1;grid-row:2;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);
  gap:24px;max-width:980px;justify-self:end;width:min(100%,60vw)}
.beat{display:flex;flex-direction:column;gap:2px;padding-top:12px;border-top:2px solid var(--line);color:var(--ink-2);
  font-size:15px;transition:color var(--t-hover) var(--ease),border-color var(--t-hover) var(--ease)}
.beat-label{font-family:var(--disp);font-size:22px;text-transform:uppercase;color:var(--ink-2)}
.stage[data-pose="closed"] .beat-closed,.stage[data-pose="half"] .beat-half,.stage[data-pose="open"] .beat-open{color:var(--ink);border-color:var(--pink)}
.stage[data-pose="closed"] .beat-closed .beat-label,.stage[data-pose="half"] .beat-half .beat-label,
.stage[data-pose="open"] .beat-open .beat-label{color:var(--ink)}
.scroll-hint{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);margin:0;font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);transition:opacity var(--t-pose) var(--ease)}
.stage:not([data-pose="closed"]) .scroll-hint{opacity:0}

/* ── sections ────────────────────────────────────────── */
.section{position:relative;padding:clamp(80px,12vw,160px) var(--gut)}
.rv{opacity:0;transform:translateY(16px);transition:opacity var(--t-entry) var(--ease),transform var(--t-entry) var(--ease)}
.in .rv,.rv.in{opacity:1;transform:none}
.no-js .rv{opacity:1;transform:none}

/* the film: same paper as the page, so only the shadow frames it */
.film-section{text-align:center}
.film-section .kicker{display:block}
.film{position:relative;margin:40px auto 0;width:min(100%,1100px);aspect-ratio:16/9;border-radius:18px;overflow:hidden;
  background:#000;box-shadow:0 0 60px -10px rgba(150,90,255,.45),0 40px 80px -40px rgba(0,0,0,.8)}
.film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* feature rows: copy + the device straight from the simulator */
.feature{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,80px);align-items:center}
.feature.rev .f-media{order:-1}
.shot{position:relative;filter:var(--shadow)}
.shot img{width:100%;height:auto}
.shot-open{aspect-ratio:var(--open-ar)}
.shot-closed{aspect-ratio:var(--closed-ar)}
.shot-half{aspect-ratio:var(--half-ar)}
.f-pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.4vw,32px);max-width:640px;justify-self:center;width:100%}
.f-single{max-width:360px;justify-self:center;width:100%}

/* the three boosts, dots in the game's own colours (Tuning.shieldColor / slowMoColor / clearColor) */
.boosts{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:12px;max-width:52ch;color:var(--ink-2);font-size:clamp(15px,1.15vw,17px)}
.boosts li{display:grid;grid-template-columns:18px auto 1fr;gap:4px 12px;align-items:baseline}
.boosts strong{color:var(--ink);font-weight:650}
.dot{width:12px;height:12px;border-radius:50%;align-self:center}
.dot-shield{background:#ffcc33;box-shadow:0 0 12px #ffcc33}
.dot-slow{background:#4dffe6;box-shadow:0 0 12px #4dffe6;border-radius:2px;transform:rotate(45deg) scale(.85)}
.dot-clear{border:2.5px solid #cc73ff;box-shadow:0 0 12px #cc73ff}

/* iPhone Duo: three ways to hold it */
.duo-facts{text-align:center;background:var(--bg-2)}
.duo-facts .lede{margin-left:auto;margin-right:auto}
.facts{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.32fr) minmax(0,1.3994fr);gap:clamp(24px,4vw,56px);align-items:end;
  max-width:1200px;margin:48px auto 0}
.fact{margin:0}
.fact figcaption{margin-top:18px;color:var(--ink-2);font-size:15px}
.fact figcaption strong{display:block;font-family:var(--disp);font-size:22px;text-transform:uppercase;color:var(--ink);font-weight:700}

/* finale */
.finale{text-align:center;display:flex;flex-direction:column;align-items:center;
  background:radial-gradient(60% 70% at 50% 100%,rgba(150,90,255,.20),transparent 70%)}
.finale-icon{border-radius:24px;margin-bottom:28px;box-shadow:0 0 50px -6px rgba(255,79,191,.55),0 0 24px -4px rgba(61,139,255,.5)}
.finale .cta-row{justify-content:center;margin-top:36px}

.footer{display:flex;flex-direction:column;gap:6px;padding:36px var(--gut) 48px;border-top:1px solid var(--line);
  font-size:13px;color:var(--ink-2)}
.footer p{margin:0}
.footer a{color:var(--ink);text-underline-offset:3px}

/* ── responsive ──────────────────────────────────────── */
@media (max-width:960px){
  .stage{height:280vh}
  .stage-sticky{grid-template-columns:1fr;grid-template-rows:auto 1fr auto;padding-top:84px;gap:16px}
  .hero-copy{grid-column:1;grid-row:1}
  .hero-copy .lede{display:none}
  .hero-copy .cta-row{margin-top:18px}
  .duo-scene{grid-column:1;grid-row:2}
  .poses{width:min(100%,calc((100svh - 400px) * var(--half-ar)),720px)}
  /* one beat at a time: the three share a cell and the current one shows */
  .beats{grid-row:3;width:100%;justify-self:stretch;grid-template-columns:1fr}
  .beat{grid-area:1 / 1;opacity:0;visibility:hidden;transition:opacity var(--t-pose) var(--ease),visibility 0s linear var(--t-pose)}
  .stage[data-pose="closed"] .beat-closed,.stage[data-pose="half"] .beat-half,.stage[data-pose="open"] .beat-open{
    opacity:1;visibility:visible;transition:opacity var(--t-pose) var(--ease)}
  .scroll-hint{display:none}
  h1{font-size:clamp(44px,12vw,80px)}
  h1 span:first-child{display:inline}
  .feature{grid-template-columns:1fr}
  .feature.rev .f-media{order:0}
  .facts{gap:16px}
}
@media (max-width:560px){
  .hero-copy .btn-ghost{display:none}
  .f-single{max-width:270px}
  .beat{font-size:14px}
  .beat-label{font-size:19px}
  .facts{grid-template-columns:1fr;max-width:420px}
  .facts .fact:not(:last-child) .shot{width:66%;margin:0 auto}
}
/* the hint sits under the beats; when the beats wrap to two lines there is no room for it */
@media (max-width:1240px),(max-height:820px){
  .scroll-hint{display:none}
}
@media (max-height:700px) and (min-width:961px){
  .hero-copy .lede{font-size:15px}
}

/* ── reduced motion (MOTION.md) ─────────────────────── */
@media (prefers-reduced-motion:reduce){
  .stage{height:auto}
  .stage-sticky{position:relative;height:auto;min-height:100svh}
  .scroll-hint{display:none}
  .pose,.beat{transition:none}
  .rv{opacity:1;transform:none;transition:none}
  .btn{transition:none}
  .btn:hover{transform:none}
}