/* ============================================================================
   cognatum-demo.com — static bands + scroll-world theming
   Built on the vendored Cognatum design tokens (styles/sovrinty/*), running the
   design system's `moment` ground: deep-violet where brass glows. See
   ../../scroll_world_script.md §2.
   ========================================================================== */

/* The token files bind families to the CSS variables next/font emits in the app
   (--font-spectral / --font-plex-sans / --font-plex-mono). Those don't exist on a
   standalone page, and an undefined var() in a font-family stack invalidates the
   whole declaration — so bind them to the webfonts here. */
:root {
  --font-spectral: "Spectral";
  --font-plex-sans: "IBM Plex Sans";
  --font-plex-mono: "IBM Plex Mono";

  /* Measured off the rendered anchor still (#230e2d border average) rather than the
     nominal --violet-950, so the copy scrim and page edges blend into the scenes. */
  --scene-bg: #230e2d;

}

/* The engine injects its own `.sw-root { --sw-bg: … }` defaults onto the container,
   which out-specifies :root for everything INSIDE the world — theming from :root
   alone silently leaves the engine on its light-background defaults. Bind the hooks
   on #world too (id beats class) so they actually apply. */
:root,
#world.sw-root {
  --sw-bg: var(--scene-bg);
  --sw-ink: #ffffff;
  --sw-ink-soft: var(--violet-200);
  --sw-accent: var(--gold-300);
  --sw-font-display: var(--font-display);
  --sw-font-body: var(--font-sans);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--violet-950);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  /* clip, NOT hidden: overflow-x:hidden makes body a scroll container, which
     silently kills every position:sticky inside it (#answer-reveal's stage).
     clip gives the same horizontal cut without the scroll-container side-effect. */
  overflow-x: clip;
}

/* ------------------------------- top bar --------------------------------- */
.topbar {
  position: fixed; inset: 0 0 auto 0; z-index: 200;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 14px clamp(16px, 4vw, 40px);
  padding-top: calc(14px + env(safe-area-inset-top));
  background: linear-gradient(180deg, color-mix(in srgb, var(--violet-950) 92%, transparent) 0%, transparent 100%);
  backdrop-filter: blur(6px);
}
.topbar__brand { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; }
.topbar__brand img { display: block; height: 34px; width: auto; }
.topbar__nav {
  display: flex; align-items: center;
  gap: clamp(12px, 2.2vw, 30px);
  margin-inline: auto;
}
.topbar__link {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: var(--violet-200);
  transition: color .16s ease;
}
.topbar__link:hover { color: var(--gold-300); }
.topbar__link:focus-visible { outline: 3px solid var(--gold-300); outline-offset: 3px; border-radius: 3px; }
/* Anchored panels scroll their heading clear of the fixed bar. */
#premise, #health, #barrier, #world, #cognatum { scroll-margin-top: 76px; }
@media (max-width: 1180px) { .topbar__nav { display: none; } }

/* --------------------------------- bands --------------------------------- */
.band {
  position: relative; z-index: 10;
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(88px, 12vh, 140px) clamp(20px, 6vw, 72px);
  background: var(--violet-950);
}
.band__inner { width: 100%; max-width: 68ch; margin: 0 auto; }
.band--hero { min-height: 100vh; min-height: 100svh; }
.band--close { min-height: 92vh; min-height: 92svh; text-align: center; }
.band--close .band__inner { max-width: 60ch; }
/* Scaffold bands for the sections the new scroll world will replace. */
.band--stub { min-height: 70vh; min-height: 70svh; }
.band--stub .band__inner {
  padding: clamp(28px, 5vh, 56px);
  border: 1px dashed color-mix(in srgb, var(--violet-400) 45%, transparent);
  border-radius: 16px;
}

/* --------------------------------- type ---------------------------------- */
.eyebrow {
  margin: 0 0 22px;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--gold-300);
}
.display {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: #ffffff;
  margin: 0;
}
h1.display { font-size: clamp(2.1rem, 5.4vw, var(--text-4xl)); }
h2.display { font-size: clamp(1.7rem, 4vw, var(--text-3xl)); }

