:root {
  --night-velvet: #100A1F;
  --oracle-violet: #5E3B8C;
  --moon-parchment: #F3E7C8;
  --foxfire-cyan: #70F2D4;
  --blood-persimmon: #E85D4A;
  --silver-leaf: #C9D3E6;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: var(--night-velvet);
}

body {
  margin: 0;
  overflow-x: hidden;
  color: var(--moon-parchment);
  font-family: "Alegreya Sans", sans-serif;
  background:
    radial-gradient(circle at 18% 12%, rgba(112, 242, 212, 0.12), transparent 22rem),
    radial-gradient(circle at 86% 34%, rgba(94, 59, 140, 0.45), transparent 28rem),
    linear-gradient(180deg, #100A1F 0%, #17102b 42%, #100A1F 100%);
}

.stage-fog {
  position: fixed;
  inset: -15%;
  pointer-events: none;
  z-index: 1;
  background:
    radial-gradient(ellipse at 70% 20%, rgba(201, 211, 230, 0.08), transparent 26%),
    radial-gradient(ellipse at 20% 75%, rgba(94, 59, 140, 0.18), transparent 32%),
    repeating-linear-gradient(117deg, transparent 0 48px, rgba(243, 231, 200, 0.025) 49px 50px);
  mix-blend-mode: screen;
  animation: fog-drift 18s ease-in-out infinite alternate;
}

.dream-maze { position: relative; z-index: 2; }

.dream-chamber {
  position: relative;
  min-height: 100vh;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(2rem, 5vw, 5rem);
  border-bottom: 1px solid rgba(201, 211, 230, 0.12);
}

.dream-chamber::before,
.dream-chamber::after {
  content: "";
  position: absolute;
  top: -20%;
  width: 36vw;
  height: 140%;
  background: linear-gradient(90deg, rgba(94, 59, 140, 0.34), rgba(16, 10, 31, 0));
  transform: skewX(-12deg);
  z-index: -1;
}

.dream-chamber::before { left: -18vw; }
.dream-chamber::after { right: -22vw; transform: skewX(14deg) rotate(180deg); }

.rune-nav {
  position: fixed;
  right: 1.25rem;
  top: 1.25rem;
  z-index: 10;
  display: grid;
  grid-template-columns: repeat(5, 2.1rem);
  gap: .45rem;
  padding: .55rem;
  background: rgba(16, 10, 31, 0.56);
  border: 1px solid rgba(201, 211, 230, 0.28);
  border-radius: 999px;
  box-shadow: 0 0 35px rgba(112, 242, 212, 0.08);
}

.rune-nav a {
  color: var(--silver-leaf);
  text-decoration: none;
  font: .68rem "Syne Mono", monospace;
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(94, 59, 140, .42), transparent 68%);
  transition: color .4s ease, background .4s ease, transform .4s ease;
}

.rune-nav a:hover,
.rune-nav a.active {
  color: var(--night-velvet);
  background: var(--foxfire-cyan);
  transform: translateY(-.15rem) rotate(-8deg);
}

.oracle-card,
.vellum-map {
  position: relative;
  max-width: 34rem;
  padding: clamp(1.6rem, 4vw, 3rem);
  color: var(--night-velvet);
  background:
    radial-gradient(circle at 18% 14%, rgba(232, 93, 74, .18), transparent 8rem),
    linear-gradient(135deg, rgba(243, 231, 200, .98), rgba(201, 211, 230, .84));
  clip-path: polygon(5% 0, 95% 3%, 100% 90%, 88% 100%, 7% 96%, 0 11%);
  box-shadow: 0 2rem 5rem rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(16, 10, 31, .16);
  transform-style: preserve-3d;
}

.vellum-map {
  clip-path: ellipse(49% 45% at 51% 49%);
  background:
    repeating-radial-gradient(circle at 50% 50%, rgba(94, 59, 140, .16) 0 1px, transparent 2px 26px),
    linear-gradient(150deg, rgba(243, 231, 200, .95), rgba(201, 211, 230, .72));
}

