/* ───────────────────────────────────────────────
   brainvi.ai — v2 brand-accent layer
   Loaded AFTER styles.css, only on v2.html.
   Monochrome canvas + one signal (orange) + depth (navy/teal).
   Everything here is scoped to v2 so production pages are untouched.
   ─────────────────────────────────────────────── */

:root {
  --orange:      #f77527;
  --orange-deep: #c55a18;
  --orange-soft: #fbe7d6;
  --navy:        #0b2f3e;
  --navy-deep:   #061a24;
  --teal:        #2b90a0;
  --teal-deep:   #1a6a78;
}

/* ── Readability: larger, higher-contrast body ──── */
body { font-size: 16px; line-height: 1.5; }
.lede {
  font-family: var(--sans);
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 60ch;
  font-weight: 400;
}
p { max-width: 68ch; }

/* ── Subheading system (the missing hierarchy) ──── */
/* mono kicker with a signal dot, sitting above a serif subhead */
.kicker {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mid);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 14px;
}
.kicker::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 3px rgba(247,117,39,0.16);
}
.subhead {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(15px, 1.1vw, 17px);
  letter-spacing: 0.02em;
  text-transform: none;
}

/* section number marker gets the signal color */
.section-no span:first-child { color: var(--orange); }
.invert .section-no span:first-child { color: var(--orange); }

/* ── Signal accents ─────────────────────────────── */
.liveDot { background: var(--orange) !important; }
.eyebrow .dot { background: var(--orange); }
.scroll-tape .track .sep { color: var(--orange); }
.serif-i { color: var(--orange); }                 /* italic key words = signal */
.invert .serif-i { color: var(--orange); }