.hero__ask {
  margin: 18px 0 0;
  font-size: clamp(1.5rem, 3.4vw, var(--text-2xl));
  color: var(--gold-300);
  font-style: italic;
}
.rule {
  height: 2px; border: 0; margin: 34px 0 0;
  background: linear-gradient(90deg, var(--gold-500), color-mix(in srgb, var(--gold-500) 10%, transparent));
  transform-origin: left center;
}
.lede {
  margin: 26px 0 0;
  font-size: clamp(1rem, 1.5vw, var(--text-lg));
  line-height: var(--leading-relaxed);
  color: var(--violet-200);
  max-width: 56ch;
}
.band--close .lede { margin-inline: auto; }
.body {
  margin: 24px 0 0;
  font-size: clamp(1rem, 1.3vw, 1.0625rem);
  line-height: var(--leading-relaxed);
  color: var(--violet-200);
}
.pull {
  margin: 30px 0 0; padding: 18px 0 0;
  border-top: 1px solid color-mix(in srgb, var(--gold-400) 34%, transparent);
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.8vw, var(--text-lg));
  font-weight: var(--weight-semibold);
  color: var(--gold-300);
}

/* -------------------------------- thesis --------------------------------- */
/* Knowledge-health radar — five vital signs as five axes, rings every 20%.
   Single ungoverned series (violet-400, dashed) — the "you, today?" shape sits
   low, uneven, and unstable; the polygon is animated by world.config.js
   (step-and-hold morph, paused off-screen, disabled for prefers-reduced-motion). */
.health-radar { margin: 26px auto 0; width: 100%; max-width: 660px; }
.health-radar svg { display: block; width: 100%; height: auto; }
.hr-grid polygon, .hr-grid line {
  fill: none;
  stroke: color-mix(in srgb, var(--violet-400) 20%, transparent);
  stroke-width: 1;
}
.hr-ungov {
  fill: color-mix(in srgb, var(--violet-400) 12%, transparent);
  stroke: var(--violet-400);
  stroke-width: 2;
  stroke-dasharray: 5 4;
  stroke-linejoin: round;
}
.hr-dot { fill: var(--violet-400); stroke: var(--violet-950); stroke-width: 2; }
.health-radar { position: relative; }
.hr-labels text {
  font-family: var(--font-sans);
  font-size: 11.5px;   /* viewBox units — renders ~19px at the 660px figure width */
  font-weight: var(--weight-semibold);
  letter-spacing: 0.02em;
  fill: var(--violet-200);
}
.hr-hit { cursor: pointer; }
.hr-hit:focus { outline: none; }
.hr-hit:hover + text,
.hr-hit:focus-visible + text,
.hr-hit[aria-expanded="true"] + text { fill: var(--gold-300); }

.health-radar figcaption {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 24px;
  margin-top: 14px;
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--violet-200);
}
.health-radar figcaption span { display: inline-flex; align-items: center; gap: 8px; }
.hr-swatch {
  display: inline-block; width: 22px; height: 0;
  border-top: 3px dashed var(--violet-400); border-radius: 2px;
}
.band--thesis { padding: 0; display: block; }
.band--thesis .panel {
  min-height: 88vh; min-height: 88svh;
  display: flex; align-items: center;
  padding: clamp(72px, 10vh, 120px) clamp(20px, 6vw, 72px);
  border-top: 1px solid color-mix(in srgb, var(--violet-500) 22%, transparent);
}
.band--thesis .panel:first-child { border-top: 0; }
.handoff {
  margin: 0; padding: 0 20px clamp(72px, 12vh, 120px);
  text-align: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-lg);
  color: var(--violet-300);
}

/* -------------------------------- buttons -------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 14px 24px; border-radius: 999px;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  border: 1px solid transparent;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.btn--sm { padding: 9px 17px; font-size: var(--text-sm); }
.btn--lg { padding: 17px 32px; font-size: var(--text-md); }
/* On the moment ground the design system turns primary action brass. */
.btn--gold { background: var(--gold-500); color: var(--violet-950); }
.btn--gold:hover { background: var(--gold-400); }
.btn--gold:focus-visible { outline: 3px solid var(--gold-200); outline-offset: 3px; }
.btn--ghost { color: #fff; border-color: color-mix(in srgb, var(--violet-300) 40%, transparent); }
.btn--ghost:hover { border-color: var(--violet-300); background: color-mix(in srgb, var(--violet-300) 12%, transparent); }
.cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 38px; }
.band--close .cta-row { justify-content: center; }

/* ------------------------------- reveals --------------------------------- */
.reveal { opacity: 0; animation: sv-settle-up .62s cubic-bezier(.22,.68,.32,1) forwards; animation-play-state: paused; }
.reveal.is-in { animation-play-state: running; }
.reveal--1 { animation-delay: .07s; }
.reveal--2 { animation-delay: .14s; }
.reveal--3 { animation-delay: .21s; }
.reveal--4 { animation-delay: .28s; }
.reveal--5 { animation-delay: .35s; }
hr.reveal { animation-name: sv-rule-draw; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; animation: none; }
}