.oracle-card::before,
.vellum-map::before {
  content: "";
  position: absolute;
  inset: 1rem;
  border: 1px solid rgba(94, 59, 140, .32);
  clip-path: inherit;
  pointer-events: none;
}

h1, h2 {
  margin: .2rem 0 1rem;
  font-family: "Fraunces", serif;
  font-weight: 900;
  line-height: .88;
  letter-spacing: -.055em;
}

h1 { font-size: clamp(4.2rem, 12vw, 11rem); }
h2 { font-size: clamp(3.3rem, 8vw, 7.8rem); }

p {
  margin: 0 0 1rem;
  font-size: clamp(1.15rem, 1.9vw, 1.55rem);
  line-height: 1.35;
}

.rune-label,
.marginal-note,
.lantern-choice,
.silhouette,
.ghost-card {
  font-family: "Syne Mono", monospace;
  letter-spacing: .04em;
}

.rune-label {
  display: block;
  margin-bottom: 1rem;
  color: var(--oracle-violet);
  font-size: .8rem;
  text-transform: uppercase;
}

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

.silver-thread,
.path-shadow {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1450;
  stroke-dashoffset: 1450;
  animation: draw-thread 4.8s ease forwards;
}

.silver-thread {
  stroke: var(--silver-leaf);
  stroke-width: 3;
  filter: drop-shadow(0 0 10px rgba(112, 242, 212, .55));
}

.silver-thread.second { stroke: var(--foxfire-cyan); animation-delay: .7s; }

.path-shadow {
  stroke: var(--blood-persimmon);
  stroke-width: 7;
  opacity: .28;
  animation-delay: 1.1s;
  filter: blur(.6px);
}

.threshold {
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 38%, rgba(94, 59, 140, .28), transparent 28rem);
}

.hero-card {
  text-align: center;
  max-width: min(78rem, 86vw);
  padding: clamp(2rem, 5vw, 4.5rem);
}

.hero-card p { max-width: 42rem; margin-inline: auto; }

.lantern-choice {
  position: absolute;
  color: var(--foxfire-cyan);
  font-size: .88rem;
  padding: .75rem 1rem;
  border: 1px solid rgba(112, 242, 212, .45);
  border-radius: 999px;
  background: rgba(16, 10, 31, .7);
  box-shadow: 0 0 2rem rgba(112, 242, 212, .15);
  cursor: pointer;
  transition: transform .45s ease, color .45s ease, border-color .45s ease, box-shadow .45s ease;
}

.bright-choice { left: 9vw; bottom: 15vh; }
.quiet-choice { right: 8vw; top: 18vh; color: var(--silver-leaf); }

.lantern-choice:hover,
body.choice-bright .bright-choice,
body.choice-quiet .quiet-choice {
  transform: translateY(-.4rem) scale(1.06);
  color: var(--night-velvet);
  border-color: var(--foxfire-cyan);
  background: var(--foxfire-cyan);
  box-shadow: 0 0 4rem rgba(112, 242, 212, .42);
}

body.choice-bright .threshold-path .second,
body.choice-quiet .threshold-path .silver-thread:first-child { opacity: .25; }
body.choice-bright .threshold-path .path-shadow,
body.choice-quiet .threshold-path .path-shadow { opacity: .52; transform: translateX(20px); }

.split-moon {
  position: absolute;
  width: 12rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: linear-gradient(90deg, var(--moon-parchment) 0 48%, var(--blood-persimmon) 49% 52%, var(--silver-leaf) 53% 100%);
  opacity: .78;
  box-shadow: 0 0 5rem rgba(243, 231, 200, .24);
}

.moon-one { left: 7vw; top: 8vh; animation: moon-turn 16s linear infinite; }

.paper-raven {
  position: absolute;
  right: 19vw;
  bottom: 19vh;
  width: 4rem;
  height: 2rem;
  color: var(--night-velvet);
  display: grid;
  place-items: center;
  background: var(--silver-leaf);
  clip-path: polygon(0 50%, 36% 0, 62% 42%, 100% 24%, 74% 68%, 92% 100%, 46% 79%);
  animation: raven-bob 6s ease-in-out infinite;
}

