/* ============================================================
   THE TURN — design system
   ============================================================ */

:root{
  --bg: #0b0a10;
  --bg-2: #100c14;
  --ink: #e9e4ef;
  --ink-dim: #a99fc0;
  --accent: #8f7bff;
  --accent-warm: #ff8a4c;
  --ember: #ff6a3d;
  --gold: #ffcf8a;

  --serif: "Fraunces", "Iowan Old Style", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --brand-serif: "Cinzel Decorative", "Fraunces", "Iowan Old Style", serif;

  --ease-out: cubic-bezier(.16,.84,.44,1);
  --ease-soft: cubic-bezier(.22,.61,.36,1);

  color-scheme: dark;
}

*, *::before, *::after{ box-sizing: border-box; }

[hidden]{ display: none !important; }

html{
  scroll-behavior: auto;
  background: var(--bg);
}

body{
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  overflow-x: hidden;
  cursor: none;
}

@media (max-width: 860px){
  body{ cursor: auto; }
}

@media (hover: none){
  body{ cursor: auto; }
  .cursor-light{
    opacity: 0;
    transition: opacity .25s ease, background .8s var(--ease-soft), width .6s ease, height .6s ease, margin .6s ease;
  }
  .cursor-light.is-touching{ opacity: 1; }
}

::selection{ background: var(--accent); color: #0b0a10; }

img, svg{ max-width: 100%; display: block; }

button{
  font-family: inherit;
  cursor: pointer;
  background: none;
  border: none;
  color: inherit;
}

input{ font-family: inherit; }

/* ---------- background canvas + atmosphere layers ---------- */

#scene-canvas{
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
  transition: opacity .6s var(--ease-soft);
}

.grain{
  position: fixed;
  inset: -2px;
  z-index: 1;
  pointer-events: none;
  opacity: .05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 180px 180px;
}

.vignette{
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 45%, transparent 40%, rgba(0,0,0,.55) 100%);
  mix-blend-mode: multiply;
  transition: opacity .8s var(--ease-soft);
}

body[data-theme="light"] .vignette{ opacity: .25; }

.cursor-light{
  position: fixed;
  top: 0; left: 0;
  width: 340px;
  height: 340px;
  margin: -170px 0 0 -170px;
  border-radius: 50%;
  z-index: 3;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255,180,120,.10) 0%, rgba(143,123,255,.06) 45%, transparent 72%);
  transition: background .8s var(--ease-soft), width .6s ease, height .6s ease, margin .6s ease;
  will-change: transform;
}

body[data-theme="light"] .cursor-light{
  background: radial-gradient(circle, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 100%);
}

/* ---------- per-scene cursor glow: shape and behavior shift with the story ---------- */

/* shadows (the wall) keeps the default glow above: an open, warm/violet light, apt for a scene about noticing what's projected on a surface in front of you */

body[data-cursor-mode="chains"] .cursor-light{
  width: 220px;
  height: 220px;
  margin: -110px 0 0 -110px;
  border: 1px solid rgba(170,175,195,.14);
  background: radial-gradient(circle, rgba(140,150,180,.09) 0%, rgba(90,90,115,.10) 55%, transparent 76%);
}

body[data-cursor-mode="turn"] .cursor-light{
  width: 380px;
  height: 380px;
  margin: -190px 0 0 -190px;
  background: radial-gradient(circle, rgba(255,225,160,.18) 0%, rgba(255,150,80,.10) 45%, transparent 72%);
  animation: cursorTurnPulse 1.6s ease-in-out infinite;
}
@keyframes cursorTurnPulse{
  0%, 100%{ opacity: .75; filter: brightness(1); }
  50%{ opacity: 1; filter: brightness(1.3); }
}

body[data-cursor-mode="fire"] .cursor-light{
  width: 360px;
  height: 360px;
  margin: -180px 0 0 -180px;
  background: radial-gradient(circle, rgba(255,140,60,.20) 0%, rgba(255,80,30,.11) 45%, transparent 70%);
  animation: cursorEmberFlicker 2.3s ease-in-out infinite;
}
@keyframes cursorEmberFlicker{
  0%, 100%{ opacity: .7; filter: brightness(.95); }
  35%{ opacity: 1; filter: brightness(1.15); }
  65%{ opacity: .82; filter: brightness(1); }
}

body[data-cursor-mode="ascent"] .cursor-light{
  width: 240px;
  height: 340px;
  margin: -170px 0 0 -120px;
  background: radial-gradient(circle, rgba(170,150,255,.15) 0%, rgba(120,100,220,.08) 50%, transparent 76%);
}

body[data-cursor-mode="return"] .cursor-light{
  width: 250px;
  height: 250px;
  margin: -125px 0 0 -125px;
  background: radial-gradient(circle, rgba(160,170,255,.09) 0%, rgba(110,110,160,.06) 50%, transparent 74%);
}

body[data-cursor-mode="integrate"] .cursor-light,
body[data-cursor-mode="close"] .cursor-light{
  width: 400px;
  height: 400px;
  margin: -200px 0 0 -200px;
  background: radial-gradient(circle, rgba(255,205,150,.11) 0%, rgba(150,140,255,.10) 45%, transparent 74%);
}

body[data-cursor-mode="sunburst"] .cursor-light{
  background: transparent;
}

/* ---------- progress + audio chrome ---------- */

.progress-rail{
  position: fixed;
  top: 0; right: 0;
  width: 3px;
  height: 100vh;
  z-index: 40;
  background: rgba(255,255,255,.06);
}
.progress-fill{
  width: 100%;
  height: 0%;
  background: linear-gradient(180deg, var(--accent), var(--accent-warm));
  transition: background .6s ease;
}

