/* vocabulatrix.com: one stylesheet. The app's palette and type (src/theme.ts, docs/ship/ART_DIRECTION.md):
   Jost for text, Marcellus for the wordmark and titles; Arcade's neon on ink. Dark is the app's own look
   (the intercept); light follows the system, and the product bands stay dark either way. Fonts are
   self-hosted, unmodified (OFL notices on /licences). No scripts, nothing from another origin
   (tools/site/check.ts): the scroll effects are CSS scroll-driven animations with a static fallback. */

@font-face { font-family: "Jost"; font-weight: 400; font-style: normal; font-display: swap; src: url("/fonts/Jost_400Regular.ttf") format("truetype"); }
@font-face { font-family: "Jost"; font-weight: 500; font-style: normal; font-display: swap; src: url("/fonts/Jost_500Medium.ttf") format("truetype"); }
@font-face { font-family: "Jost"; font-weight: 600; font-style: normal; font-display: swap; src: url("/fonts/Jost_600SemiBold.ttf") format("truetype"); }
@font-face { font-family: "Marcellus"; font-weight: 400; font-style: normal; font-display: swap; src: url("/fonts/Marcellus_400Regular.ttf") format("truetype"); }

:root {
  color-scheme: light dark;
  --bg: #F7F5FD;
  --bg-top: #F7F5FD;
  --bg-bottom: #F7F5FD;
  --surface: #FFFFFF;
  --text: #15122A;
  --muted: #4F4870;
  --line: #DAD5EC;
  --link: #5432C8;
  --focus: #9B6CFF;
  --ink: #15122A;
  --nav: rgba(247, 245, 253, 0.72);
  --glow: rgba(155, 108, 255, 0.22);
  --ring: rgba(185, 169, 255, 0.16);
  /* Arcade's six word colours, in order (theme.ts CASES[0]). */
  --w1: #FF4FA3; --w2: #FFE44D; --w3: #4DA3FF; --w4: #9B6CFF; --w5: #5CFF8A; --w6: #FF8A3D;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0E0C1A;
    --bg-top: #181430;
    --bg-bottom: #0E0C1A;
    --surface: #1D1838;
    --text: #F4F1FF;
    --muted: #B9B3D6;
    --line: #4A4470;
    --link: #B9A9FF;
    --nav: rgba(14, 12, 26, 0.72);
  }
}

/* The product's own look, whatever the system setting. Components inside read these tokens. */
.band-dark {
  --bg: #0E0C1A;
  --surface: #1D1838;
  --text: #F4F1FF;
  --muted: #B9B3D6;
  --line: #4A4470;
  --link: #B9A9FF;
  background: #0E0C1A;
  color: #F4F1FF;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background: linear-gradient(var(--bg-top), var(--bg-bottom)) fixed;
  background-color: var(--bg-bottom);
  color: var(--text);
  font: 400 1.0625rem/1.6 "Jost", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}
body.home { background: var(--bg); overflow-x: clip; }

img, video { max-width: 100%; height: auto; }

/* ---------- Layout ---------- */

.page { max-width: 40rem; margin: 0 auto; padding: 1.5rem 1.25rem 2rem; }
.inner { max-width: 68rem; margin: 0 auto; padding: 0 1.5rem; }
.center { text-align: center; }

.site-header { padding-bottom: 1rem; }
.wordmark { font-family: "Marcellus", Georgia, serif; font-size: 1.5rem; color: var(--text); text-decoration: none; letter-spacing: 0.01em; }
.dots { display: flex; gap: 0.375rem; margin-top: 0.5rem; }
.dots span { width: 0.5rem; height: 0.5rem; border-radius: 50%; }
.dots span:nth-child(1) { background: var(--w1); }
.dots span:nth-child(2) { background: var(--w2); }
.dots span:nth-child(3) { background: var(--w3); }
.dots span:nth-child(4) { background: var(--w4); }
.dots span:nth-child(5) { background: var(--w5); }
.dots span:nth-child(6) { background: var(--w6); }

