/* =========================================================
   The Forest — branching story
   Typography-first, dark, mood-tinted (forest / facility / warm)
   ========================================================= */

:root {
  --paper:  #eef2ea;
  --muted:  #8fa08d;
  --line:   rgba(238, 242, 234, 0.14);

  --maxw: 760px;
  --gut: clamp(1.25rem, 5vw, 3rem);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* mood palette — swapped per data-mood, transitions crossfade */
  --ink:    #070c09;
  --ink-2:  #0e1710;
  --accent: #4fae7c;
  --accent-soft: rgba(79, 174, 124, 0.16);
}

body[data-mood="facility"] {
  --ink:    #090d06;
  --ink-2:  #131a0d;
  --accent: #b7e13d;
  --accent-soft: rgba(183, 225, 61, 0.14);
}

body[data-mood="warm"] {
  --ink:    #0c0805;
  --ink-2:  #1a0f08;
  --accent: #f0a949;
  --accent-soft: rgba(240, 169, 73, 0.18);
}

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

html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--ink);
  color: var(--paper);
  font-family: "Inter", system-ui, sans-serif;
  line-height: 1.55;
  overflow-x: hidden;
  cursor: none;
  transition: background-color 0.8s var(--ease);
}

@media (hover: none) {
  body { cursor: auto; }
  .cursor { display: none; }
}

h1, h2 { font-family: "Fraunces", Georgia, serif; font-weight: 600; margin: 0; }
button { font-family: inherit; }

/* ---------- WebGL canvas ---------- */
#webgl {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  display: block;
}

/* ---------- Scene photo + scrim (behind the particles, per-node) ---------- */
.scene-image {
  position: fixed;
  inset: 0;
  z-index: -3;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.04);
  filter: brightness(0.5) saturate(0.85) contrast(1.05);
  transition: opacity 1.1s var(--ease);
  animation: kenBurns 26s ease-in-out infinite alternate;
}
.scene-image.is-visible { opacity: 1; }
@keyframes kenBurns {
  from { transform: scale(1.04); }
  to   { transform: scale(1.12); }
}
.scene-scrim {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(7,12,9,0.5) 0%, rgba(7,12,9,0.7) 45%, var(--ink) 100%);
  transition: background-color 0.8s var(--ease);
}

/* ---------- Static / glitch transition overlay ---------- */
.static-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  pointer-events: none;
  opacity: 0;
  --tx-img: none;
  background-image:
    var(--tx-img),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.05) 0px, rgba(255,255,255,0.05) 1px, transparent 1px, transparent 3px),
    radial-gradient(ellipse at center, rgba(255,255,255,0.12), transparent 70%);
  background-size: cover, auto, auto;
  background-position: center, center, center;
  background-repeat: no-repeat, repeat, no-repeat;
  mix-blend-mode: screen;
}
.static-overlay.is-active {
  animation: staticFlash 0.5s steps(2, end);
}
@keyframes staticFlash {
  0%   { opacity: 0; transform: translateX(0) scaleY(1); }
  15%  { opacity: 0.9; transform: translateX(-6px) scaleY(1.02); }
  35%  { opacity: 0.5; transform: translateX(4px) scaleY(0.99); }
  55%  { opacity: 0.8; transform: translateX(-2px) scaleY(1.01); }
  100% { opacity: 0; transform: translateX(0) scaleY(1); }
}

/* ---------- Custom cursor ---------- */
.cursor {
  position: fixed;
  top: 0; left: 0;
  z-index: 9999;
  pointer-events: none;
  transform: translate3d(-100px, -100px, 0);
}
.cursor__ring { stroke: var(--paper); opacity: 0.85; transition: stroke 0.6s var(--ease); }
.cursor__tick { stroke: var(--accent); transform-origin: 20px 20px; animation: dialSearch 5s linear infinite; transition: stroke 0.6s var(--ease); }
.cursor__dot { fill: var(--paper); }
@keyframes dialSearch { to { transform: rotate(360deg); } }
.cursor.is-active .cursor__ring { stroke: var(--accent); }
.cursor.is-active svg { transform: scale(1.5); transition: transform 0.35s var(--ease); }
.cursor svg { transition: transform 0.35s var(--ease); }