.audio-toggle{
  position: fixed;
  bottom: 22px;
  right: 22px;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px 9px 11px;
  border-radius: 999px;
  background: rgba(20,17,26,.55);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.12);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-dim);
  transition: color .3s, border-color .3s;
}
.audio-toggle:hover{ color: var(--ink); border-color: rgba(255,255,255,.28); }
.audio-toggle__dot{
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--ink-dim);
  transition: background .3s, box-shadow .3s;
}
.audio-toggle[aria-pressed="true"] .audio-toggle__dot{
  background: var(--accent-warm);
  box-shadow: 0 0 8px var(--accent-warm);
}

body[data-theme="light"] .audio-toggle{
  background: rgba(255,255,255,.55);
  border-color: rgba(20,15,10,.15);
  color: rgba(30,22,14,.7);
}

/* ---------- map toggle + overlay ---------- */

.map-toggle{
  position: fixed;
  bottom: 22px;
  left: 22px;
  z-index: 40;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(20,17,26,.55);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.14);
  color: var(--ink-dim);
  font-size: 16px;
  transition: color .3s, border-color .3s, transform .3s;
}
.map-toggle:hover{ color: var(--ink); border-color: rgba(255,255,255,.32); transform: scale(1.06); }
.map-toggle__ring{
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1px solid rgba(255,205,150,.5);
  opacity: 0;
}
.map-toggle.is-hinting .map-toggle__ring{
  animation: beacon-ring 2.6s ease-out infinite;
}
body[data-theme="light"] .map-toggle{
  background: rgba(255,255,255,.55);
  border-color: rgba(20,15,10,.15);
  color: rgba(30,22,14,.7);
}

.map-overlay{
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.map-overlay__backdrop{
  position: absolute;
  inset: 0;
  background: #0a0810;
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)){
  .map-overlay__backdrop{
    background: rgba(8,6,12,.9);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
}
.map-overlay__panel{
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 28px 24px 40px;
  max-width: 640px;
  width: min(92vw, 640px);
  margin: 0 auto;
}
.map-overlay__close{
  position: absolute;
  top: 0;
  right: 8px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: var(--ink-dim);
  font-size: 20px;
  transition: background .2s, color .2s;
}
.map-overlay__close:hover{ background: rgba(255,255,255,.08); color: var(--ink); }
.map-overlay__title{
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.5rem;
  color: var(--gold);
  margin: 0 0 6px;
}
.map-overlay__sub{
  font-family: var(--mono);
  font-size: .78rem;
  color: var(--ink-dim);
  margin: 0 0 20px;
}
.map-overlay__stat{
  margin-top: 22px;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .06em;
  color: var(--ink-dim);
  text-align: center;
}

.map-wheel{
  position: relative;
  width: min(68vw, 380px);
  height: min(68vw, 380px);
}
.map-wheel__ring{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: rgba(255,255,255,.14);
}
.map-wheel__ring circle{
  fill: none;
  stroke: currentColor;
  stroke-width: .4;
  stroke-dasharray: 1 2.4;
}

.map-node{
  position: absolute;
  top: var(--ny);
  left: var(--nx);
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 84px;
  color: var(--ink-dim);
}
.map-node__dot{
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.3);
  background: rgba(255,255,255,.04);
  transition: background .25s, border-color .25s, box-shadow .25s, transform .25s;
}
.map-node__label{
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .03em;
  text-align: center;
  line-height: 1.3;
  opacity: .75;
}
.map-node:hover .map-node__dot{
  border-color: var(--accent-warm);
  transform: scale(1.25);
}
.map-node:hover .map-node__label,
.map-node:focus-visible .map-node__label{ opacity: 1; color: var(--gold); }
.map-node.is-visited .map-node__dot{
  background: var(--accent-warm);
  border-color: var(--accent-warm);
}
.map-node.is-current .map-node__dot{
  background: var(--gold);
  border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(255,207,138,.18);
}
.map-node.is-found .map-node__label::after{
  content: " ✦";
  color: var(--accent-warm);
}

@media (max-width: 520px){
  .map-node{ width: 64px; }
  .map-node__label{ font-size: .58rem; }
}

/* ============================================================
   Scenes
   ============================================================ */

main{ position: relative; z-index: 5; transition: opacity 1.1s ease; }
body.intro-lock main{ opacity: 0; }

.scene{
  position: relative;
  min-height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  padding: 14vh 8vw;
}

.scene-inner{
  position: relative;
  z-index: 2;
  max-width: 640px;
  width: 100%;
  pointer-events: none;
}
.scene-inner > *{
  pointer-events: auto;
}

/* ---------- hidden layer: revealed only by the cursor spotlight ---------- */

