:root {
  --void: #090A1A;
  --ink: #24143F;
  --milk: #F4EEDC;
  --blue: #6EE7F9;
  --orchid: #B98CFF;
  --peach: #FFB88A;
  --moss: #B7C86B;
  --display: 'Fraunces', Georgia, serif;
  --accent: 'Space Grotesk', Inter, system-ui, sans-serif;
  --body: 'Alegreya Sans', Inter, system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }
html { background: var(--void); scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100%;
  color: var(--milk);
  background: var(--void);
  font-family: var(--body);
  overflow-x: hidden;
}

.veil, .grain, .progress-orb { position: fixed; pointer-events: none; }
.veil { inset: -20vh -10vw; z-index: 1; opacity: .65; mix-blend-mode: screen; }
.veil-one { background: radial-gradient(circle at 14% 22%, rgba(110, 231, 249, .15), transparent 28%), radial-gradient(circle at 77% 78%, rgba(185, 140, 255, .16), transparent 30%); animation: breathe 16s ease-in-out infinite alternate; }
.veil-two { background: radial-gradient(circle at 50% 55%, rgba(255, 184, 138, .08), transparent 24%), radial-gradient(circle at 25% 84%, rgba(183, 200, 107, .08), transparent 21%); animation: breathe 22s ease-in-out infinite alternate-reverse; }
@keyframes breathe { to { transform: translate3d(3vw, -4vh, 0) scale(1.08); } }

.grain {
  inset: 0;
  z-index: 30;
  opacity: .15;
  background-image: radial-gradient(circle at 20% 30%, rgba(244, 238, 220, .9) 0 1px, transparent 1.2px), radial-gradient(circle at 70% 60%, rgba(110, 231, 249, .8) 0 1px, transparent 1.3px), linear-gradient(115deg, rgba(255,255,255,.04), transparent 35%, rgba(0,0,0,.11));
  background-size: 41px 53px, 67px 71px, 100% 100%;
  mix-blend-mode: screen;
}

.quest { position: relative; z-index: 2; }
.chamber {
  position: relative;
  min-height: 110vh;
  overflow: hidden;
  padding: clamp(28px, 5vw, 76px);
  isolation: isolate;
}
.chamber::before {
  content: attr(data-scene);
  position: absolute;
  right: clamp(28px, 5vw, 76px);
  top: clamp(28px, 5vw, 76px);
  font: 700 12px/1 var(--mono);
  letter-spacing: .34em;
  color: rgba(244, 238, 220, .38);
  z-index: 10;
}
.chamber::after {
  content: "";
  position: absolute;
  inset: auto -10% -1px;
  height: 26vh;
  background: linear-gradient(180deg, transparent, rgba(9,10,26,.7));
  z-index: 3;
}