.two-lamps .vellum-map { margin: 18vh 0 0 44vw; }
.forked-lantern { position: absolute; left: 14vw; top: 16vh; width: 17rem; height: 28rem; }
.forked-lantern i { position: absolute; left: 50%; top: 20%; width: 4px; height: 70%; background: var(--silver-leaf); transform: translateX(-50%); }
.forked-lantern span {
  position: absolute;
  top: 0;
  width: 5rem;
  height: 5rem;
  border-radius: 50% 50% 45% 45%;
  background: radial-gradient(circle, var(--foxfire-cyan), rgba(112,242,212,.18) 58%, transparent 70%);
  animation: lantern-flicker 2.4s infinite alternate;
}
.forked-lantern span:first-child { left: 0; }
.forked-lantern span:nth-child(2) { right: 0; background: radial-gradient(circle, var(--blood-persimmon), rgba(232,93,74,.16) 58%, transparent 70%); animation-delay: .7s; }

.silhouette {
  position: absolute;
  left: 8vw;
  bottom: 16vh;
  width: 13rem;
  padding: 7rem 1rem 1rem;
  text-align: center;
  color: rgba(243, 231, 200, .65);
  background: linear-gradient(180deg, rgba(232, 93, 74, .18), rgba(16, 10, 31, .82));
  clip-path: polygon(35% 0, 65% 0, 80% 25%, 70% 100%, 30% 100%, 20% 25%);
  animation: lag-shadow 8s ease-in-out infinite;
}

.mirror-fork .fork-card { margin: 14vh 0 0 8vw; }
.mask-door {
  position: absolute;
  right: 12vw;
  top: 13vh;
  width: min(34vw, 26rem);
  height: 68vh;
  border: 2px solid rgba(201, 211, 230, .55);
  border-radius: 50% 50% 5% 5% / 22% 22% 5% 5%;
  background: linear-gradient(110deg, rgba(94, 59, 140, .62), rgba(16, 10, 31, .9));
  box-shadow: inset 0 0 4rem rgba(16,10,31,.88), 0 0 5rem rgba(94,59,140,.35);
  animation: door-breathe 5s ease-in-out infinite;
}

.door-face {
  position: absolute;
  top: 24%;
  width: 42%;
  height: 40%;
  background: var(--moon-parchment);
  opacity: .82;
}
.door-face.good { left: 8%; clip-path: polygon(50% 0, 90% 30%, 78% 100%, 20% 84%, 8% 30%); }
.door-face.grief { right: 8%; clip-path: polygon(48% 0, 92% 30%, 78% 85%, 22% 100%, 8% 30%); background: var(--silver-leaf); }

.double-compass {
  position: absolute;
  left: 42vw;
  bottom: 14vh;
  width: 11rem;
  height: 11rem;
  border: 1px solid rgba(201, 211, 230, .4);
  border-radius: 50%;
}
.double-compass b {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 45%;
  height: 3px;
  transform-origin: left center;
  background: var(--foxfire-cyan);
  animation: needle-wander 7s ease-in-out infinite;
}
.double-compass b:nth-child(2) { background: var(--blood-persimmon); animation-delay: -2s; }
.double-compass em { position: absolute; font: .8rem "Syne Mono", monospace; color: var(--silver-leaf); }
.double-compass em:nth-of-type(1) { left: 48%; top: -.4rem; }
.double-compass em:nth-of-type(2) { right: -.2rem; top: 48%; }