/* ==========================================================================
   scroll-world engine overrides for the dark ground.
   Upstream styles the copy chrome for a LIGHT scene background (tag pills mix
   the accent into #fff, route labels sit on white). On the moment ground those
   read as bright blocks fighting the scene, so re-tint them here.
   ========================================================================== */
#world { position: relative; z-index: 1; }

/* The page supplies its own fixed top bar; suppress the engine's. */
.sw-topbar { display: none !important; }

/* Upstream's atmosphere glow hard-codes `color-mix(#fff 45%, transparent)` for its
   centre bloom, which assumes a light scene background. On the moment ground that
   paints a large cream wash over the whole viewport. Re-tint to violet + brass. */
.sw-sky__glow {
  background:
    radial-gradient(60% 42% at 74% 16%, color-mix(in srgb, var(--gold-500) 18%, transparent), transparent 70%),
    radial-gradient(46% 34% at 50% 50%, color-mix(in srgb, var(--violet-700) 34%, transparent), transparent 72%) !important;
}

.sw-copy__eyebrow { letter-spacing: var(--tracking-caps); }
.sw-copy__title { color: #fff; }
.sw-copy__body { color: var(--violet-200) !important; }
.sw-copy__num { color: var(--violet-300); }

.sw-copy__tags li {
  color: var(--gold-300);
  background: color-mix(in srgb, var(--gold-300) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--gold-300) 32%, transparent);
}
.sw-route__label {
  color: #fff;
  background: color-mix(in srgb, var(--violet-950) 88%, transparent);
  border: 1px solid color-mix(in srgb, var(--gold-300) 26%, transparent);
}
.sw-nav__item.is-active { color: var(--violet-950); background: var(--gold-300); }
.sw-hint { color: var(--violet-300); }

/* Engine CTA buttons. Upstream styles the primary as `color:#fff; background:var(--sw-ink)`,
   which assumes --sw-ink is DARK. On the moment ground --sw-ink is #ffffff, so the button
   renders white-on-white and vanishes. Re-tint both variants to the page's brass treatment. */
.sw-copy__cta { pointer-events: auto; }
.sw-btn { font-family: var(--font-sans); }
.sw-btn--primary {
  color: var(--violet-950) !important;
  background: var(--gold-500) !important;
}
.sw-btn--primary:hover { background: var(--gold-400) !important; }
.sw-btn--ghost {
  color: #fff !important;
  border-color: color-mix(in srgb, var(--violet-300) 45%, transparent) !important;
}
.sw-btn:focus-visible { outline: 3px solid var(--gold-300); outline-offset: 3px; }

/* ---- click-to-reveal (fork) ------------------------------------------------
   Chips read as available actions, not as the tag pills above them: outlined,
   with a leading marker that flips when open. The rep clicks these to make the
   next point; the scene behind stays exactly where it is. */
.sw-reveals {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 22px 0 0;
  pointer-events: auto;
}
.sw-reveal__chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 15px; border-radius: 999px;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: #fff;
  background: color-mix(in srgb, var(--violet-950) 72%, transparent);
  border: 1px solid color-mix(in srgb, var(--gold-300) 38%, transparent);
  cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease;
}
.sw-reveal__chip::before {
  content: "+";
  font-family: var(--font-mono);
  color: var(--gold-300);
  line-height: 1;
}
.sw-reveal__chip:hover { background: color-mix(in srgb, var(--violet-700) 55%, transparent); border-color: var(--gold-300); }
.sw-reveal__chip:focus-visible { outline: 3px solid var(--gold-300); outline-offset: 3px; }
.sw-reveal__chip[aria-expanded="true"] {
  background: var(--gold-300); color: var(--violet-950); border-color: var(--gold-300);
}
.sw-reveal__chip[aria-expanded="true"]::before { content: "−"; color: var(--violet-950); }

.sw-reveal__panel {
  margin: 12px 0 0; padding: 15px 18px;
  max-width: 46ch;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--gold-300) 26%, transparent);
  background: color-mix(in srgb, var(--violet-950) 86%, transparent);
  backdrop-filter: blur(8px);
  animation: sv-lift-in .26s cubic-bezier(.22,.68,.32,1);
}
.sw-reveal__panel strong {
  display: block; margin-bottom: 6px;
  font-family: var(--font-display);
  font-size: var(--text-md);
  color: var(--gold-300);
}
.sw-reveal__panel p {
  margin: 0;
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--violet-200);
}
@media (prefers-reduced-motion: reduce) { .sw-reveal__panel { animation: none; } }
@media (max-width: 860px) {
  .sw-reveal__panel { max-width: none; }
  .sw-reveals { margin-top: 16px; }
}

