/* Layout: a pinned 3D stage tells the story at night (phone → glow → brain of light), the camera dives into the
   light, and the page comes out the other side in that same light: paper taken from the brain's brightest particles,
   black stars in parallax, slate type in a left column while the 3D phone stays beside it, changing pose per section.
   Hero tokens style the stage; page tokens style everything after the dive. The light theme flips the story:
   the hero is the brain's white light, and the dive comes out into deep turquoise. Phone, brain and neurons keep
   their own colours either way. */
/* Syne is served with the site. */
@font-face { font-family: 'Syne'; src: url('fonts/syne-800.woff2') format('woff2'); font-weight: 800; font-display: block; }
@font-face { font-family: 'Syne'; src: url('fonts/syne-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }

:root {
  /* hero (dark theme: night) */
  --void: #010607;
  --deep: #032125;
  --turquoise: #3fe0d0;
  --aqua: #a8fbf3;
  --text: #e6f4f2;
  --muted-night: #86a3a2;
  --rule-night: rgba(63, 224, 208, 0.18);
  --mark: var(--aqua);
  --statement: #f4fffd;
  --caption: #cfe6e3;
  --wordmark: #c8fff8;   /* the hero's LUMINOISE: bright, nearly white turquoise on the night hero */
  --splash-bg: #000;
  --nav-hero: rgba(1, 12, 13, 0.74);
  --vignette-top: rgba(1, 6, 7, 0.55);
  --vignette-bottom: rgba(1, 10, 11, 0.72);
  /* page (dark theme: day, after the dive) */
  --paper: #f2fcfb;      /* the brain's whitest light */
  --paper-mid: #eefaf8;
  --paper-2: #e4f5f3;
  --flood-core: #ffffff;
  --nav-page: rgba(242, 252, 251, 0.8);
  --ink-hover: #26323a;
  --ink: #141b1e;        /* slate black */
  --slate: #4b585e;      /* slate grey */
  --muted: #74838a;
  --rule: rgba(20, 27, 30, 0.12);
  --teal-deep: #0c6c66;  /* small accents only */

  --font-mark: 'Syne', 'Avenir Next', 'Futura', sans-serif;
  --font-display: 'Instrument Serif', 'Iowan Old Style', 'Palatino', Georgia, serif;
  --font-body: 'Hanken Grotesk', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --gutter: max(20px, env(safe-area-inset-left, 0px));
  --gutter-r: max(20px, env(safe-area-inset-right, 0px));
  color-scheme: light;
}
/* Light theme: white hero with slate type, then the page in deep turquoise with light type. */
:root[data-theme="light"] {
  --void: #f2fcfb;
  --text: #141b1e;
  --muted-night: #5d6f74;
  --rule-night: rgba(12, 108, 102, 0.24);
  --mark: #0c6c66;
  --statement: #141b1e;
  --caption: #4b585e;
  --wordmark: #08857e;   /* darker turquoise on the white hero */
  --splash-bg: #f2fcfb;
  --nav-hero: rgba(242, 252, 251, 0.8);
  --vignette-top: rgba(242, 252, 251, 0.5);
  --vignette-bottom: rgba(214, 242, 238, 0.6);
  --paper: #073133;
  --paper-mid: #052628;
  --paper-2: #031b1d;
  --flood-core: #0e6d68;
  --nav-page: rgba(4, 34, 36, 0.8);
  --ink: #eafcf9;
  --ink-hover: #ffffff;
  --slate: #a6c4c1;
  --muted: #7fa19e;
  --rule: rgba(168, 251, 243, 0.14);
  --teal-deep: #5fe3d6;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--paper); scroll-behavior: smooth; }
body {
  margin: 0;
  background: linear-gradient(180deg, var(--paper) 0%, var(--paper-mid) 55%, var(--paper-2) 100%);
  color: var(--ink);
  font: 400 17px/1.6 var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, p, dl, dd, ol, ul, figure { margin: 0; padding: 0; }
:focus-visible { outline: 2px solid var(--teal-deep); outline-offset: 3px; border-radius: 4px; }
.hero :focus-visible, .nav :focus-visible { outline-color: var(--turquoise); }
.day-nav .nav :focus-visible { outline-color: var(--teal-deep); }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--ink); color: var(--paper); padding: 8px 14px; border-radius: 999px; }
.skip:focus { left: 12px; }

.wrap { padding-left: var(--gutter); padding-right: var(--gutter-r); }

/* ── Type ── */
.wordmark { font: 800 15px/1 var(--font-mark); letter-spacing: 0.34em; text-decoration: none; color: var(--mark); transition: color .3s; }
.display {
  font: 400 clamp(38px, 5vw, 64px)/1.02 var(--font-display);
  letter-spacing: -0.012em;
  color: var(--ink);
  text-wrap: balance;
}
.statement {
  font: 400 clamp(32px, 4.6vw, 58px)/1.04 var(--font-display);
  letter-spacing: -0.01em;
  color: var(--statement);
  text-wrap: balance;
}

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 0 22px;
  border-radius: 999px;
  font: 600 15px/1 var(--font-body);
  text-decoration: none;
  background: none; border: 0; cursor: pointer; /* <button>s start from the same blank slate as links */
  transition: background-color .2s, color .2s, border-color .2s, box-shadow .2s;
}
.btn-glow {
  background: linear-gradient(180deg, var(--aqua), var(--turquoise) 45%, #17958f);
  color: #021614;
  box-shadow: 0 0 0 1px rgba(200, 255, 248, 0.4) inset, 0 8px 40px rgba(63, 224, 208, 0.3);
}
.btn-glow:hover { box-shadow: 0 0 0 1px rgba(220, 255, 250, 0.7) inset, 0 8px 60px rgba(63, 224, 208, 0.5); }
.btn-line { border: 1px solid var(--rule-night); color: var(--text); }
.btn-line:hover { border-color: var(--turquoise); }
/* On the white hero the outline button carries the same teal shadow as the primary one. */
[data-theme="light"] .btn-line { border-color: rgba(12, 138, 130, 0.42); box-shadow: 0 8px 36px rgba(18, 170, 158, 0.34); }
[data-theme="light"] .btn-line:hover { border-color: var(--turquoise); box-shadow: 0 8px 52px rgba(18, 170, 158, 0.5); }
.btn-ink { background: var(--ink); color: var(--paper); box-shadow: 0 10px 30px rgba(20, 27, 30, 0.18); }
.btn-ink:hover { background: var(--ink-hover); }
.btn-quiet { min-height: 38px; padding: 0 16px; font-size: 14px; border: 1px solid var(--rule-night); color: var(--mark); }
.btn-quiet:hover { border-color: var(--turquoise); }
.day-nav .btn-quiet { border-color: var(--rule); color: var(--ink); }
.day-nav .btn-quiet:hover { border-color: var(--ink); }
.nav-end { display: flex; align-items: center; gap: 10px; }
.theme-toggle { width: 38px; padding: 0; background: none; cursor: pointer; }
.theme-toggle svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
[data-theme="light"] .theme-toggle .sun, :root:not([data-theme="light"]) .theme-toggle .moon { display: none; }
.btn-lg { min-height: 54px; padding: 0 30px; font-size: 16px; }

/* ── Nav ── */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 20;
  display: flex; justify-content: space-between; align-items: center;
  padding: calc(14px + env(safe-area-inset-top, 0px)) var(--gutter-r) 14px var(--gutter);
  transition: background-color .3s, border-color .3s;
  border-bottom: 1px solid transparent;
}
.nav.solid { background: var(--nav-hero); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-color: var(--rule-night); }
.day-nav .nav .wordmark { color: var(--ink); }
.day-nav .nav.solid { background: var(--nav-page); border-color: var(--rule); }

/* ── 3D layers ── */
.scene { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; display: block; }
.scene { opacity: 0; transition: opacity 1.2s ease; }
.scene.ready { opacity: 1; }
/* No z-index: content paints above the canvas by DOM order. */
main, .footer { position: relative; }

/* ── Hero stage (night) ── */
.hero { position: relative; height: 100svh; color: var(--text); }
.js .hero { height: 520svh; }
.stage {
  position: sticky; top: 0;
  height: 100svh; overflow: hidden;
  background: var(--void) url('brain-light.webp') center / cover no-repeat;
}
.has-3d .stage { background: transparent; }
/* Until the dive the page behind the 3D canvas is the hero's own sky, so it fades in from that, not from paper. */
.has-3d:not(.page-mode), .has-3d:not(.page-mode) body { background: var(--void); }
.flood {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0;
  background: radial-gradient(70% 70% at 50% 45%, var(--flood-core) 0%, var(--paper) 55%, var(--paper-2) 100%);
}
.stage::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; transition: opacity .4s;
  background: linear-gradient(180deg, var(--vignette-top) 0%, transparent 18%, transparent 58%, var(--vignette-bottom) 100%);
}
.page-mode .stage::after { opacity: 0; }