.unchosen-room .room-map { margin: 11vh 0 0 7vw; }
.shadow-gallery {
  position: absolute;
  right: 4vw;
  top: 11vh;
  width: min(48rem, 54vw);
  height: 74vh;
}
.ghost-card {
  position: absolute;
  color: var(--moon-parchment);
  padding: 1.1rem;
  border: 1px solid rgba(232, 93, 74, .35);
  background: rgba(16, 10, 31, .68);
  box-shadow: 0 0 2.5rem rgba(232, 93, 74, .12);
  clip-path: polygon(8% 0, 100% 12%, 88% 100%, 0 90%);
  animation: ghost-rustle 5s ease-in-out infinite;
}
.ghost-card:nth-child(1) { left: 10%; top: 8%; }
.ghost-card:nth-child(2) { right: 4%; top: 26%; animation-delay: .8s; }
.ghost-card:nth-child(3) { left: 0; bottom: 23%; animation-delay: 1.6s; }
.ghost-card:nth-child(4) { right: 20%; bottom: 4%; animation-delay: 2.4s; }
.red-knot {
  position: absolute;
  left: 48vw;
  bottom: 16vh;
  width: 9rem;
  height: 9rem;
  border: 4px solid var(--blood-persimmon);
  border-radius: 42% 58% 48% 52%;
  box-shadow: 0 0 2rem rgba(232, 93, 74, .32);
  animation: knot-turn 9s linear infinite;
}

.return { display: grid; place-items: center; }
.return-card { margin-top: 16vh; max-width: 45rem; text-align: center; }
.moon-table {
  position: absolute;
  top: 7vh;
  left: 50%;
  width: 32rem;
  height: 18rem;
  transform: translateX(-50%);
}
.table-moon { position: absolute; left: 50%; top: 0; width: 9rem; transform: translateX(-50%); }
.table-line {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2rem;
  height: 6rem;
  border: 1px solid rgba(201, 211, 230, .32);
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(243,231,200,.13), transparent 68%);
}
.final-shadows span {
  position: absolute;
  bottom: 4vh;
  width: 24vw;
  height: 42vh;
  background: rgba(232, 93, 74, .16);
  filter: blur(2px);
  clip-path: polygon(44% 0, 58% 0, 82% 100%, 12% 100%);
}
.final-shadows span:first-child { left: 18vw; transform: skewX(-18deg); }
.final-shadows span:last-child { right: 18vw; transform: skewX(18deg); background: rgba(112, 242, 212, .11); }

.drift-panel { transition: transform .2s ease-out; will-change: transform; }
.dream-chamber.in-view .silver-thread,
.dream-chamber.in-view .path-shadow { animation-play-state: running; }

@keyframes draw-thread { to { stroke-dashoffset: 0; } }
@keyframes fog-drift { to { transform: translate3d(4%, -3%, 0) rotate(2deg); } }
@keyframes moon-turn { to { transform: rotate(360deg); } }
@keyframes raven-bob { 50% { transform: translateY(-1.2rem) rotate(9deg); } }
@keyframes lantern-flicker { 0% { opacity: .62; transform: scale(.96); } 100% { opacity: 1; transform: scale(1.08); } }
@keyframes lag-shadow { 50% { transform: translate(1.5rem, -.5rem) scaleX(.86); opacity: .62; } }
@keyframes door-breathe { 50% { transform: scaleX(1.03); box-shadow: inset 0 0 2rem rgba(112,242,212,.12), 0 0 6rem rgba(94,59,140,.55); } }
@keyframes needle-wander { 0%,100% { transform: rotate(-38deg); } 50% { transform: rotate(52deg); } }
@keyframes ghost-rustle { 50% { transform: translateY(-.8rem) rotate(2deg); border-color: rgba(112,242,212,.36); } }
@keyframes knot-turn { to { transform: rotate(360deg); } }

@media (max-width: 760px) {
  .dream-chamber { padding: 5.5rem 1.1rem 2rem; }
  .rune-nav { right: .6rem; left: .6rem; grid-template-columns: repeat(5, 1fr); }
  .bright-choice, .quiet-choice { position: relative; left: auto; right: auto; top: auto; bottom: auto; margin: 1rem; }
  .threshold { align-content: center; }
  .two-lamps .vellum-map, .mirror-fork .fork-card, .unchosen-room .room-map { margin: 18vh auto 0; }
  .mask-door, .shadow-gallery { opacity: .45; right: -16vw; width: 70vw; }
  .forked-lantern, .double-compass, .red-knot { opacity: .55; }
  h1 { font-size: 4.4rem; }
  h2 { font-size: 3.7rem; }
}