/* ---------- Loader ---------- */
.loader {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: var(--ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5rem;
}
.loader__count {
  font-family: "Fraunces", serif;
  font-size: clamp(4rem, 16vw, 9rem);
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1;
}
.loader__label {
  font-size: .75rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- Nav ---------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: clamp(1rem, 2.5vw, 1.5rem) var(--gut);
}
.nav__mark { font-family: "Fraunces", serif; font-weight: 600; font-size: 1.05rem; letter-spacing: 0.02em; }
.nav__meta { font-size: .68rem; letter-spacing: 0.25em; text-transform: uppercase; color: var(--muted); }
.nav__actions { display: flex; align-items: center; gap: .6rem; }
.nav__restart {
  background: transparent;
  color: var(--paper);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: .5rem 1.05rem;
  font-size: .78rem;
  letter-spacing: 0.04em;
  cursor: none;
  transition: border-color 0.5s var(--ease), color 0.5s var(--ease);
}
.nav__restart:hover { border-color: var(--accent); color: var(--accent); }

.nav__mute {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: transparent;
  color: var(--paper);
  border: 1px solid var(--line);
  border-radius: 100px;
  cursor: none;
  transition: border-color 0.4s var(--ease), color 0.4s var(--ease);
}
.nav__mute:hover { border-color: var(--accent); color: var(--accent); }
.nav__mute .mute-x { display: none; }
.nav__mute.is-muted .mute-wave { display: none; }
.nav__mute.is-muted .mute-x { display: block; }

/* ---------- Layout ---------- */
main#stage {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(6rem, 14vh, 9rem) var(--gut) clamp(4rem, 10vh, 6rem);
}
main#stage > [hidden] { display: none; }

/* ---------- INTRO ---------- */
.intro {
  max-width: var(--maxw);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}
.intro__eyebrow {
  font-size: .78rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;
}
.intro__title {
  font-size: clamp(3.2rem, 2rem + 8vw, 7rem);
  line-height: 0.92;
  letter-spacing: -0.03em;
}
.intro__title .line { display: block; overflow: hidden; }
.intro__title .line--amp { color: var(--accent); font-style: italic; font-weight: 500; }
.intro__lede {
  max-width: 46ch;
  color: var(--muted);
  font-size: clamp(1rem, 0.85rem + 0.4vw, 1.2rem);
  margin: 0.5rem 0 0.5rem;
}
.intro__note {
  font-size: .75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0.6;
  margin: 0.5rem 0 0;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  color: var(--paper);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: .95rem 2rem;
  font-size: .92rem;
  letter-spacing: 0.06em;
  cursor: none;
  transition: border-color 0.4s var(--ease), background-color 0.4s var(--ease), color 0.4s var(--ease), transform 0.3s var(--ease);
}
.btn:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); }
.btn--primary {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--paper);
  font-size: 1rem;
  padding: 1.05rem 2.6rem;
}
.btn--primary:hover { background: var(--accent); color: var(--ink); }

/* ---------- STORY STAGE ---------- */
.story {
  width: 100%;
  max-width: var(--maxw);
}
.story__frame {
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 5vw, 3rem);
}

.story__text {
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(1.15rem, 1rem + 0.5vw, 1.5rem);
  line-height: 1.75;
  font-weight: 350;
  color: var(--paper);
}
.story__text p {
  margin: 0 0 1.4em;
  opacity: 0;
  transform: translateY(18px);
}
.story__text p:last-child { margin-bottom: 0; }

/* ending title card, injected as first child of story__text when node.ending */
.story__endcard {
  margin-bottom: 2rem !important;
  text-align: center;
  opacity: 0;
  transform: scale(0.94);
}
.story__endcard .ending__kicker {
  display: block;
  font-family: "Inter", sans-serif;
  font-size: .75rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.6rem;
}
.story__endcard .ending__name {
  font-family: "Fraunces", serif;
  font-size: clamp(2.4rem, 1.5rem + 5vw, 4.5rem);
  color: var(--accent);
  letter-spacing: -0.02em;
  line-height: 1;
}

.story__choices {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.choice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  text-align: left;
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1.1rem 1.4rem;
  color: var(--paper);
  font-size: 1rem;
  letter-spacing: 0.01em;
  cursor: none;
  opacity: 0;
  transform: translateY(14px);
  transition: border-color 0.4s var(--ease), background-color 0.4s var(--ease), transform 0.25s var(--ease);
}
.choice:hover { border-color: var(--accent); transform: translateX(4px); }
.choice__arrow { color: var(--accent); flex-shrink: 0; transition: transform 0.3s var(--ease); }
.choice:hover .choice__arrow { transform: translateX(4px); }

.choice--restart {
  justify-content: center;
  border-color: var(--accent);
  background: var(--accent-soft);
}

/* ---------- Footer ---------- */
.foot {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 20;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem var(--gut);
  font-size: .72rem;
  letter-spacing: 0.05em;
  color: var(--muted);
  pointer-events: none;
}

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
  .nav__meta { display: none; }
  .story__text { font-size: 1.08rem; line-height: 1.7; }
  .choice { padding: 1rem 1.15rem; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  body { cursor: auto; }
  .cursor { display: none; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .story__text p, .choice, .story__endcard { opacity: 1; transform: none; }
  .loader { display: none; }
}