.caption {
  position: absolute; z-index: 2;
  left: var(--gutter); right: var(--gutter-r);
  max-width: 560px;
}
.js .caption:not(.caption-intro) { opacity: 0; visibility: hidden; }
.caption p { color: var(--caption); max-width: 42ch; margin-top: 14px; }
.caption-intro { bottom: max(96px, calc(env(safe-area-inset-bottom, 0px) + 80px)); max-width: none; text-align: center; }
.caption-intro p { margin-left: auto; margin-right: auto; }
.caption-intro .actions { justify-content: center; }
.hero-mark {
  font: 800 clamp(40px, 8.4vw, 116px)/0.9 var(--font-mark);
  letter-spacing: 0.08em;
  padding-left: 0.08em; /* balances the trailing letter-space, so the glyphs centre on the box */
  white-space: nowrap;
  color: var(--wordmark); /* a plain typeface: no effect, no glow */
}
@media (max-width: 480px) { .hero-mark { font-size: 8.4vw; } } /* Syne 800 is ~10 em wide: keep it inside a phone */
.lede { font-size: clamp(18px, 1.6vw, 21px); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.caption-center { bottom: max(72px, calc(env(safe-area-inset-bottom, 0px) + 56px)); }
.scroll-hint {
  position: absolute; z-index: 2; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  font-size: 13px; letter-spacing: 0.08em; color: var(--muted-night);
}
.scroll-hint::after {
  content: ""; display: block; width: 1px; height: 26px; margin: 8px auto 0;
  background: linear-gradient(var(--turquoise), transparent);
  animation: drip 2.2s ease-in-out infinite;
}
@keyframes drip { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
.no-webgl .hero, html:not(.js) .hero { height: 100svh; }

@media (min-width: 900px) {
  .caption-intro { bottom: auto; top: 50%; transform: translateY(-40%); }
  .caption-center { left: auto; right: max(48px, env(safe-area-inset-right, 0px)); max-width: 420px; bottom: 16vh; }
  .caption-center .statement { font-size: clamp(34px, 3.4vw, 48px); }
}

/* ── After the dive (day): text column + the phone's rail ── */
.after > .flow > section { padding-block: clamp(88px, 12vw, 160px); }
.slot { display: none; }
@media (min-width: 900px) {
  .after { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); max-width: 1320px; margin: 0 auto; }
  .after .wrap { max-width: 700px; margin-left: auto; }
  .rail-slot { position: sticky; top: 12vh; height: 76vh; }
}
@media (max-width: 899px) {
  .rail { display: none; }
  .has-3d .slot { display: block; height: min(48vh, 420px); margin-block: clamp(24px, 6vw, 40px); }
  .has-3d .get .slot { margin-block: 0 12px; }
}

.intro { display: grid; gap: 20px; max-width: 640px; }
.intro p, .get-copy > p { color: var(--slate); max-width: 52ch; }

/* Moods: the app's own 2×2, drawn as a cross of fine rules. */
.quad {
  list-style: none;
  margin-top: clamp(48px, 7vw, 80px);
  display: grid; grid-template-columns: 1fr 1fr;
  position: relative;
}
.quad::before, .quad::after { content: ""; position: absolute; pointer-events: none; }
.quad::before { left: 50%; top: 0; bottom: 0; width: 1px; background: linear-gradient(transparent, var(--ink), transparent); opacity: .22; }
.quad::after { top: 50%; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--ink), transparent); opacity: .22; }
.quad li { padding: clamp(28px, 4vw, 52px) clamp(18px, 3.4vw, 44px); display: grid; gap: 12px; align-content: start; min-width: 0; }
.mood { font: 700 clamp(20px, 2.4vw, 28px)/1 var(--font-mark); letter-spacing: 0.22em; color: var(--ink); }
.quad li p { color: var(--slate); max-width: 34ch; }
.quad .track { color: var(--teal-deep); font-size: 14px; }
.quad .track a, .cite a, .refs a, .facts a { color: var(--teal-deep); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.quad .track a:hover, .cite a:hover, .refs a:hover, .facts a:hover { color: var(--ink); }
.ways .quad { margin-top: clamp(32px, 5vw, 56px); }
.ways .mood { font-size: clamp(17px, 1.9vw, 22px); }
.intro p + p { margin-top: -4px; }

/* Music sections: what a kind of music does, what the neurons beside it show, and the study behind it. */
.after > .flow > section.music { padding-block: clamp(72px, 10vw, 128px); }
.music .intro { gap: 16px; }
.music .see { color: var(--teal-deep); font-size: 15px; font-weight: 500; }
.music .cite, .intro .cite { font-size: 14px; color: var(--muted); }
.music .cite a { color: var(--teal-deep); text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* Evidence: three figures, each with what it measured and where it comes from. */
.stats { display: grid; gap: 0; margin-top: clamp(32px, 5vw, 56px); }
.stat { display: grid; gap: 8px; padding-block: 28px; border-top: 1px solid var(--rule); }
.stat:last-child { border-bottom: 1px solid var(--rule); }
.num {
  font: 400 clamp(56px, 8vw, 96px)/0.9 var(--font-display);
  letter-spacing: -0.02em; color: var(--ink);
  font-variant-numeric: lining-nums tabular-nums;
}
.stat h3 { font: 600 18px/1.35 var(--font-body); color: var(--ink); max-width: 40ch; }
.stat p:not(.num) { color: var(--slate); max-width: 56ch; }
.stat .cite { font-size: 14px; color: var(--muted); }
.note { margin-top: 22px; font-size: 15px; color: var(--muted); max-width: 56ch; }

/* Sources: named institutions, what they found, the link. Not endorsements. */
.lead { margin-top: 18px; color: var(--slate); max-width: 56ch; }
.refs { list-style: none; margin-top: clamp(28px, 4vw, 44px); display: grid; gap: 0; }
.refs li { display: grid; gap: 6px; padding-block: 22px; border-top: 1px solid var(--rule); }
.refs h3 { font: 600 17px/1.35 var(--font-body); color: var(--ink); }
.refs p { color: var(--slate); max-width: 58ch; }
.refs a { font-size: 14px; justify-self: start; }
.reading { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--rule); color: var(--muted); font-size: 15px; }
.claims .facts { margin-top: clamp(28px, 4vw, 44px); }
cite { font-style: italic; }

/* Lock In */
.lockin-grid, .quiet-grid, .get-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(36px, 5vw, 56px); }
.device {
  justify-self: center;
  width: min(330px, 78vw);
  padding: 9px;
  border-radius: 54px;
  background: linear-gradient(145deg, #9aa0a6, #4a4e54 26%, #24262a 55%, #55595f 84%, #a9afb5);
  box-shadow: 0 0 0 1px rgba(20, 27, 30, .2), 0 30px 80px rgba(20, 27, 30, .2);
}
.device img { border-radius: 46px; background: #000; width: 100%; }
.lockin-copy { display: grid; gap: clamp(28px, 4vw, 44px); }
.points { display: grid; gap: 26px; }
.points div { display: grid; gap: 4px; padding-left: 22px; position: relative; }
.points div::before {
  content: ""; position: absolute; left: 0; top: 0.62em; width: 7px; height: 7px; border-radius: 50%;
  background: var(--teal-deep);
}
.points dt { font-weight: 600; color: var(--ink); }
.points dd { color: var(--slate); max-width: 46ch; }

/* Steps: a real sequence. */
.sequence { list-style: none; margin-top: clamp(40px, 6vw, 64px); display: grid; gap: 28px; }
.sequence li { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 18px; row-gap: 4px; border-top: 1px solid var(--rule); padding-top: 22px; }
.sequence .n { grid-row: span 2; font: 400 56px/0.9 var(--font-display); color: var(--teal-deep); }
.sequence h3 { font: 600 20px/1.3 var(--font-body); color: var(--ink); }
.sequence p { color: var(--slate); }

/* Quiet facts */
.facts { display: grid; gap: 22px; }
.facts p { color: var(--slate); padding-bottom: 22px; border-bottom: 1px solid var(--rule); }
.facts p:last-child { border-bottom: 0; padding-bottom: 0; }
.facts strong { color: var(--ink); font-weight: 600; display: block; margin-bottom: 2px; }

/* Get the app */
.get-copy { display: grid; gap: 20px; justify-items: start; }
.get-copy .btn { margin-top: 8px; }
.fine { font-size: 14px; color: var(--muted); }
.soon {
  margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--rule);
  display: grid; gap: 6px; max-width: 46ch;
}
.soon h3 { font: 600 17px/1.3 var(--font-body); color: var(--teal-deep); }
.soon p { color: var(--slate); }
.get-art { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 20px; }
.has-3d .get-art { display: none; } /* the neurons take its place */

/* Footer */
.footer { border-top: 1px solid var(--rule); padding-block: 32px calc(32px + env(safe-area-inset-bottom, 0px)); }
.footer-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; max-width: 1320px; margin: 0 auto; }
.footer .wordmark { color: var(--ink); }
.footer p { color: var(--muted); font-size: 14px; }
.footer p a { color: var(--teal-deep); text-underline-offset: 3px; }

@media (max-width: 520px) {
  body { font-size: 16px; }
  .quad li { padding: 26px 14px; }
  .mood { letter-spacing: 0.16em; }
}

/* ── Intro (assets/theme.js decides; initIntro() in src/main.js plays it) ──
   Just the word on the backdrop, about two seconds. It is plain CSS, so it is on screen from the first paint, before
   any script runs; the script then glides it into the hero's <h1>. Layers: backdrop (60) → word (61). */
.splash { display: none; }
[data-splash="on"] .splash, [data-splash="leaving"] .splash { display: block; }
[data-splash="on"], [data-splash="on"] body { overflow: hidden; }
.splash-bg { position: fixed; inset: 0; z-index: 60; background: var(--splash-bg); transition: opacity .9s ease; }
.splash-word {
  position: fixed; z-index: 61; left: 50%; top: 50%; translate: -50% -50%;
  font: 800 min(8.4vw, 12vh)/1 var(--font-mark); letter-spacing: 0.08em; padding-left: 0.08em; white-space: nowrap;
  color: var(--wordmark); pointer-events: none;
}
[data-splash="leaving"] .splash-bg { opacity: 0; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}