.hidden-layer{
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.hidden-fragment{
  position: absolute;
  left: calc(var(--x, 50) * 1%);
  top: calc(var(--y, 50) * 1%);
  max-width: 30ch;
  font-family: var(--mono);
  font-size: .82rem;
  line-height: 1.5;
  letter-spacing: .01em;
  color: rgba(233,228,239,.85);
  background: none;
  border: none;
  padding: 0;
  text-align: left;
  opacity: 0;
  filter: blur(6px);
  transition: opacity .12s linear, filter .12s linear;
  pointer-events: none;
}

.hidden-fragment--portal{
  color: var(--accent-warm);
  text-decoration: underline dotted rgba(255,138,76,.6);
  text-underline-offset: 3px;
  pointer-events: auto;
  cursor: pointer;
}

.hidden-fragment--dark{ color: rgba(60,40,20,.85); }
.hidden-fragment--dark.hidden-fragment--portal{ color: #7a3f14; }

/* small ember that pulses at rest, fading as the fragment reveals,
   so idle darkness still has something worth chasing with the cursor */
.hidden-fragment::before{
  content: "";
  position: absolute;
  left: -16px;
  top: 0.55em;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffd9a0 0%, rgba(255,138,76,.55) 55%, transparent 100%);
  opacity: calc(var(--beacon, 1) * .5);
  animation: beacon-breathe 2.6s ease-in-out infinite;
}
.hidden-fragment--dark::before{
  background: radial-gradient(circle, #c98a3f 0%, rgba(120,60,20,.5) 55%, transparent 100%);
}
@keyframes beacon-breathe{
  0%, 100%{ transform: scale(1); }
  50%{ transform: scale(1.9); }
}

/* the first couple of scenes get a more obvious radar-ping,
   teaching the "shine your light on the dark" mechanic early */
.hidden-fragment--intro::after{
  content: "";
  position: absolute;
  left: -16px;
  top: 0.55em;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  border: 1px solid rgba(255,205,150,.55);
  opacity: calc(var(--beacon, 1) * 1);
  animation: beacon-ring 2.6s ease-out infinite;
}
@keyframes beacon-ring{
  0%{ transform: scale(1); opacity: .6; }
  100%{ transform: scale(5); opacity: 0; }
}

.is-touch-visible::before,
.is-touch-visible::after{ display: none; }

.hidden-fragment.is-touch-visible{
  opacity: .45;
  filter: blur(0);
}

.hidden-fragment:focus-visible{
  opacity: 1 !important;
  filter: blur(0) !important;
  outline: 1px dashed var(--accent-warm);
  outline-offset: 6px;
}

.scene-inner--center{
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.kicker{
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 22px;
  opacity: .8;
}
.kicker--dark{ color: #b5793a; }

.display{
  font-family: var(--serif);
  font-weight: 340;
  font-size: clamp(2.6rem, 7vw, 5.4rem);
  line-height: 1.04;
  letter-spacing: -.01em;
  margin: 0 0 30px;
}

.heading{
  font-family: var(--serif);
  font-weight: 380;
  font-size: clamp(2rem, 4.6vw, 3.4rem);
  line-height: 1.14;
  letter-spacing: -.005em;
  margin: 0 0 30px;
}
.heading--center{ margin-left: auto; margin-right: auto; }

.line{ display: block; }

.lede{
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  line-height: 1.6;
  color: var(--ink);
  max-width: 46ch;
  margin: 0 0 20px;
  font-weight: 300;
}
.lede--dim{ color: var(--ink-dim); }

.body-text{
  font-size: clamp(1rem, 1.35vw, 1.18rem);
  line-height: 1.75;
  color: var(--ink);
  max-width: 56ch;
  margin: 0 0 22px;
  font-weight: 300;
}
.body-text--center{ margin-left: auto; margin-right: auto; }
.body-text--emphasis{
  font-family: var(--serif);
  font-style: italic;
  font-weight: 420;
  font-size: clamp(1.15rem, 1.7vw, 1.4rem);
  color: var(--gold);
}
.body-text--dark{ color: rgba(30,22,12,.82); }
.body-text--emphasis-dark{
  font-family: var(--serif);
  font-style: italic;
  font-weight: 480;
  color: #7a3f14;
}

strong{ color: var(--gold); font-weight: 600; }
em{ font-style: italic; color: var(--ink); }

.body-text--small{
  font-size: .85rem;
  color: var(--ink-dim);
  font-style: italic;
}

.hint-line{
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .02em;
  color: var(--ink-dim);
  max-width: 46ch;
  line-height: 1.7;
  margin: 0 0 26px;
}
.hint-underline{
  text-decoration: underline dotted rgba(255,205,150,.6);
  text-underline-offset: 3px;
  color: var(--gold);
}

/* ---------- shared chip-grid + detail panel (OUTSIDE wings) ---------- */
/* each wing page sets --wing-accent / --wing-gold to its own palette;
   these fall back to sane defaults if a page doesn't. */

.astro-chip-grid{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 4px 0 0;
}
.astro-chip{
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 10px 18px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  color: var(--ink-dim);
  background: rgba(255,255,255,.02);
  transition: border-color .2s, color .2s, background .2s;
}
.astro-chip-grid--planets .astro-chip{
  font-size: .95rem;
  text-transform: none;
  letter-spacing: 0;
}
.astro-chip:hover, .astro-chip.is-active{
  border-color: var(--wing-accent, #8fa8ff);
  color: var(--ink);
  background: rgba(143,168,255,.1);
}
.astro-chip.is-active{
  border-color: var(--wing-gold, #ffe9a8);
  background: rgba(255,233,168,.08);
}

.astro-detail{
  margin-top: 18px;
  padding: 16px 20px;
  border-left: 2px solid var(--wing-gold, #ffe9a8);
  background: rgba(255,255,255,.03);
  border-radius: 4px;
  max-width: 60ch;
}
.astro-detail__label{
  margin: 0 0 6px;
  color: var(--wing-gold, #ffe9a8);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .72rem;
  font-family: var(--mono);
}
.astro-detail__body{
  margin: 0;
  font-family: var(--mono);
  font-size: .85rem;
  line-height: 1.75;
  color: var(--ink-dim);
}

/* ---------- interactive term / field-note system ---------- */

.term{
  display: inline;
  font: inherit;
  color: var(--gold);
  border-bottom: 1px dotted rgba(255,205,150,.65);
  padding: 0 1px;
  cursor: pointer;
  transition: color .2s ease, background .2s ease;
}
.term:hover, .term[aria-expanded="true"]{
  background: rgba(255,150,80,.12);
  color: #fff1d8;
}
.term--dark{
  color: #7a3f14;
  border-bottom-color: rgba(120,60,20,.5);
}
.term--dark:hover, .term--dark[aria-expanded="true"]{
  background: rgba(120,60,20,.1);
  color: #4a2408;
}

.term-card{
  position: relative;
  margin: 14px 0 22px;
  padding: 16px 40px 16px 18px;
  border-left: 2px solid var(--accent-warm);
  background: rgba(255,255,255,.035);
  border-radius: 4px;
  max-width: 56ch;
  font-family: var(--mono);
  font-size: .82rem;
  line-height: 1.7;
  color: var(--ink-dim);
}
.term-card__label{
  margin: 0 0 6px;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .72rem;
}
.term-card__body{ margin: 0; }
.term-card__close{
  position: absolute;
  top: 10px;
  right: 10px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: var(--ink-dim);
  font-size: 16px;
  line-height: 1;
  transition: background .2s, color .2s;
}
.term-card__close:hover{
  background: rgba(255,255,255,.1);
  color: var(--ink);
}

body[data-theme="light"] .term-card{
  background: rgba(60,30,10,.05);
  border-left-color: #b5793a;
  color: #4a3320;
}
body[data-theme="light"] .term-card__label{ color: #7a3f14; }

/* ---------- Asch conformity interactive demo ---------- */

.asch-demo{
  margin-top: 44px;
  padding: 28px 26px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  background: rgba(255,255,255,.025);
  max-width: 480px;
}
.asch-demo__prompt{
  font-family: var(--mono);
  font-size: .85rem;
  color: var(--ink-dim);
  margin: 0 0 20px;
  line-height: 1.6;
}
.asch-demo__reference{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
}
.asch-demo__ref-label{
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-dim);
  flex: 0 0 auto;
}
.asch-demo__ref-line{
  height: 3px;
  width: 64%;
  background: var(--accent-warm);
  border-radius: 2px;
}
.asch-demo__options{
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.asch-demo__option{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 8px;
  background: transparent;
  transition: border-color .25s, background .25s, opacity .3s;
}
.asch-demo__option:hover{ border-color: rgba(255,205,150,.55); background: rgba(255,150,80,.06); }
.asch-demo__option .asch-demo__bar{
  height: 3px;
  width: var(--w);
  background: var(--ink);
  border-radius: 2px;
  transition: background .25s;
}
.asch-demo__option .asch-demo__letter{
  font-family: var(--mono);
  font-size: .78rem;
  color: var(--ink-dim);
  margin-left: auto;
}
.asch-demo__option.is-chosen{ border-color: var(--accent-warm); background: rgba(255,150,80,.1); }
.asch-demo__option.is-chosen .asch-demo__bar{ background: var(--accent-warm); }
.asch-demo__option:disabled{ pointer-events: none; opacity: .55; }

.asch-demo__result{ margin-top: 22px; }
.asch-demo__group-text{
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.02rem;
  color: var(--gold);
  margin: 0 0 16px;
  line-height: 1.55;
}
.asch-demo__followup{ display: flex; gap: 10px; flex-wrap: wrap; }
.asch-demo__followup button{
  padding: 10px 18px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink);
  transition: border-color .25s, background .25s;
}
.asch-demo__followup button:hover{ border-color: rgba(255,205,150,.6); background: rgba(255,150,80,.08); }
.asch-demo__reveal{
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px dashed rgba(255,255,255,.14);
  font-size: .92rem;
  line-height: 1.7;
  color: var(--ink-dim);
}

/* ---------- shared choice-demo (fire / passage interactive moments) ---------- */

.choice-demo{
  margin-top: 40px;
  padding: 26px 26px 6px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  background: rgba(255,255,255,.02);
  max-width: 520px;
}
.choice-demo__prompt{
  font-family: var(--mono);
  font-size: .85rem;
  color: var(--ink-dim);
  margin: 0 0 18px;
  line-height: 1.6;
}
.choice-demo__options{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}
.choice-demo__options button{
  padding: 10px 16px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: .76rem;
  letter-spacing: .03em;
  color: var(--ink);
  background: transparent;
  transition: border-color .25s, background .25s, color .25s;
}
.choice-demo__options button:hover{
  border-color: rgba(255,205,150,.6);
  background: rgba(255,150,80,.08);
}
.choice-demo__options button.is-chosen{
  border-color: var(--accent-warm);
  background: rgba(255,150,80,.14);
  color: var(--gold);
}
.choice-demo__reveal{
  padding-top: 18px;
  margin: 0 0 22px;
  border-top: 1px dashed rgba(255,255,255,.14);
  font-family: var(--serif);
  font-style: italic;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--gold);
}

/* ---------- scintillating grid (real perceptual illusion, not decoration) ---------- */

.scintillating-grid{
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: .5;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 0 0, rgba(233,228,239,.6) 0 3px, transparent 4px),
    linear-gradient(rgba(160,150,190,.22) 2px, transparent 2px),
    linear-gradient(90deg, rgba(160,150,190,.22) 2px, transparent 2px);
  background-size: 46px 46px;
}
@media (max-width: 700px){
  .scintillating-grid{ background-size: 32px 32px; opacity: .35; }
}
@media (prefers-contrast: more){
  .scintillating-grid{ display: none; }
}

/* ---------- afterimage experiment (the light scene) ---------- */

.afterimage-demo{
  margin-top: 40px;
  padding: 30px 26px;
  border: 1px solid rgba(120,60,20,.18);
  border-radius: 14px;
  background: rgba(255,255,255,.35);
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.afterimage-demo__prompt{
  font-family: var(--mono);
  font-size: .82rem;
  color: #5a4530;
  line-height: 1.6;
  margin: 0 0 22px;
}
.afterimage-demo__stage{
  position: relative;
  width: 190px;
  height: 190px;
  margin: 0 auto 22px;
}
.afterimage-demo__art,
.afterimage-demo__blank{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  transition: opacity .5s ease;
}
.afterimage-demo__art.is-hidden{ opacity: 0; }
.afterimage-demo__blank{
  background: #eeeeec;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
}
.afterimage-demo__blank.is-visible{ opacity: 1; }
.afterimage-demo__dot{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #050505;
}
.afterimage-demo__start{
  padding: 12px 26px;
  border: 1px solid rgba(120,60,20,.35);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .04em;
  color: #4a2408;
  background: rgba(255,255,255,.5);
  transition: background .25s, opacity .25s;
}
.afterimage-demo__start:hover{ background: rgba(255,255,255,.8); }
.afterimage-demo__start:disabled{ opacity: .6; cursor: default; }
.afterimage-demo__note{
  margin: 18px 0 0;
  font-family: var(--serif);
  font-style: italic;
  color: #4a2408;
  font-size: .95rem;
  line-height: 1.6;
}

/* ---------- results card (the game's ending screen) ---------- */

.results-card{
  margin: 36px auto 0;
  padding: 30px 28px;
  max-width: 440px;
  border: 1px solid rgba(255,205,150,.25);
  border-radius: 16px;
  background: rgba(255,255,255,.03);
  text-align: center;
}
.results-card__eyebrow{
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin: 0 0 10px;
}
.results-card__title{
  font-family: var(--serif);
  font-size: 1.8rem;
  color: var(--gold);
  margin: 0 0 8px;
}
.results-card__note{
  font-size: .92rem;
  color: var(--ink-dim);
  line-height: 1.6;
  margin: 0 0 20px;
}
.results-card__score{
  font-family: var(--mono);
  font-size: 1rem;
  color: var(--ink);
  margin: 0 0 18px;
}
.results-card__score span{
  font-size: 1.6rem;
  color: var(--accent-warm);
  font-weight: 600;
}
.results-card__breakdown{
  list-style: none;
  margin: 0 0 18px;
  padding: 16px 0 0;
  border-top: 1px dashed rgba(255,255,255,.14);
  text-align: left;
  font-family: var(--mono);
  font-size: .8rem;
  color: var(--ink-dim);
}
.results-card__breakdown li{
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 0;
}
.results-card__breakdown li span:last-child{ color: var(--gold); }
.results-card__best{
  font-family: var(--mono);
  font-size: .74rem;
  color: var(--ink-dim);
  letter-spacing: .04em;
  margin: 0;
}

/* ---------- mandala decoration ---------- */

.mandala{
  position: absolute;
  top: 50%;
  right: 6%;
  width: min(46vw, 460px);
  height: min(46vw, 460px);
  transform: translateY(-50%);
  color: var(--accent-warm);
  opacity: .1;
  pointer-events: none;
  z-index: 0;
  animation: mandala-spin 90s linear infinite;
}
.mandala--slow{ animation-duration: 140s; color: var(--gold); opacity: .08; }
@keyframes mandala-spin{
  from{ transform: translateY(-50%) rotate(0deg); }
  to{ transform: translateY(-50%) rotate(360deg); }
}
@media (max-width: 900px){
  .mandala{ opacity: .06; width: 80vw; height: 80vw; right: -10%; }
}


.scroll-cue{
  margin-top: 48px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.scroll-cue__arrow{
  animation: bob 1.8s ease-in-out infinite;
  color: var(--accent);
}
@keyframes bob{
  0%,100%{ transform: translateY(0); opacity: .6; }
  50%{ transform: translateY(6px); opacity: 1; }
}

/* ---------- reveal primitives (driven by JS/GSAP) ---------- */

.reveal-line, .reveal-lines .word{
  opacity: 0;
  transform: translateY(18px);
}

/* ---------- scene 1: the wall / word cloud ---------- */

.word-cloud{
  position: relative;
  height: 34vh;
  min-height: 220px;
  margin: 10px 0 30px;
}
.word-cloud span{
  position: absolute;
  left: calc(var(--x, 0) * 1%);
  top: calc(var(--y, 0) * 1%);
  font-family: var(--serif);
  font-style: italic;
  font-weight: 320;
  font-size: clamp(.95rem, 1.9vw, 1.5rem);
  color: rgba(233,228,239,.5);
  white-space: nowrap;
  opacity: 0;
  filter: blur(6px);
  cursor: default;
  transition: color .3s, text-shadow .15s, transform .22s cubic-bezier(.2,.8,.3,1);
}
.word-cloud span.is-fleeing{
  color: rgba(255,235,215,.85);
  text-shadow: 0 0 12px rgba(255,138,76,.4);
}
.word-cloud span.is-questioned{
  transition: color .3s, text-shadow .15s;
}
.word-cloud span:hover{
  color: rgba(255,235,215,.9);
  text-shadow:
    -2px 0 rgba(255,60,60,.6),
    2px 0 rgba(60,220,255,.6);
  animation: word-glitch .32s steps(2, jump-none);
}
@keyframes word-glitch{
  0%{ transform: translate(0,0) skewX(0deg); }
  30%{ transform: translate(-2px,1px) skewX(-3deg); }
  60%{ transform: translate(2px,-1px) skewX(3deg); }
  100%{ transform: translate(0,0) skewX(0deg); }
}

/* ---------- scene 3: the turn ---------- */

.turn-button{
  margin-top: 20px;
  padding: 18px 40px;
  border: 1px solid rgba(255,205,150,.4);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
  background: rgba(255,150,80,.06);
  transition: background .35s ease, border-color .35s ease, transform .35s var(--ease-out), box-shadow .35s ease;
}
.turn-button:hover{
  background: rgba(255,150,80,.16);
  border-color: rgba(255,205,150,.8);
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(255,120,60,.18);
}
.turn-button:active{ transform: translateY(0); }
.turn-button.is-done{
  opacity: .45;
  pointer-events: none;
}
.turn-button--ghost{
  color: var(--ink);
  border-color: rgba(255,255,255,.25);
  background: transparent;
}

.turn-choices{
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 20px;
}
.turn-choices .turn-button{ margin-top: 0; }

.not-yet-response{
  margin: 20px auto 0;
  max-width: 44ch;
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink-dim);
  line-height: 1.65;
  min-height: 1.6em;
  opacity: 0;
}
.not-yet-response.is-visible{ opacity: 1; transition: opacity .6s ease; }

/* ---------- returning-visitor note ---------- */

.returning-note{
  font-family: var(--mono);
  font-size: .8rem;
  color: var(--gold);
  border-left: 2px solid var(--accent-warm);
  padding-left: 12px;
  max-width: 46ch;
  line-height: 1.6;
  margin: 0 0 24px;
}

/* ---------- wall / return echo ---------- */

.wall-echo{
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin: 28px 0 18px;
  max-width: 52ch;
}
.wall-echo span{
  font-family: var(--serif);
  font-style: italic;
  font-size: .92rem;
  color: rgba(233,228,239,.35);
  text-decoration: line-through;
  text-decoration-color: rgba(255,138,76,.35);
}

.flash-overlay{
  position: fixed;
  inset: 0;
  background: #fff;
  opacity: 0;
  pointer-events: none;
  z-index: 100;
}

/* ---------- maze splash: the very first thing, trace to enter ---------- */

.welcome-splash{
  position: fixed;
  inset: 0;
  z-index: 450;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8vh 6vw;
  overflow-y: auto;
  background: radial-gradient(circle at 50% 30%, #14101c 0%, #05040a 82%);
  transition: opacity .7s ease;
}
.welcome-splash.is-leaving{ opacity: 0; pointer-events: none; }

.welcome-splash__inner{
  max-width: 52ch;
  text-align: center;
  margin: auto;
}
.welcome-splash__logo{
  width: min(70vw, 320px);
  height: auto;
  margin: 0 auto 8px;
}
.welcome-splash__kicker{
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 14px;
}
.welcome-splash__title{
  font-family: var(--serif);
  font-weight: 340;
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  color: var(--ink);
  margin: 0 0 22px;
  line-height: 1.25;
}
.welcome-splash__body{
  font-size: 1rem;
  line-height: 1.75;
  color: var(--ink-dim);
  margin: 0 0 18px;
}
.welcome-splash__body--quiet{
  font-size: .92rem;
  opacity: .8;
}
.welcome-splash__begin{
  margin-top: 12px;
  padding: 15px 34px;
  border-radius: 999px;
  border: 1px solid rgba(255,205,150,.45);
  background: rgba(255,150,80,.1);
  color: var(--gold);
  font-family: var(--mono);
  font-size: .82rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: background .2s ease, transform .2s ease;
}
.welcome-splash__begin:hover{ background: rgba(255,150,80,.2); transform: translateY(-1px); }

@media (max-width: 520px){
  .welcome-splash{ padding: 6vh 6vw; }
  .welcome-splash__logo{ width: 78vw; }
}

.maze-splash{
  position: fixed;
  inset: 0;
  z-index: 400;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 6vh 6vw;
  background: radial-gradient(circle at 50% 40%, #14101c 0%, #05040a 80%);
  transition: opacity .7s ease;
}
.maze-splash.is-leaving{ opacity: 0; pointer-events: none; }

.maze-splash__intro{ text-align: center; max-width: 46ch; }
.maze-splash__kicker{
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 10px;
}
.maze-splash__prompt{
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--ink);
  margin: 0;
}

.maze-splash__svg{
  width: min(78vw, 320px);
  height: auto;
  aspect-ratio: 400 / 700;
  max-height: 56vh;
  touch-action: none;
  cursor: crosshair;
}
.maze-splash__path{
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.maze-splash__path--base{
  stroke: rgba(255,255,255,.14);
  stroke-width: 4;
}
.maze-splash__path--glow{
  stroke: var(--accent-warm);
  stroke-width: 5;
  filter: drop-shadow(0 0 6px rgba(255,138,76,.85));
}
.maze-splash__cursor-dot{
  fill: #fff3d0;
  filter: drop-shadow(0 0 8px rgba(255,243,208,.9));
}
.maze-splash__waypoint{
  fill: rgba(255,255,255,.18);
  stroke: rgba(255,255,255,.3);
  stroke-width: 1;
  transition: fill .3s, stroke .3s, r .3s;
}
.maze-splash__waypoint.is-lit{
  fill: var(--gold);
  stroke: var(--accent-warm);
  r: 9;
  filter: drop-shadow(0 0 10px rgba(255,205,150,.8));
}

.maze-splash__clue{
  min-height: 3em;
  max-width: 40ch;
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--gold);
  opacity: 0;
  margin: 0;
}
.maze-splash__clue.is-visible{
  opacity: 1;
  transition: opacity .8s ease;
}

.maze-splash__skip{
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .06em;
  color: var(--ink-dim);
  border-bottom: 1px dotted currentColor;
  padding: 6px 2px;
}
.maze-splash__skip:hover{ color: var(--ink); }

@media (prefers-reduced-motion: reduce){
  .maze-splash__waypoint.is-lit{ animation: none; }
}

/* ---------- clarity HUD (the game layer) ---------- */

.clarity-hud{
  position: fixed;
  top: 22px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(20,17,26,.55);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.14);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--ink-dim);
}
.clarity-hud__glow{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffe6c6 0%, var(--accent-warm) 70%, transparent 100%);
  box-shadow: 0 0 8px var(--accent-warm);
}
.clarity-hud__value{
  color: var(--gold);
  font-weight: 600;
  min-width: 2ch;
  text-align: right;
}
body[data-theme="light"] .clarity-hud{
  background: rgba(255,255,255,.55);
  border-color: rgba(20,15,10,.15);
  color: rgba(30,22,14,.7);
}
@media (max-width: 640px){
  .clarity-hud{ top: 12px; padding: 6px 12px; font-size: 11px; }
}

.clarity-toasts{
  position: fixed;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}
.clarity-toast{
  font-family: var(--serif);
  font-style: italic;
  font-size: .85rem;
  color: var(--gold);
  text-shadow: 0 2px 10px rgba(0,0,0,.6);
  opacity: 0;
  white-space: nowrap;
}

/* ---------- the tunnel: themed flythrough between scenes ---------- */

.tunnel{
  position: fixed;
  inset: 0;
  z-index: 300;
  overflow: hidden;
  perspective: 340px;
  background: radial-gradient(circle at 50% 50%, #140f1e 0%, #05040a 78%);
  opacity: 0;
  pointer-events: none;
}
.tunnel.is-active{ pointer-events: auto; cursor: pointer; }

.tunnel__rings{
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}
.tunnel__ring{
  --z: -6500;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 640px;
  height: 640px;
  border-radius: 50%;
  border-width: 4px;
  border-style: solid;
  opacity: 0;
  transform: translate(-50%, -50%) translateZ(calc(var(--z) * 1px)) rotateZ(calc(var(--z) * .01deg));
  will-change: transform, opacity;
}
.tunnel__lane{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 64px;
  height: 64px;
  --z: -6000;
  --lane: 0;
  transform: translate(-50%, -50%) translateX(calc(var(--lane) * 1px)) translateZ(calc(var(--z) * 1px));
  opacity: 0;
  will-change: transform, opacity;
}
.tunnel__obstacle{
  border: 3px solid #cf3f2e;
  border-radius: 6px;
  transform: translate(-50%, -50%) translateX(calc(var(--lane) * 1px)) translateZ(calc(var(--z) * 1px)) rotateZ(20deg);
  box-shadow: 0 0 26px rgba(207,63,46,.7);
}
.tunnel__collectible{
  border-radius: 50%;
  background: radial-gradient(circle, #fff3d0 0%, #ffb347 55%, transparent 80%);
  box-shadow: 0 0 30px rgba(255,179,71,.8);
  width: 34px;
  height: 34px;
}
.tunnel__reticle{
  position: absolute;
  bottom: 8%;
  left: 50%;
  width: 26px;
  height: 26px;
  margin-left: -13px;
  border-radius: 50%;
  border: 2px solid #fff3d0;
  box-shadow: 0 0 16px rgba(255,243,208,.7);
  transform: translateX(0);
  opacity: 0;
  transition: opacity .3s;
}
.tunnel.is-interactive .tunnel__reticle{ opacity: .9; }

.tunnel__score{
  position: absolute;
  top: 14%;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: .82rem;
  letter-spacing: .1em;
  color: #fff3e2;
  text-shadow: 0 2px 10px rgba(0,0,0,.7);
  opacity: 0;
  text-align: center;
}
.tunnel.is-interactive .tunnel__score{ opacity: .85; }

.tunnel__star{
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #fff8ec;
  opacity: 0;
  --z: -3000;
  transform: translateZ(calc(var(--z) * 1px));
  will-change: transform, opacity;
}

.tunnel__rays{
  position: absolute;
  inset: -60%;
  background: repeating-conic-gradient(from 0deg, rgba(255,255,255,.08) 0deg 2deg, transparent 2deg 11deg);
  mix-blend-mode: screen;
  opacity: 0;
  animation: tunnel-spin 4s linear infinite;
}
@keyframes tunnel-spin{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}
@media (max-width: 700px){
  .tunnel__ring{ width: 380px; height: 380px; }
}

.shockwave-ring{
  position: fixed;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border-radius: 50%;
  border: 2px solid var(--accent-warm);
  opacity: 0;
  pointer-events: none;
  z-index: 99;
}

/* ---------- chromatic-aberration pulse (the light scene) ---------- */

.chromatic-pulse{
  animation: chromatic 1.1s ease-out;
}
@keyframes chromatic{
  0%{
    text-shadow:
      -3px 0 rgba(255,60,60,.7),
      3px 0 rgba(60,220,255,.7);
  }
  100%{
    text-shadow: none;
  }
}

/* ---------- cursor sparkle trail ---------- */

.idle-whisper{
  position: fixed;
  bottom: 14%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 30;
  margin: 0;
  max-width: 34ch;
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1rem;
  color: var(--ink-dim);
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.4s ease;
}
.idle-whisper.is-visible{ opacity: .85; }

.sparkle{
  position: fixed;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 3;
  will-change: transform, opacity;
}

/* ---------- scene 6: the light (theme flip) ---------- */

.scene--light{
  background: transparent;
}

body[data-theme="light"] .heading,
body[data-theme="light"] .kicker:not(.kicker--dark){
  color: #241a10;
}

.heading--flash{
  color: #fff;
}

/* ---------- scene 8: release form ---------- */

.release-form{
  margin-top: 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.release-form__label{
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  color: var(--gold);
  max-width: 40ch;
}
.release-form__row{
  display: flex;
  gap: 10px;
  width: 100%;
  max-width: 460px;
  flex-wrap: wrap;
  justify-content: center;
}
.release-form__row input{
  flex: 1 1 240px;
  min-width: 0;
  padding: 14px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.04);
  color: var(--ink);
  font-size: .95rem;
}
.release-form__row input::placeholder{ color: var(--ink-dim); }
.release-form__row input:focus{
  outline: none;
  border-color: var(--accent-warm);
}
.release-form__row button{
  padding: 14px 26px;
  border-radius: 999px;
  border: 1px solid rgba(255,205,150,.5);
  color: var(--gold);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: rgba(255,150,80,.08);
  transition: background .3s, transform .2s;
}
.release-form__row button:hover{ background: rgba(255,150,80,.2); }
.release-form__row button:active{ transform: scale(.97); }

.release-note{
  margin-top: 16px;
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink-dim);
  min-height: 1.5em;
  opacity: 0;
}
.release-note.is-visible{ opacity: 1; transition: opacity .6s ease; }

.release-canvas{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

/* ---------- scene 9: close ---------- */

.close-mark{ margin-bottom: 20px; }

.cold-open-loader{
  position: fixed;
  inset: 0;
  z-index: 350;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}
.cold-open-loader.is-visible{ opacity: 1; }
.cold-open-loader span{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-warm, #e08a6a);
  animation: coldOpenPulse 1.1s ease-in-out infinite;
}
.cold-open-loader span:nth-child(2){ animation-delay: .15s; }
.cold-open-loader span:nth-child(3){ animation-delay: .3s; }
@keyframes coldOpenPulse{
  0%, 100%{ opacity: .25; transform: scale(.8); }
  50%{ opacity: 1; transform: scale(1.15); }
}
@media (prefers-reduced-motion: reduce){
  .cold-open-loader{ display: none; }
}

/* ---------- shared wing cursor (OUTSIDE pages) ---------- */
/* base glow always uses each page's own --wing-accent, so every
   wing gets a distinct color for free; per-wing bodies add their
   own shape/behavior tweak on top, see each wing's own CSS file. */

.wing-cursor{
  position: fixed;
  top: 0; left: 0;
  width: 220px;
  height: 220px;
  margin: -110px 0 0 -110px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 500;
  opacity: 0;
  transition: opacity .35s ease;
  will-change: transform;
  mix-blend-mode: screen;
}
.wing-cursor.is-active{ opacity: 1; }
.wing-cursor__inner{
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, var(--wing-accent, #fff) 0%, transparent 68%);
  opacity: .4;
}
@media (hover: none){ .wing-cursor{ display: none; } }
@media (prefers-reduced-motion: reduce){ .wing-cursor{ display: none; } }

.signoff{
  margin-top: 60px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .35em;
  color: var(--ink-dim);
}

/* ---------- field notes (closing sources / annotations) ---------- */

.field-notes{
  margin-top: 44px;
  text-align: left;
  max-width: 60ch;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  padding: 4px 22px;
  background: rgba(255,255,255,.02);
}
.field-notes summary{
  cursor: pointer;
  padding: 16px 0;
  font-family: var(--mono);
  font-size: .82rem;
  letter-spacing: .04em;
  color: var(--ink-dim);
  list-style: none;
}
.field-notes summary::-webkit-details-marker{ display: none; }
.field-notes summary::before{
  content: "+ ";
  color: var(--accent-warm);
}
.field-notes[open] summary::before{ content: "− "; }
.field-notes__body{
  padding: 4px 0 24px;
  font-size: .92rem;
  line-height: 1.75;
  color: var(--ink);
}
.field-notes__body p{ margin: 0 0 16px; }
.field-notes__body ul{
  margin: 0 0 16px;
  padding-left: 20px;
}
.field-notes__body li{
  margin-bottom: 10px;
  color: var(--ink-dim);
}
.field-notes__body li strong{ color: var(--gold); }

/* ---------- canvas hue-cycle (psychedelic drift for ascent/integrate) ---------- */

#scene-canvas.hue-cycle{
  animation: hue-drift 22s linear infinite;
}
@keyframes hue-drift{
  0%{ filter: hue-rotate(0deg); }
  50%{ filter: hue-rotate(24deg); }
  100%{ filter: hue-rotate(0deg); }
}

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 640px){
  .scene{ padding: 10vh 7vw; }
  .word-cloud{ height: 44vh; }
  .word-cloud span{ font-size: 1rem; }
  .turn-button{ padding: 16px 30px; }
}

/* ============================================================
   Reduced motion
   ============================================================ */

@media (prefers-reduced-motion: reduce){
  .scroll-cue__arrow{ animation: none; }
  html{ scroll-behavior: auto; }
  .hidden-fragment::before,
  .hidden-fragment--intro::after,
  .mandala{ animation: none; }
}