/* inline links inside body copy pick up teal */
.page a.tlink { color: var(--teal); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.page a.tlink:hover { color: var(--teal-deep); }

/* key figures / data numerals in orange */
.signal-num { color: var(--orange); }

/* ── Inverse sections → navy, not pure black ────── */
.invert { background: var(--navy); color: #e8eff1; }
.invert .lede { color: #c4d4d9; }
.invert .section-no span { color: #6f97a3; }
.invert .section-no span:first-child { color: var(--orange); }

/* ── Decode tint: text glows orange while resolving ─ */
[data-decode].decoding { color: var(--orange); transition: color 0.25s ease; }
.invert [data-decode].decoding { color: var(--orange); }

/* ── 3D keyboard buttons (the brand signature) ──── */
.key-btn {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  border: none;
  border-radius: 11px;
  padding: 17px 30px;
  cursor: pointer;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: transform 0.08s ease, box-shadow 0.08s ease, filter 0.18s ease;
  outline: none;
  user-select: none;
  text-decoration: none;
  white-space: nowrap;
}
.key-btn .key-label { text-shadow: 0 1px 2px rgba(0,0,0,0.28); }
.key-btn svg { width: 14px; }

.key-btn--primary {
  background: linear-gradient(180deg, #f8852f 0%, var(--orange) 80%, var(--orange-deep) 100%);
  box-shadow: 0 4px 0 var(--orange-deep), 0 7px 16px rgba(197,90,24,0.30), inset 0 1px 0 rgba(255,255,255,0.22);
}
.key-btn--primary:hover { filter: brightness(1.04); }
.key-btn--primary:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--orange-deep), inset 0 1px 2px rgba(0,0,0,0.22);
}

.key-btn--navy {
  background: linear-gradient(180deg, #103a4b 0%, var(--navy) 80%, var(--navy-deep) 100%);
  box-shadow: 0 4px 0 var(--navy-deep), 0 7px 16px rgba(6,26,36,0.26), inset 0 1px 0 rgba(255,255,255,0.10);
}
.key-btn--navy:hover { filter: brightness(1.08); }
.key-btn--navy:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--navy-deep), inset 0 1px 2px rgba(0,0,0,0.28);
}

/* on light sections a navy-rimmed ghost key */
.key-btn--ghost {
  background: transparent;
  color: var(--navy);
  border: 1.5px solid var(--navy);
  border-radius: 11px;
  box-shadow: 0 3px 0 rgba(11,47,62,0.25);
}
.key-btn--ghost .key-label { text-shadow: none; }
.key-btn--ghost:active { transform: translateY(3px); box-shadow: 0 0 0 rgba(11,47,62,0.25); }
.invert .key-btn--ghost { color: #e8eff1; border-color: rgba(232,239,241,0.5); box-shadow: 0 3px 0 rgba(0,0,0,0.3); }

/* ── Topbar pill → small navy key ───────────────── */
.topbar .right .pill {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
  border-radius: 9px;
  box-shadow: 0 3px 0 var(--navy-deep);
  transition: transform 0.08s ease, box-shadow 0.08s ease, filter 0.18s ease;
  white-space: nowrap;   /* "Get API key ↗" always on one line, every screen */
}
.topbar .right .pill:hover { background: var(--navy); filter: brightness(1.12); }
.topbar .right .pill:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--navy-deep); }

/* brand glyph in the wordmark gets the signal color */
.brand .gl { background: var(--orange) !important; }

/* ── brainVI wordmark — orange particle ball + serif "brain" + orange "VI" ──── */
/* Built in HTML (not a flat image) so "brain" inherits ink on the cream navbar and
   light on the navy footer, while "VI" stays the signal orange everywhere. */
.topbar .brand { text-decoration: none; color: var(--ink); }
.topbar .brand .gl { display: none; }            /* replaced by the orange ball image */
.brand-ball { width: 26px; height: 26px; object-fit: contain; display: inline-block; flex: 0 0 auto; }
/* gap:0 so "brain" and "VI" are flush (brainVI) — the ball is spaced separately */
.wordmark { font-family: var(--serif); font-weight: 400; font-style: normal; letter-spacing: -0.01em; display: inline-flex; align-items: center; gap: 0; }
.topbar .wordmark { font-size: 23px; }
.wordmark .vi { color: var(--orange); }
/* footer logo: roman (not italic, overriding the italic colophon) + ball spaced from text */
footer.foot .colophon .wordmark { gap: 0; font-style: normal; }
footer.foot .colophon .brand-ball { width: 20px; height: 20px; margin-right: 8px; }

/* Logo image (the supplied brainVI lockup) replaces the HTML wordmark in navbar + footer */
.topbar .brand .brand-logo { height: 27px; width: auto; display: block; }
footer.foot .colophon .brand-logo-light { height: 22px; width: auto; vertical-align: -4px; margin-right: 4px; }

/* ── Capability cards: accent on hover ──────────── */
.cap-tag { color: var(--teal); }
.cap:hover .cap-name { color: var(--navy); }

/* ── Stat tape: a thin signal rule under it ─────── */
.scroll-tape { border-bottom-color: var(--orange); }
/* The marquee scrolls at a fixed px/s, so on a narrow screen items cross the
   viewport faster — slow the duration on mobile so it reads calm, not frantic. */
@media (max-width: 768px) {
  .scroll-tape .track { animation-duration: 95s; }
}
@media (max-width: 480px) {
  .scroll-tape .track { animation-duration: 115s; }
}

/* ── 3D-CTA row hover gets a signal edge ────────── */
.cta-row { transition: border-color 0.2s ease, background 0.2s ease; }
.cta-row:hover { box-shadow: inset 3px 0 0 var(--orange); }

/* ── Mobile hero & topbar cleanup ───────────────── */
@media (max-width: 880px) {
  /* free space in the cramped bar so the CTA never wraps */
  .topbar .brand .mono { display: none; }
}
@media (max-width: 768px) {
  /* On mobile the hero opens with just the orb + the omnimodal statement —
     the FILE/STATUS/PRIVATE-BETA/SCROLL/fsaverage5 meta cluster is hidden so
     it doesn't pull focus from the spinning orb. */
  .hero-top { display: none; }
  /* Shrink the orb caption so the statement wraps tidily instead of overflowing. */
  .orb-cap { font-size: 10px !important; letter-spacing: 0.14em !important; line-height: 1.5; }
}

@media (prefers-reduced-motion: reduce) {
  [data-decode].decoding { color: inherit; }
}

/* ── "Drag to rotate" affordance (retires after the first drag) ──────────────── */
.brain-hint {
  position: absolute; left: 50%; bottom: 11%; transform: translateX(-50%); z-index: 3;
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-2); pointer-events: none; white-space: nowrap;
  padding: 6px 12px; border-radius: 999px;
  background: rgba(239, 236, 228, 0.74); border: 1px solid var(--hair); backdrop-filter: blur(2px);
  animation: brainHintPulse 2.6s ease-in-out infinite;
}
.brain-hint svg { opacity: 0.9; }
/* persistent — the hint stays visible even after the user drags */
@keyframes brainHintPulse { 0%, 100% { opacity: 0.78; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .brain-hint { animation: none; opacity: 0.92; } }

/* ── Hero: full-screen opening — eyebrow / orb / eyebrow fill the first screen ──── */
.hero-stage {
  min-height: calc(100vh - 64px);
  min-height: calc(100svh - 64px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(20px, 4.5vh, 52px);
}
.hero-orb { position: relative; width: min(1080px, 92vw); height: min(72vh, 88vw); overflow: hidden; }
.hero-stage .orb-cap {
  position: static; transform: none;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase;
  text-align: center; color: var(--ink);
  /* desktop: the top eyebrow stays on ONE line */
  white-space: nowrap; max-width: none; margin-inline: auto;
}
/* mobile: let the long top eyebrow wrap to two lines. Placed AFTER the desktop rule so
   it wins at equal specificity inside the media query (and overrides styles.css nowrap). */
@media (max-width: 768px) {
  .hero-stage .orb-cap {
    white-space: normal; overflow-wrap: anywhere; word-break: normal;
    max-width: 92vw; padding-inline: 14px; box-sizing: border-box;
  }
}
/* Intro choreography: everything starts hidden under html.js; hero-intro.js types/fades it in.
   (Without JS, content stays visible — these rules only apply on html.js.) */
html.js .hero-stage .orb-cap { opacity: 0; }
html.js .hero-orb > #brain-stage { opacity: 0; transition: opacity 1.4s ease; }
html.js .hero-orb.lit > #brain-stage { opacity: 1; }
.orb-cap.typing::after { content: "\258D"; color: var(--orange); margin-left: 2px;
  animation: heroCaret 0.9s steps(1) infinite; }
@keyframes heroCaret { 50% { opacity: 0; } }
/* drag-pill (hero + §03): JS fades it in/out. Hidden by default under html.js;
   brain-place.js / hero-intro.js add `.show` after the intro and remove it during
   interaction (drag / scroll), re-adding it after a quiet TTL. The §03 pill's label
   also updates to the current stream as you scroll. */
html.js .hero-orb .brain-hint,
html.js .model-brain .brain-hint { opacity: 0; animation: none; transition: opacity 0.5s ease; }
/* `.show` must carry the same html.js prefix — otherwise the hide rule above (which
   includes the `html` type selector) outranks it and the pill never becomes visible. */
html.js .hero-orb .brain-hint.show,
html.js .model-brain .brain-hint.show { opacity: 1; }
/* navbar is the last thing to arrive (index only, via body.hero-anim) */
html.js body.hero-anim .topbar { opacity: 0; transform: translateY(-14px); transition: opacity 0.6s ease, transform 0.6s ease; }
html.js body.hero-anim.nav-shown .topbar { opacity: 1; transform: none; }
@media (max-width: 760px) {
  .hero-stage { min-height: calc(100svh - 56px); gap: clamp(16px, 3vh, 30px); }
  .hero-orb { height: min(56vh, 92vw); }
}

/* ── Brain "moment" slots — the shared #brain-stage canvas parks here per section ── */
.brain-slot { position: relative; }
.brain-slot > #brain-stage, .brain-slot > canvas { display: block; width: 100%; height: 100%; }
@media (max-width: 760px) {
  /* on mobile the §03 brain slot stacks above the copy at a calm height */
  section[data-brain-host] .brain-slot { grid-column: 1 / -1 !important; min-height: 44vh; }
}

/* (no dark void — the brain sits on the plain cream background) */
.brain-slot > #brain-stage, .brain-slot > canvas { position: relative; z-index: 1; }

/* ── §03 Model: scroll-zoom explore (sticky brain + stacked stops) ──────────── */
.model-explore { display: grid; grid-template-columns: 1.12fr 0.88fr; gap: clamp(28px,4vw,64px); align-items: start; }
/* Sticky brain panel — brain-place.js sets fit:true, so the camera auto-zooms the brain's
   bounding sphere into this panel with margin: it can never clip at any rotation/aspect. */
.model-brain { position: sticky; top: 9vh; height: 80vh; min-height: 460px; overflow: visible; }
.model-intro { min-height: 56vh; display: flex; flex-direction: column; justify-content: center; gap: 14px; }
/* Each stop is a tall scroll block (drives the brain's scroll-linked rotation); its
   text is pinned (sticky) and fades in near centre rather than scrolling past. */
.stream-stop { min-height: 94vh; position: relative; }
.stream-stop .stop-inner { position: sticky; top: 42vh; opacity: 0; will-change: opacity, transform; }
.stream-no { font-size: 12px; color: var(--orange); letter-spacing: .2em; text-transform: uppercase; }
.stream-region { font-size: 11px; color: var(--mid); letter-spacing: .14em; text-transform: uppercase; margin-top: 10px; }
.stream-desc { font-family: var(--serif); font-size: clamp(22px, 2.5vw, 31px); line-height: 1.1; letter-spacing: -.01em; margin-top: 14px; max-width: 22ch; }
.model-foot { min-height: 46vh; display: flex; flex-direction: column; justify-content: center; }
@media (max-width: 860px) {
  /* Mobile brain navigation: the brain pins in the TOP band just under the navbar.
     Each stream's copy is pinned in a fixed band BELOW the brain — it never scrolls
     over it — and slides horizontally (side-to-side parallax driven by brain-place.js,
     which sets translateX from scroll position) as you move between streams. */
  .model-explore { grid-template-columns: 1fr; gap: 0; }
  /* opaque cream background turns the brain band into a mask: the intro copy and any
     stream copy slide BEHIND it at the band edge instead of showing through the brain. */
  .model-brain {
    position: sticky; top: 56px; height: 42vh; min-height: 300px; z-index: 2; margin-left: 0;
    background: var(--bg);
  }
  .model-intro { min-height: auto; padding: 3vh 0 1vh; }
  /* tall scroll driver per stream (drives the brain rotation); copy is pinned, not flowed */
  .stream-stop { min-height: 92vh; padding: 0; display: block; position: relative; }
  .stream-stop .stop-inner {
    position: sticky;
    top: calc(56px + 42vh + 3vh);   /* the band directly beneath the pinned brain */
    opacity: 0; z-index: 1;
    will-change: opacity, transform;
    max-width: 88vw;
  }
  .stream-stop .stream-desc { max-width: 26ch; }
  /* The outro is the EXIT: it scrolls in front of the brain (its own opaque bg + higher
     z-index) so the whitepaper link is never clipped by the brain band, and it doesn't
     use the streams' proximity fade (set to full opacity in brain-place.js on mobile). */
  .model-foot {
    min-height: auto; padding: 8vh 0 6vh;
    position: relative; z-index: 3; background: var(--bg);
  }
}