/* ==================== screen play — the barrier band ======================
   Readable screens are never baked into a clip; the save-The-Answer play is a
   DOM overlay over the clip's blank monitor, driven by answer-transition.js
   (.is-on while the beat runs). */
.sv-play {
  position: absolute; z-index: 6;
  transform: translate(-50%, -50%);
  opacity: 0; transition: opacity .45s ease;
  pointer-events: none;
  font-family: var(--font-sans);
}
.sv-play.is-on { opacity: 1; }

.sv-play__card {
  background: color-mix(in srgb, var(--gold-50) 96%, transparent);
  color: var(--violet-950);
  border-radius: 8px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .5);
  padding: 10px 13px;
}

/* -- save The Answer, then the questions arrive anyway -- */
.sv-play__dialog { font-size: 12.5px; max-width: 100%; }
.sv-play__q { margin: 0 0 8px; font-weight: 600; }
.sv-play__btns { display: flex; gap: 8px; }
.sv-play__btn {
  padding: 3px 14px; border-radius: 5px;
  border: 1px solid color-mix(in srgb, var(--violet-950) 30%, transparent);
  font-size: 11.5px;
}
.sv-play__btn--yes { background: var(--violet-700); color: #fff; border-color: var(--violet-700); }
.sv-play__btn--yes.is-pressed { background: var(--violet-950); transform: translateY(1px); }
.sv-play__saved { margin: 0; font-weight: 600; color: #2c6e49; }
.sv-play__bubbles { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.sv-play__bubble {
  margin: 0; padding: 6px 11px;
  max-width: 92%;
  border-radius: 11px 11px 11px 3px;
  background: color-mix(in srgb, var(--violet-950) 88%, transparent);
  color: var(--violet-200);
  font-size: 11.5px; line-height: 1.35;
  opacity: 0; transform: translateY(6px);
  transition: opacity .3s ease, transform .3s ease;
}
.sv-play__bubble.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .sv-play__bubble { transition: none; }
}

/* --------------------- Your World: autoplay two-clip take -------------------
   rev 4 (2026-08-06): stairwell climb → cutaway floor as one continuous take.
   Controller in world.config.js (worldplay block). Copy blocks are placeholder
   pending the copy pass. */
.band--worldplay { padding: 0; min-height: 100vh; min-height: 100svh; overflow: clip; }
.wp-stage { position: relative; height: 100vh; height: 100svh; background: var(--scene-bg); }
.wp-poster, .wp-vid {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.wp-poster { z-index: 0; }
.wp-vid--1 { z-index: 1; opacity: 0; }
.wp-vid--2 { z-index: 2; opacity: 0; }
.wp-stage.has-clip .wp-vid--1 { opacity: 1; }
/* seam crossfade: the two boundary frames are near-identical, so a short
   dissolve reads as the camera passing through the opening wall */
.wp-stage.is-swapped .wp-vid--2 { opacity: 1; transition: opacity .28s linear; }
.wp-scrim {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(90deg,
    rgba(35, 14, 45, .72) 0%, rgba(35, 14, 45, .30) 34%, rgba(35, 14, 45, 0) 56%);
}
.wp-copy {
  position: absolute; z-index: 4; left: clamp(18px, 5vw, 64px); top: 50%;
  transform: translateY(-50%); width: min(42vw, 460px);
  opacity: 0; transition: opacity .45s ease; pointer-events: none;
}
.wp-stage.is-s1 .wp-copy--1,
.wp-stage.is-s2 .wp-copy--2,
.wp-stage.is-done .wp-copy--2 { opacity: 1; }
.wp-eyebrow {
  font: 600 .78rem/1 var(--font-sans); letter-spacing: .18em;
  text-transform: uppercase; color: var(--gold-300); margin: 0 0 14px;
}
.wp-title {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(2rem, 3.6vw, 3.1rem); line-height: 1.06;
  color: #fff; margin: 0 0 16px;
}
.wp-body { font: 400 1.02rem/1.6 var(--font-sans); color: var(--violet-200); margin: 0; }
@media (max-width: 860px) {
  .wp-copy { width: min(84vw, 460px); top: auto; bottom: 8vh; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .wp-vid { display: none; } }