.continuum-thread {
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 560vh;
  z-index: 7;
  pointer-events: none;
  overflow: visible;
}
.thread-path, .thread-shadow, .thread-echo { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.thread-shadow { stroke: rgba(36, 20, 63, .78); stroke-width: 28; opacity: .86; }
.thread-echo { stroke: rgba(244, 238, 220, .14); stroke-width: 13; stroke-dasharray: 2 30; filter: url(#blueGlow); }
.thread-path { stroke: url(#threadGradient); stroke-width: 6.5; filter: url(#blueGlow); stroke-dasharray: var(--dash, 8000); stroke-dashoffset: var(--offset, 8000); }

.progress-orb {
  left: 20px;
  top: 20px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--blue);
  z-index: 40;
  box-shadow: 0 0 22px var(--blue), 0 0 48px var(--orchid), 0 0 88px rgba(110,231,249,.35);
  transform: translate3d(0,0,0);
}

.horizon { background: radial-gradient(circle at 66% 34%, rgba(185, 140, 255, .26), transparent 28%), radial-gradient(circle at 42% 92%, rgba(255, 184, 138, .24), transparent 28%), linear-gradient(180deg, #090A1A 0%, #12102a 58%, #24143F 100%); }
.stars, .stars::before, .stars::after { position: absolute; inset: 0; content: ""; background-image: radial-gradient(circle, rgba(244, 238, 220, .72) 0 1px, transparent 1.4px); background-size: 130px 150px; animation: drift 18s linear infinite; }
.stars::before { background-size: 73px 91px; opacity: .4; animation-duration: 25s; }
.stars::after { background-size: 211px 193px; opacity: .55; animation-duration: 33s; }
@keyframes drift { to { transform: translate3d(-70px, 90px, 0); } }

.horizon-gate { position: absolute; left: 12%; bottom: 18%; width: 72%; height: 34%; border-radius: 50% 50% 0 0; background: radial-gradient(ellipse at center, rgba(110, 231, 249, .18), transparent 64%); border-top: 1px solid rgba(244,238,220,.2); transform: perspective(600px) rotateX(66deg); box-shadow: inset 0 32px 80px rgba(185,140,255,.1); }
.crescent { position: absolute; border-radius: 50%; border: 2px solid rgba(244,238,220,.12); box-shadow: inset 18px -4px 0 rgba(110,231,249,.15), 0 0 60px rgba(185,140,255,.18); }
.crescent-one { width: 16vw; height: 16vw; right: 13vw; top: 16vh; }
h1 { position: absolute; left: 6vw; top: 32vh; margin: 0; font-family: var(--display); font-size: clamp(58px, 14vw, 190px); font-weight: 900; line-height: .82; letter-spacing: -.08em; color: var(--milk); text-shadow: 0 0 50px rgba(185, 140, 255, .42); z-index: 6; font-variation-settings: "SOFT" 80, "opsz" 144; }
.coordinate, .instruction { position: absolute; z-index: 9; font-family: var(--accent); letter-spacing: .18em; text-transform: uppercase; }
.coordinate { left: 8vw; top: 15vh; color: var(--moss); font-size: 12px; }
.instruction { right: 10vw; top: 57vh; max-width: 260px; font-size: 13px; color: var(--blue); }
.traveler-glyph { position: absolute; left: 48%; bottom: 18%; color: var(--peach); font-size: 42px; z-index: 9; filter: drop-shadow(0 0 18px rgba(255,184,138,.65)); }
.map-note { position: absolute; z-index: 9; font: 500 11px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: rgba(244,238,220,.48); }
.note-a { left: 11vw; bottom: 11vh; }

.river { background: radial-gradient(circle at 22% 18%, rgba(110, 231, 249, .22), transparent 30%), radial-gradient(circle at 84% 70%, rgba(185, 140, 255, .24), transparent 28%), linear-gradient(145deg, #24143F 0%, #090A1A 58%, #102941 100%); }
.river-glass { position: absolute; left: -12%; top: 33%; width: 125%; height: 34%; border-radius: 50%; background: linear-gradient(100deg, transparent, rgba(110,231,249,.18), rgba(244,238,220,.08), transparent); filter: blur(1px); transform: rotate(-14deg); box-shadow: inset 0 0 80px rgba(110,231,249,.11); }
.lens { position: absolute; right: 12vw; top: 14vh; width: 250px; height: 250px; border-radius: 50%; border: 1px solid rgba(110, 231, 249, .36); background: radial-gradient(circle, rgba(244,238,220,.12), rgba(185,140,255,.08) 48%, transparent 70%); box-shadow: inset 0 0 55px rgba(110,231,249,.14), 0 0 80px rgba(185,140,255,.2); z-index: 4; }
.lens span { position: absolute; inset: 45% auto auto 33%; font-family: var(--accent); color: var(--peach); letter-spacing: .28em; text-transform: uppercase; }
.stone { position: absolute; z-index: 6; padding: 22px 28px; border-radius: 50%; background: rgba(244,238,220,.12); color: rgba(244,238,220,.64); font-family: var(--mono); box-shadow: inset 0 0 28px rgba(110,231,249,.15); transition: transform .6s ease, box-shadow .6s ease; }
.stone.is-lit { transform: translateY(-10px) scale(1.06); box-shadow: inset 0 0 28px rgba(110,231,249,.25), 0 0 30px rgba(110,231,249,.28); }
.stone-one { left: 55%; top: 51%; } .stone-two { left: 27%; top: 72%; } .stone-three { right: 12%; top: 66%; }
.river-glyph { left: 72%; bottom: 22%; font-size: 32px; }

.waypoint { position: absolute; z-index: 10; width: min(500px, 82vw); padding: 28px 30px; border: 1px solid rgba(244, 238, 220, .14); border-radius: 34px; background: rgba(9, 10, 26, .38); box-shadow: 0 28px 80px rgba(0,0,0,.25), inset 0 0 55px rgba(110, 231, 249, .05); backdrop-filter: blur(14px); transform: translateY(28px) scale(.98); opacity: .28; transition: opacity .9s ease, transform .9s ease, border-color .9s ease; }
.waypoint.is-visible { opacity: 1; transform: translateY(0) scale(1); border-color: rgba(110,231,249,.3); }
.waypoint span { display: block; margin-bottom: 12px; font: 700 11px/1 var(--mono); letter-spacing: .24em; color: var(--blue); text-transform: uppercase; }
.waypoint h2 { margin: 0 0 14px; font-family: var(--display); font-weight: 850; font-size: clamp(36px, 6vw, 76px); line-height: .86; letter-spacing: -.04em; font-variation-settings: "SOFT" 80; }
.waypoint p { margin: 0; font-size: clamp(18px, 2vw, 23px); line-height: 1.35; color: rgba(244, 238, 220, .82); }
.river-card { left: 10vw; top: 30vh; }
.stair-card { right: 8vw; top: 22vh; }
.orchard-card { left: 8vw; top: 16vh; }
.gate-card { right: 8vw; top: 24vh; }

.stair { background: radial-gradient(circle at 80% 20%, rgba(255,184,138,.18), transparent 28%), radial-gradient(circle at 20% 75%, rgba(110,231,249,.14), transparent 32%), linear-gradient(30deg, #090A1A, #24143F 48%, #100d22); }
.stair-rig { position: absolute; left: -4vw; bottom: 10vh; width: 82vw; height: 74vh; transform: rotate(-23deg); z-index: 4; }
.stair-rig span { position: absolute; width: 35%; height: 56px; border: 1px solid rgba(244,238,220,.16); background: linear-gradient(90deg, rgba(185,140,255,.2), rgba(110,231,249,.09)); box-shadow: 0 18px 40px rgba(0,0,0,.24); transition: transform .8s ease, background .8s ease; }
.stair-rig span.is-awake { transform: translateX(18px); background: linear-gradient(90deg, rgba(255,184,138,.22), rgba(110,231,249,.14)); }
.stair-rig span:nth-child(1){left:4%;bottom:6%}.stair-rig span:nth-child(2){left:16%;bottom:17%}.stair-rig span:nth-child(3){left:28%;bottom:28%}.stair-rig span:nth-child(4){left:40%;bottom:39%}.stair-rig span:nth-child(5){left:52%;bottom:50%}.stair-rig span:nth-child(6){left:64%;bottom:61%}.stair-rig span:nth-child(7){left:76%;bottom:72%}.stair-rig span:nth-child(8){left:88%;bottom:83%}
.broken-compass { position: absolute; left: 14vw; top: 18vh; width: 150px; height: 150px; border: 1px dashed rgba(183,200,107,.55); border-radius: 50%; z-index: 5; }
.broken-compass i { position: absolute; width: 80px; height: 3px; background: var(--peach); left: 35px; top: 74px; transform: rotate(-26deg); box-shadow: 0 0 24px var(--peach); transform-origin: center; }
.door-no-wall { position: absolute; right: 16vw; bottom: 16vh; width: 130px; height: 210px; border: 2px solid rgba(185,140,255,.38); border-bottom: 0; border-radius: 70px 70px 0 0; box-shadow: 0 0 65px rgba(185,140,255,.24), inset 0 0 45px rgba(110,231,249,.08); }

.orchard { background: radial-gradient(circle at 58% 42%, rgba(183,200,107,.18), transparent 30%), radial-gradient(circle at 25% 82%, rgba(185,140,255,.25), transparent 36%), linear-gradient(155deg, #10122d, #090A1A 55%, #24143F); }
.constellation { position: absolute; inset: 12vh 8vw 12vh 34vw; border-radius: 42%; background: radial-gradient(circle at center, rgba(110,231,249,.08), transparent 64%); z-index: 4; }
.constellation::before { content: ""; position: absolute; inset: 8% 6%; border: 1px solid rgba(110,231,249,.13); border-radius: 50%; transform: rotate(-12deg); }
.constellation::after { content: ""; position: absolute; left: 12%; top: 24%; width: 74%; height: 48%; border-top: 1px solid rgba(110,231,249,.28); border-right: 1px solid rgba(110,231,249,.18); transform: rotate(12deg); border-radius: 50%; }
.constellation b { position: absolute; left: var(--x); top: var(--y); width: 23px; height: 23px; border-radius: 50% 50% 50% 4px; background: var(--moss); box-shadow: 0 0 24px var(--moss), 0 0 60px rgba(183,200,107,.35); transform: rotate(-45deg); animation: pulse 3.5s ease-in-out infinite; }
.constellation b.is-picked { background: var(--peach); box-shadow: 0 0 28px var(--peach), 0 0 80px rgba(255,184,138,.45); }
@keyframes pulse { 50% { transform: rotate(-45deg) scale(1.35); filter: hue-rotate(40deg); } }
.sundial { position: absolute; right: 13vw; bottom: 16vh; width: 170px; height: 170px; border-radius: 50%; border: 1px solid rgba(255,184,138,.32); background: conic-gradient(from 20deg, rgba(255,184,138,.14), transparent, rgba(110,231,249,.12), transparent); z-index: 4; }
.sundial::after { content: ""; position: absolute; left: 82px; top: 24px; width: 2px; height: 120px; background: var(--peach); transform: rotate(34deg); transform-origin: bottom; box-shadow: 0 0 18px var(--peach); }
.note-b { right: 20vw; bottom: 12vh; }

.gate { min-height: 118vh; background: radial-gradient(circle at 50% 52%, rgba(110,231,249,.22), transparent 23%), radial-gradient(circle at 50% 52%, rgba(185,140,255,.32), transparent 38%), radial-gradient(circle at 30% 20%, rgba(255,184,138,.14), transparent 22%), linear-gradient(180deg, #24143F, #090A1A 62%); }
.memory-rings { position: absolute; left: 8vw; top: 10vh; width: min(64vw, 760px); aspect-ratio: 1; border-radius: 50%; background: repeating-radial-gradient(circle, rgba(244,238,220,.08) 0 1px, transparent 1px 34px); opacity: .62; z-index: 3; }
.mobius { position: absolute; left: 12vw; top: 18vh; width: min(56vw, 680px); aspect-ratio: 1.45; border-radius: 50%; transform: rotate(-15deg); filter: drop-shadow(0 0 55px rgba(185,140,255,.36)); z-index: 6; }
.mobius::before, .mobius::after, .mobius span { content: ""; position: absolute; inset: 12%; border-radius: 50%; border: 28px solid transparent; }
.mobius::before { border-top-color: var(--blue); border-bottom-color: var(--orchid); transform: rotate(20deg); }
.mobius::after { border-left-color: var(--peach); border-right-color: var(--moss); transform: rotate(-20deg) scaleX(.86); mix-blend-mode: screen; }
.mobius span { border-top-color: rgba(244,238,220,.32); border-bottom-color: rgba(110,231,249,.28); transform: rotate(90deg) scale(.72); }
.final-note { position: absolute; left: 18vw; bottom: 14vh; z-index: 10; font-family: var(--accent); letter-spacing: .2em; color: var(--moss); text-transform: uppercase; }
.gate-glyph { left: 50%; bottom: 8vh; }

@media (max-width: 760px) {
  .chamber { min-height: 112vh; padding: 26px; }
  .continuum-thread { height: 560vh; }
  h1 { top: 34vh; left: 24px; font-size: clamp(54px, 21vw, 110px); }
  .instruction { left: 28px; right: auto; top: 64vh; }
  .coordinate { left: 28px; }
  .waypoint { left: 24px; right: 24px; width: auto; padding: 24px; }
  .river-card, .stair-card, .orchard-card, .gate-card { left: 24px; right: 24px; top: 20vh; }
  .lens { width: 160px; height: 160px; right: -20px; }
  .constellation { inset: 46vh 6vw 8vh 6vw; }
  .mobius { left: -16vw; top: 42vh; width: 120vw; }
  .memory-rings { left: -20vw; top: 30vh; width: 130vw; }
  .map-note { display: none; }
}