/* The home page's thin, sticky, blurred bar. */
.nav { position: sticky; top: 0; z-index: 10; background: rgba(14, 12, 26, 0.25); color: #F4F1FF; -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid rgba(74, 68, 112, 0.6); }
.nav .brand { color: #F4F1FF; }
.nav .wordmark { color: #F4F1FF; }
.nav .inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.25rem; }
.brand { display: flex; align-items: center; gap: 0.625rem; text-decoration: none; color: var(--text); }
.brand img { width: 1.75rem; height: 1.75rem; border-radius: 0.45rem; }
.brand .wordmark { font-size: 1.25rem; }
.nav-links { display: flex; align-items: center; gap: 1.25rem; }
.nav-links a { color: #B9B3D6; text-decoration: none; min-height: 2.75rem; display: inline-flex; align-items: center; font-size: 0.9375rem; }
.nav-links a:hover { color: #F4F1FF; }
.menu { position: relative; }
.nav-links .menu-btn { color: #F4F1FF; }
/* A faint shadow gives the bar's white text an edge where the glass sits over the light sections. */
.nav .wordmark, .nav-links .menu-btn { text-shadow: 0 1px 2px rgba(14, 12, 26, 0.45), 0 0 8px rgba(14, 12, 26, 0.3); }
.menu-list { position: absolute; right: 0; top: 100%; min-width: 11rem; padding: 0.5rem 0; border-radius: 0.875rem; background: rgba(20, 17, 38, 0.96); border: 1px solid #4A4470; box-shadow: 0 1rem 2.5rem rgba(0,0,0,0.5); display: grid; opacity: 0; transform: translateY(-0.25rem); pointer-events: none; transition: opacity 0.18s ease, transform 0.18s ease; }
.menu-list a { display: block; padding: 0.5rem 1rem; min-height: 0; color: #F4F1FF; font-size: 0.9375rem; }
.menu-list a:hover { background: rgba(255,255,255,0.06); }
.menu:hover .menu-list, .menu:focus-within .menu-list { opacity: 1; transform: none; pointer-events: auto; }
.nav-links .pill { color: var(--ink); background: var(--w2); border-radius: 1rem; padding: 0 0.875rem; min-height: 2rem; font-weight: 600; white-space: nowrap; }
@media (max-width: 26rem) { .brand .wordmark { display: none; } .nav-links { gap: 0.875rem; } }

/* ---------- Type ---------- */

h1 { font-family: "Marcellus", Georgia, serif; font-weight: 400; font-size: clamp(1.875rem, 6vw, 2.5rem); line-height: 1.2; margin: 1.5rem 0 1rem; }
h2 { font-weight: 600; font-size: 1.25rem; line-height: 1.35; margin: 2.25rem 0 0.5rem; }
h3 { font-weight: 600; font-size: 1.0625rem; line-height: 1.4; margin: 1.5rem 0 0.25rem; }
p, ul, dl { margin: 0 0 1rem; }
ul { padding-left: 1.25rem; }
li { margin-bottom: 0.375rem; }
.lede { font-size: 1.25rem; line-height: 1.5; }
.muted, .effective { color: var(--muted); }
.store { font-weight: 500; }
a { color: var(--link); text-underline-offset: 0.15em; }
a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 2px; }

.home h1 { margin: 0; line-height: 0; }
.home h2 { font-family: "Marcellus", Georgia, serif; font-weight: 400; font-size: clamp(2rem, 4.6vw, 3.5rem); line-height: 1.06; letter-spacing: -0.01em; margin: 0 0 1rem; }
.home .body { font-size: clamp(1.0625rem, 1.3vw, 1.25rem); color: var(--muted); max-width: 40ch; margin: 0; }

/* ---------- Buttons ---------- */

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.75rem; min-height: 3.5rem; padding: 0 2.25rem; border-radius: 1.75rem; font-weight: 600; font-size: 1.125rem; text-decoration: none; color: var(--ink); background: var(--w2); box-shadow: 0 0.3rem 0 #948526, 0 0 1.5rem rgba(255, 228, 77, 0.22); }
.btn:hover { filter: brightness(1.04); }
.btn:active { transform: translateY(2px); box-shadow: 0 0.15rem 0 #948526; }
.btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.btn-quiet { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1.25rem; border-radius: 1.375rem; border: 1.5px solid var(--line); background: var(--surface); color: var(--text); font-weight: 500; font-size: 1rem; text-decoration: none; }
.badge { display: inline-flex; align-items: center; gap: 0.75rem; min-height: 3.5rem; padding: 0 1.5rem; border-radius: 0.875rem; background: #000; border: 1.5px solid #8F8AAE; color: #fff; text-decoration: none; }
.badge span { display: flex; flex-direction: column; line-height: 1.1; text-align: left; }
.badge small { font-size: 0.75rem; }
.badge b { font-size: 1.375rem; font-weight: 500; }
.cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.75rem 1.5rem; margin-top: 2rem; }
.cta-note { flex-basis: 100%; font-size: 1rem; color: var(--muted); margin: 0; }
/* Before there is a store link: a status, not a button (docs/ship/SITE.md §5). Only ever on a dark band. */
.soon { display: inline-flex; align-items: center; gap: 0.625rem; min-height: 3.25rem; padding: 0 1.75rem; border-radius: 1.75rem; border: 1.5px solid rgba(255, 228, 77, 0.55); background: rgba(255, 228, 77, 0.07); color: var(--w2); font-weight: 600; font-size: 1.0625rem; }
.soon::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--w2); }
@keyframes pulse { 50% { opacity: 0.3; } }
@media (prefers-reduced-motion: no-preference) { .soon::before { animation: pulse 2.4s ease-in-out infinite; } }
.qr { display: flex; align-items: center; gap: 0.75rem; text-align: left; }
.qr img { width: 4.75rem; height: 4.75rem; border-radius: 0.625rem; background: #F4F1FF; }
.qr span { font-size: 0.9375rem; color: var(--muted); max-width: 14ch; }
@media (max-width: 40rem) { .qr { display: none; } }

/* ---------- The phone frame (always dark: the screens are dark) ---------- */

.phone { position: relative; width: min(21rem, 80vw); aspect-ratio: 1206 / 2622; padding: 0.5rem; border-radius: 3.25rem; background: #05040A; border: 2px solid #3A3560; box-shadow: inset 0 0 0 1px #1A1733, 0 2rem 5rem rgba(0, 0, 0, 0.55), 0 0 4rem rgba(155, 108, 255, 0.25); }
.phone img, .phone video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 2.75rem; }
/* An iPhone: the Dynamic Island over the screen, the side buttons on the frame. */
.phone::before { content: ""; position: absolute; left: 50%; top: 1.25rem; width: 31%; height: 2.25rem; transform: translateX(-50%); border-radius: 1.125rem; background: #000; z-index: 2; }
.phone::after { content: ""; position: absolute; right: -0.3rem; top: 24%; width: 0.3rem; height: 11%; border-radius: 0 0.15rem 0.15rem 0; background: #3A3560; z-index: 0; }
.phone .btn-side { position: absolute; left: -0.3rem; width: 0.3rem; border-radius: 0.15rem 0 0 0.15rem; background: #3A3560; }
.phone .btn-side.mute { top: 17%; height: 3.5%; }
.phone .btn-side.vol1 { top: 24%; height: 7%; }
.phone .btn-side.vol2 { top: 33%; height: 7%; }
.phone.small::before { height: 1.75rem; top: 1rem; border-radius: 0.875rem; }
.phone.small { width: min(17rem, 72vw); }
.tablet { width: 15rem; padding: 0.5rem; border-radius: 1.375rem; background: #0E0C1A; border: 1.5px solid #4A4470; box-shadow: 0 1.5rem 3.75rem rgba(0, 0, 0, 0.5); }
.tablet img { display: block; width: 100%; height: auto; border-radius: 0.9rem; }

/* ---------- Hero: the name, one line, the button, the game playing ---------- */

/* clip-path, not overflow: an overflow:hidden box would become the scroller for the view timelines inside it. */
.hero { position: relative; clip-path: inset(0); overflow-x: clip; padding: clamp(2rem, 5vh, 3.5rem) 0 clamp(2.5rem, 6vh, 4rem); }
/* The hero runs up under the glass bar, so the bar shows the dark hero at the top of the page, not the light page (the bar is 3.25rem + its 1px border). */
.home .hero { margin-top: calc(-3.25rem - 1px); padding-top: calc(clamp(2rem, 5vh, 3.5rem) + 3.25rem + 1px); }
.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; min-height: calc(100svh - 3.25rem - clamp(2rem, 5vh, 3.5rem) - clamp(2.5rem, 6vh, 4rem)); }
.hero-copy { text-align: center; }
/* The mark (docs/ship/art/logo): the name is the biggest thing on the page. */
.logo { display: block; width: min(34rem, 100%, 56svh); height: auto; margin: 0 auto; }
.tagline { font-family: "Marcellus", Georgia, serif; font-size: clamp(1.5rem, 2.5vw, 2rem); line-height: 1.15; margin: 0.25rem 0 0; text-wrap: balance; }
.hero-stage { position: relative; display: flex; justify-content: center; align-items: center; }
/* The whole phone fits the first screen, so the wheel being swiped is in view. */
.hero-stage .phone { width: min(21rem, 78vw, (100svh - 10rem) * 1206 / 2622); z-index: 2; }
@media (max-width: 52rem) {
  .hero-grid { grid-template-columns: 1fr; gap: 2.5rem; min-height: 0; }
  .logo { width: min(22rem, 84vw); }
  .hero-stage .phone { width: min(19rem, 76vw); }
}
/* The glyph field: letters adrift, as in the app (ART_DIRECTION §5.4). In the hero and again in the closing band. */
.glyphs { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.glyphs i { position: absolute; font-style: normal; font-weight: 500; opacity: 0.3; line-height: 1; will-change: transform; }
@keyframes brown { 0% { transform: perspective(240px) translate(0, 0) rotate(0deg) rotateY(0deg); opacity: 0.3; } 25% { transform: perspective(240px) translate(var(--x1), var(--y1)) rotate(var(--r1, 0deg)) rotateY(var(--f1, 0deg)); opacity: 0.18; } 50% { transform: perspective(240px) translate(var(--x2), var(--y2)) rotate(var(--r2, 0deg)) rotateY(var(--f2, 0deg)); opacity: 0.34; } 75% { transform: perspective(240px) translate(var(--x3), var(--y3)) rotate(var(--r3, 0deg)) rotateY(var(--f3, 0deg)); opacity: 0.2; } 100% { transform: perspective(240px) translate(0, 0) rotate(var(--re, 0deg)) rotateY(var(--fe, 0deg)); opacity: 0.3; } }
@media (prefers-reduced-motion: no-preference) { .glyphs i { animation: brown var(--t, 36s) ease-in-out infinite; animation-delay: var(--dly, 0s); } }
/* Letter bursts, as the app's cards do: invisible until the scroll animation runs them. */
.burst { position: absolute; left: 50%; top: 20%; width: 0; height: 0; pointer-events: none; z-index: 3; }
.burst i { position: absolute; left: 0; top: 0; font-style: normal; font-weight: 600; font-family: "Jost", sans-serif; line-height: 1; opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
.hero-stage .halo { position: absolute; left: 50%; top: 50%; width: 52rem; height: 52rem; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, var(--glow) 0%, rgba(155,108,255,0.06) 45%, rgba(155,108,255,0) 70%); pointer-events: none; }
.rings { position: absolute; left: 50%; top: 50%; width: 72rem; height: 72rem; transform: translate(-50%, -50%); pointer-events: none; }
.rings circle { fill: none; stroke: var(--ring); stroke-width: 0.8; }

/* ---------- Bands and sections ---------- */

.section { padding: clamp(5rem, 12vh, 9rem) 0; }
.band-dark.section { padding: clamp(5rem, 12vh, 9rem) 0; }

/* The lines: eight of them scroll past on the left while one gameplay clip plays on the pinned phone. */
.section.stack { overflow-x: clip; }
.stack .inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4rem; align-items: start; }
.stack-copy { display: flex; flex-direction: column; }
.step { min-height: 66vh; display: flex; flex-direction: column; justify-content: center; gap: 0.875rem; padding: 2rem 0; }
.lines h2 { font-size: clamp(1.75rem, 3.3vw, 2.75rem); line-height: 1.1; margin: 0; max-width: 21ch; text-wrap: balance; }
.lines h2 em { font-style: normal; color: var(--link); }
.lines .body { font-size: clamp(1.125rem, 1.5vw, 1.375rem); line-height: 1.45; max-width: 33ch; }
.step .phone { display: none; }
.stack-stage { position: sticky; top: 8vh; height: 84vh; display: flex; align-items: center; justify-content: center; perspective: 1100px; perspective-origin: 58% 28%; }
/* The tabletop: a phone lying on a desk, seen from a chair. Everything flat shares one tilt (--tilt) about the phone's bottom edge, so it stays coplanar. */
.stage-wrap { position: relative; transform-style: preserve-3d; --tilt: 58deg; --turn: -14deg; }
.stack-stage .phone { position: relative; z-index: 2; width: min(21rem, 38vw, 84vh * 1206 / 2622 - 1rem); transform-origin: 50% 100%; transform-style: preserve-3d; }
.stack-stage .phone video, .stack-stage .phone img { position: relative; z-index: 2; transform: translateZ(0.5px); }
.stack-stage .phone .back { position: absolute; inset: -2px; border-radius: inherit; background: #2E2A52; }
.stack-stage .phone .b1 { transform: translateZ(-4px); }
.stack-stage .phone .b2 { transform: translateZ(-8px); background: #221F40; }
.stack-stage .phone .b3 { transform: translateZ(-12px); background: #17142D; }
.stack-stage .phone .gloss { position: absolute; inset: 0.5rem; border-radius: 2.75rem; background: linear-gradient(112deg, rgba(255,255,255,0) 36%, rgba(255,255,255,0.26) 46%, rgba(255,255,255,0.08) 53%, rgba(255,255,255,0) 63%); opacity: 0; pointer-events: none; z-index: 3; }
.stage-wrap .desk { position: absolute; left: 50%; bottom: -40%; width: 420%; height: 230%; transform-origin: 50% 82.6%; transform: translateX(-50%) rotateX(var(--tilt)); border-radius: 3rem; background: linear-gradient(to top, rgba(104, 92, 160, 0.22) 0%, rgba(104, 92, 160, 0.15) 40%, rgba(104, 92, 160, 0.05) 75%, rgba(104, 92, 160, 0) 100%); -webkit-mask-image: radial-gradient(ellipse 50% 60% at 50% 70%, #000 35%, transparent 100%); mask-image: radial-gradient(ellipse 50% 60% at 50% 70%, #000 35%, transparent 100%); opacity: 0; pointer-events: none; z-index: 0; }
.stage-wrap .lie { position: absolute; inset: 0; border-radius: 3.25rem; background: rgba(28, 18, 64, 0.42); box-shadow: 18px 26px 22px rgba(28, 18, 64, 0.26), 4px 6px 6px rgba(28, 18, 64, 0.42); transform-origin: 50% 100%; transform: rotateX(var(--tilt)) rotateZ(var(--turn)) translateZ(-13px) scale(0.94); opacity: 0; pointer-events: none; z-index: 1; }
.stage-wrap .table { position: absolute; left: 50%; bottom: -5%; width: 150%; height: 14%; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(ellipse at center, rgba(28, 18, 64, 0.38), rgba(28, 18, 64, 0) 68%); opacity: 0.8; pointer-events: none; z-index: 1; }
/* Two columns: scrolling stops on the hero, each line (in the middle of the window, level with the phone), and the close with the footer. */
@media (min-width: 52.0625rem) {
  html { scroll-snap-type: y mandatory; }
  .hero { scroll-snap-align: start; scroll-margin-top: 4rem; }
  .step { scroll-snap-align: center; scroll-snap-stop: always; }
  body > footer { scroll-snap-align: end; }
}
@media (max-width: 52rem) {
  .stack .inner { grid-template-columns: 1fr; gap: 0; }
  .stack-stage { display: none; }
  .step { min-height: 0; padding: 3rem 0; }
  .step .phone { display: block; margin: 1.5rem auto 0; }
}

.bubbles { display: flex; flex-direction: column; gap: 0.875rem; align-items: flex-start; margin-top: 1.25rem; }
.bubbles p { margin: 0; padding: 0.875rem 1.375rem; border-radius: 1.125rem; background: var(--surface); border: 1px solid var(--line); font-style: italic; font-size: 1.25rem; color: var(--muted); }
.bubbles p:nth-child(2) { margin-left: 2.5rem; }
.bubbles p:nth-child(3) { margin-left: 0.75rem; }
.bubbles p:nth-child(4) { margin-left: 4rem; }
@media (max-width: 40rem) { .bubbles p:nth-child(n) { margin-left: 0; } }

/* The word: one of the words you keep, on its card, as the game shows it. Eight of them take turns. */
.word { margin-top: 1rem; max-width: 30rem; }
.word .spot-wrap { position: relative; padding: 1.5rem 1.75rem 1.75rem; border-radius: 1.5rem; background: var(--surface); border: 1px solid var(--line); }
.word .eyebrow { position: relative; z-index: 1; font-size: 0.8125rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin: 0 0 0.75rem; font-weight: 600; }
.slides { position: relative; z-index: 1; display: grid; }
.slide { grid-area: 1 / 1; opacity: 0; }
.slide:first-child { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .slide { animation: slide 40s linear infinite; animation-delay: calc(var(--i) * 5s); }
  .slide:first-child { opacity: 0; }
}
@keyframes slide { 0% { opacity: 0; } 1.5% { opacity: 1; } 11% { opacity: 1; } 12.5% { opacity: 0; } 100% { opacity: 0; } }
.word .spot { font-family: "Marcellus", Georgia, serif; font-size: clamp(2.5rem, 4.6vw, 4rem); line-height: 1; letter-spacing: -0.01em; margin: 0; }
.burst-word { top: 40%; z-index: 0; --k: 0.62; }
.word .pos { display: inline-block; margin: 0.75rem 0 0; padding: 0.125rem 0.75rem; border: 1px solid var(--w3); border-radius: 1rem; color: var(--w3); font-size: 0.875rem; font-weight: 500; }
.word .def { font-size: clamp(1.125rem, 1.6vw, 1.375rem); line-height: 1.35; margin: 1rem 0 0; }
.word .ex { font-style: italic; color: var(--muted); font-size: 1.0625rem; margin: 0.625rem 0 0; }

.closing { position: relative; clip-path: inset(0); overflow-x: clip; text-align: center; }
.closing .halo { position: absolute; left: 50%; top: 100%; width: 70rem; height: 40rem; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, var(--glow) 0%, rgba(155,108,255,0) 65%); pointer-events: none; }
.closing .inner { position: relative; }
.closing .cta { margin-top: 2rem; }
.maker { color: var(--muted); font-size: 1.0625rem; margin: 3rem 0 0; }

/* ---------- Motion: entrance on load, reveals and the screen swap on scroll. Static without support or with reduced motion. ---------- */

@keyframes enter { from { opacity: 0; transform: translateY(1.25rem); } to { opacity: 1; transform: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(2rem); } to { opacity: 1; transform: none; } }
@keyframes stand2 { from { transform: rotateX(var(--tilt)) rotateZ(var(--turn)) scale(0.94); filter: brightness(0.86); } to { transform: none; filter: none; } }
@keyframes lie { from { opacity: 1; } 45%, to { opacity: 0; } }
@keyframes lift { from { transform: translateY(-34%); } to { transform: none; } }
@keyframes gloss { from { opacity: 1; } 55%, to { opacity: 0; } }
@keyframes desk { from { opacity: 1; } 70%, to { opacity: 0; } }
@keyframes base { from { opacity: 0; } 50% { opacity: 0; } to { opacity: 0.8; } }
@keyframes fly { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); } 12% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(-50% + var(--dx) * var(--k, 1)), calc(-50% + var(--dy) * var(--k, 1))) rotate(var(--r)) scale(1.15); } }

@media (prefers-reduced-motion: no-preference) {
  .enter { animation: enter 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .enter.d1 { animation-delay: 0.1s; }
  .enter.d2 { animation-delay: 0.25s; }
  .enter.d3 { animation-delay: 0.4s; }
  .enter.d4 { animation-delay: 0.55s; }

  @supports (animation-timeline: view()) {
    .reveal { animation: rise linear both; animation-timeline: view(); animation-range: entry 5% entry 45%; }
    /* The letters burst from the word card as it scrolls into view. */
    .word .spot-wrap { view-timeline: --word block; }
    .burst-word i { animation: fly linear both; animation-timeline: --word; animation-range: entry calc(55% + var(--d) * 30%) entry calc(100% + var(--d) * 30%); }
    /* The tabletop arrives lying flat and the phone is upright the moment the stage pins. Timeline: the section itself; `contain 0` is the section's top at the top of the window, and the stage pins when the section's top padding has scrolled to 8vh, hence the offsets. */
    .section.stack { view-timeline: --stack-sec block; }
    .stage-wrap { animation: lift linear both; }
    .stage-wrap, .stack-stage .phone.stand2, .stage-wrap .lie, .stage-wrap .gloss, .stage-wrap .desk, .stage-wrap .table { animation-timeline: --stack-sec; animation-range: contain calc(clamp(5rem, 12vh, 9rem) - 52vh) contain calc(clamp(5rem, 12vh, 9rem) - 8vh); animation-fill-mode: both; }
    .stack-stage .phone.stand2 { animation-name: stand2; animation-timing-function: cubic-bezier(0.35, 0.05, 0.3, 1); }
    .stage-wrap .lie { animation-name: lie; animation-timing-function: linear; }
    .stage-wrap .gloss { animation-name: gloss; animation-timing-function: linear; }
    .stage-wrap .desk { animation-name: desk; animation-timing-function: linear; }
    .stage-wrap .table { animation-name: base; animation-timing-function: linear; }
  }
}

/* ---------- Press ---------- */

.press-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: 1rem; margin: 1rem 0 2rem; }
.press-grid a { display: block; text-decoration: none; }
.press-grid img { display: block; width: 100%; height: auto; border-radius: 0.75rem; border: 1px solid var(--line); }
.press-grid .icon { max-width: 9rem; }
.press-grid .mark img { border-radius: 1.25rem; }
.press-grid span { display: block; margin-top: 0.375rem; font-size: 0.875rem; color: var(--muted); }
.kv { display: grid; grid-template-columns: 7rem 1fr; gap: 0.375rem 1rem; margin: 0 0 1.5rem; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; }
@media (max-width: 40rem) { .kv { grid-template-columns: 1fr; gap: 0; } .kv dt { margin-top: 0.5rem; } }

/* ---------- Legal pages (unchanged) ---------- */

.service { background: var(--surface); border: 1px solid var(--line); border-radius: 0.75rem; padding: 0.25rem 1rem 0.5rem; margin: 0 0 0.75rem; }
.service h3 { margin-top: 0.75rem; }
.service dl { display: grid; grid-template-columns: 3.25rem 1fr; gap: 0.25rem 0.75rem; margin: 0 0 0.5rem; }
.service dt { color: var(--muted); }
.service dd { margin: 0; }
pre { white-space: pre-wrap; overflow-wrap: anywhere; font: 0.8125rem/1.5 ui-monospace, Menlo, monospace; color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: 0.75rem; padding: 1rem; }

/* ---------- Footer ---------- */

footer { margin-top: 3rem; padding-top: 0.5rem; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.9375rem; }
.home footer { margin-top: 0; padding: 0; border-top: 0; }
.home footer .band-dark { padding: 1rem 0 2rem; border-top: 1px solid #4A4470; }
footer .row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.5rem 1.5rem; }
footer nav { display: flex; flex-wrap: wrap; align-items: center; }
footer a { display: inline-block; padding: 0.625rem 0; min-height: 2.75rem; }
footer .sep { padding: 0 0.375rem; }

/* ---------- 404 ---------- */
.lost { text-align: center; padding: 4rem 0; }
.lost h1 { margin-top: 2rem; }