:root {
  --black: #05070D;
  --vellum: #F2E9C9;
  --green: #B8FF6A;
  --cyan: #78F7FF;
  --amethyst: #3B1A68;
  --gold: #FFB84D;
  --teal: #0E5F5E;
  --rose: #FF8FC7;
  --mx: 8vw;
  --my: 88vh;
  --glow: .35;
  --progress: 0;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  color: var(--vellum);
  font-family: "Alegreya Sans", sans-serif;
  background:
    radial-gradient(circle at 8% 91%, rgba(255,184,77,.17), transparent 17rem),
    radial-gradient(circle at 82% 18%, rgba(59,26,104,.42), transparent 30rem),
    linear-gradient(180deg, #05070D 0%, #071018 34%, #07120f 55%, #0b0714 76%, #05070D 100%);
  overflow-x: hidden;
}

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  opacity: .23;
  background-image:
    radial-gradient(circle at 10% 20%, rgba(242,233,201,.08) 0 1px, transparent 1px),
    radial-gradient(circle at 82% 71%, rgba(120,247,255,.07) 0 1px, transparent 1px),
    radial-gradient(circle at 38% 49%, rgba(184,255,106,.06) 0 1px, transparent 1px);
  background-size: 37px 43px, 53px 47px, 71px 67px;
  mix-blend-mode: screen;
}

.lantern-cursor {
  position: fixed;
  left: 0;
  top: 0;
  width: 30rem;
  height: 30rem;
  margin: -15rem 0 0 -15rem;
  border-radius: 50%;
  pointer-events: none;
  z-index: 8;
  transform: translate3d(var(--mx), var(--my), 0);
  background:
    radial-gradient(circle, rgba(242,233,201,.23) 0%, rgba(255,184,77,.13) 18%, rgba(120,247,255,.08) 34%, transparent 68%);
  mix-blend-mode: screen;
  opacity: calc(.38 + var(--glow) * .45);
}

.ember-origin {
  position: fixed;
  left: 5vw;
  bottom: 6vh;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  z-index: 4;
  background: var(--gold);
  box-shadow: 0 0 1rem var(--gold), 0 0 5rem rgba(255,184,77,.45);
  animation: emberPulse 5s ease-in-out infinite;
}

.route-map {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 500vh;
  z-index: 3;
  pointer-events: none;
  opacity: .95;
}

#routePath {
  fill: none;
  stroke: var(--cyan);
  stroke-width: .42;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--progress));
  filter: url(#routeGlow);
}

.lantern-beads {
  position: fixed;
  right: 2.1rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9;
  display: grid;
  gap: 1.05rem;
}

.bead {
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 50%;
  border: 1px solid rgba(242,233,201,.34);
  color: var(--vellum);
  text-decoration: none;
  display: grid;
  place-items: center;
  background: rgba(5,7,13,.8);
  box-shadow: inset 0 0 .7rem rgba(59,26,104,.65);
  transition: .8s ease;
}

.bead span {
  font: 500 .42rem "IBM Plex Mono", monospace;
  opacity: .7;
}

.bead.active {
  background: var(--gold);
  border-color: var(--gold);
  box-shadow: 0 0 1rem var(--gold), 0 0 2.6rem rgba(184,255,106,.33);
  color: var(--black);
}

.waypoint {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.waypoint::before {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: -2;
  background: radial-gradient(circle at var(--mx) var(--my), rgba(242,233,201,.12), rgba(255,184,77,.04) 12rem, transparent 24rem);
  opacity: .7;
}

.waypoint::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(circle at 50% 50%, transparent, rgba(5,7,13,.82) 75%);
}

.expedition-note {
  position: absolute;
  max-width: min(32rem, 80vw);
  padding: 1.2rem 1.35rem 1.4rem;
  color: var(--vellum);
  background:
    linear-gradient(135deg, rgba(242,233,201,.11), rgba(242,233,201,.035)),
    radial-gradient(circle at 8% 0%, rgba(255,184,77,.12), transparent 50%);
  border: 1px solid rgba(242,233,201,.22);
  border-radius: .15rem 1.2rem .2rem 1.2rem;
  box-shadow: 0 0 2.5rem rgba(5,7,13,.75), inset 0 0 2rem rgba(255,184,77,.035);
  backdrop-filter: blur(3px);
}

.expedition-note h2,
.gold-title {
  font-family: "Cinzel Decorative", serif;
  font-weight: 700;
}

.expedition-note h2 {
  margin: .1rem 0 .65rem;
  font-size: clamp(2.1rem, 5vw, 5.3rem);
  line-height: .92;
  color: var(--gold);
  text-shadow: 0 0 .8rem rgba(255,184,77,.3), 0 0 2rem rgba(120,247,255,.12);
}

.expedition-note p:not(.coordinate), .instruction, .keep-lantern {
  font-family: "Fraunces", serif;
}

.expedition-note p:not(.coordinate) {
  margin: 0;
  font-size: clamp(1.05rem, 1.55vw, 1.45rem);
  line-height: 1.45;
}

.coordinate {
  margin: 0 0 .4rem;
  font: 500 .68rem "IBM Plex Mono", monospace;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--cyan);
}

.seal-number {
  position: absolute;
  font: 900 clamp(5rem, 14vw, 15rem) "Cinzel Decorative", serif;
  color: transparent;
  -webkit-text-stroke: 1px rgba(242,233,201,.18);
  text-shadow: 0 0 3rem rgba(120,247,255,.08);
  opacity: .55;
}

.gate {
  background:
    radial-gradient(circle at 9% 88%, rgba(255,184,77,.18), transparent 18rem),
    linear-gradient(145deg, #05070D 0%, #05070D 58%, #08091a 100%);
}

.title-fragment {
  position: absolute;
  left: 8vw;
  top: 18vh;
  width: min(46rem, 84vw);
  padding: 1.7rem 1.8rem;
}

.vellum-fragment {
  background: linear-gradient(120deg, rgba(242,233,201,.13), rgba(242,233,201,.035));
  border: 1px solid rgba(242,233,201,.2);
  box-shadow: inset 0 0 1.5rem rgba(242,233,201,.035), 0 0 4rem rgba(255,184,77,.08);
}

.gold-title {
  margin: 0;
  font-size: clamp(3rem, 8vw, 8.5rem);
  line-height: .88;
  letter-spacing: -.05em;
  color: var(--gold);
  background: linear-gradient(100deg, #6a4320 0%, var(--gold) 18%, var(--vellum) 35%, #9a662f 50%, var(--gold) 76%, #4d3318 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 1.3rem rgba(255,184,77,.22));
  animation: brushedGold 8s ease-in-out infinite;
}

.instruction {
  margin: 1rem 0 0;
  color: var(--vellum);
  font-size: clamp(1.1rem, 2vw, 1.7rem);
  font-style: italic;
}

.gate-arch {
  position: absolute;
  left: 50vw;
  bottom: 10vh;
  width: min(30rem, 44vw);
  height: 63vh;
  border: 1px solid rgba(242,233,201,.2);
  border-bottom: 0;
  border-radius: 16rem 16rem 0 0;
  box-shadow: inset 0 0 6rem rgba(5,7,13,.95), 0 0 3rem rgba(120,247,255,.08);
}

.gate-arch::before {
  content: "";
  position: absolute;
  inset: 1.2rem;
  border: 1px dashed rgba(184,255,106,.16);
  border-bottom: 0;
  border-radius: inherit;
}

.glyph {
  position: absolute;
  color: var(--green);
  opacity: .35;
  text-shadow: 0 0 1rem var(--green);
}
.glyph:nth-child(1) { left: 24%; top: 22%; }
.glyph:nth-child(2) { left: 51%; top: 12%; color: var(--cyan); }
.glyph:nth-child(3) { right: 24%; top: 34%; color: var(--rose); }

.gate-note { right: 9vw; bottom: 12vh; }
.gate .seal-number { right: 6vw; top: 6vh; }

.hidden-ink {
  position: absolute;
  color: rgba(184,255,106,.36);
  font: 600 clamp(1.4rem, 3vw, 3rem) "Fraunces", serif;
  letter-spacing: .02em;
  opacity: calc(.08 + var(--glow) * .45);
  text-shadow: 0 0 1rem rgba(184,255,106,.35);
}
.ink-one { left: 23vw; bottom: 19vh; transform: rotate(-9deg); }
.ink-two { right: 10vw; bottom: 18vh; transform: rotate(5deg); }

.footprints {
  position: absolute;
  left: 11vw;
  bottom: 11vh;
  display: flex;
  gap: 1.5rem;
  transform: rotate(-31deg);
}
.footprints i {
  width: .42rem;
  height: .72rem;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 .9rem var(--gold);
  opacity: .2;
  animation: footprint 6s linear infinite;
}
.footprints i:nth-child(2) { animation-delay: .6s; }
.footprints i:nth-child(3) { animation-delay: 1.2s; }
.footprints i:nth-child(4) { animation-delay: 1.8s; }
.footprints i:nth-child(5) { animation-delay: 2.4s; }

.compass {
  background:
    radial-gradient(circle at 70% 36%, rgba(120,247,255,.15), transparent 18rem),
    radial-gradient(circle at 26% 67%, rgba(59,26,104,.42), transparent 24rem),
    #05070D;
}
.compass .seal-number { left: 8vw; top: 4vh; }
.compass-note { left: 12vw; bottom: 11vh; }

.compass-wrap {
  position: absolute;
  right: 14vw;
  top: 16vh;
  width: min(28rem, 58vw);
  aspect-ratio: 1;
  border-radius: 50%;
  transform: rotate(calc(var(--progress) * 140deg));
  transition: transform 1.4s ease;
}
.compass-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(242,233,201,.35);
  box-shadow: inset 0 0 4rem rgba(120,247,255,.08), 0 0 4rem rgba(120,247,255,.14);
}
.compass-ring::before, .compass-ring::after {
  content: "";
  position: absolute;
  inset: 13%;
  border: 1px dashed rgba(184,255,106,.26);
  border-radius: 50%;
}
.compass-ring::after { inset: 31%; border-color: rgba(255,143,199,.25); }
.phase {
  position: absolute;
  font: 1rem "IBM Plex Mono", monospace;
  color: var(--vellum);
  text-shadow: 0 0 .8rem currentColor;
}
.phase-a { left: 48%; top: -1rem; color: var(--cyan); }
.phase-b { right: -1rem; top: 48%; color: var(--green); }
.phase-c { left: 48%; bottom: -1rem; color: var(--rose); }
.phase-d { left: -1rem; top: 48%; color: var(--gold); }
.moth-body, .needle {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.moth-body {
  width: .9rem;
  height: 7rem;
  border-radius: 50%;
  background: linear-gradient(var(--vellum), var(--gold), var(--black));
  box-shadow: 0 0 1.2rem var(--gold);
  z-index: 3;
}
.moth-wing {
  position: absolute;
  top: 39%;
  width: 8.5rem;
  height: 5.8rem;
  border: 1px solid rgba(242,233,201,.38);
  background: radial-gradient(circle at 50% 35%, rgba(255,143,199,.28), transparent 55%), rgba(120,247,255,.06);
  filter: drop-shadow(0 0 1rem rgba(120,247,255,.2));
  animation: mothBreath 5s ease-in-out infinite;
}
.moth-wing.left { right: 50%; border-radius: 90% 12% 70% 22%; transform-origin: right center; }
.moth-wing.right { left: 50%; border-radius: 12% 90% 22% 70%; transform-origin: left center; }
.needle {
  width: .12rem;
  height: 76%;
  background: linear-gradient(transparent, var(--cyan), var(--green), transparent);
  box-shadow: 0 0 1.5rem var(--cyan);
}
.star-knot {
  position: absolute;
  width: 8rem;
  height: 8rem;
  background:
    linear-gradient(45deg, transparent 48%, rgba(242,233,201,.24) 50%, transparent 52%),
    linear-gradient(-45deg, transparent 48%, rgba(120,247,255,.2) 50%, transparent 52%);
  border-radius: 50%;
  opacity: .45;
}
.knot-a { left: 11vw; top: 14vh; }
.knot-b { right: 8vw; bottom: 13vh; transform: scale(.65) rotate(22deg); }
.pollen-field::before, .pollen-field::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 3rem 2rem 0 var(--cyan), 7rem -1rem 0 var(--gold), 10rem 3rem 0 var(--rose), 14rem 0 0 var(--green), 18rem 2rem 0 var(--cyan);
  width: .28rem;
  height: .28rem;
  left: 34vw;
  top: 54vh;
  animation: pollenDrift 9s ease-in-out infinite;
}

.marsh {
  background:
    radial-gradient(ellipse at 50% 88%, rgba(14,95,94,.7), transparent 38%),
    radial-gradient(circle at 16% 25%, rgba(184,255,106,.12), transparent 16rem),
    #05070D;
}
.marsh .seal-number { right: 9vw; top: 4vh; }
.marsh-note { left: 10vw; top: 15vh; }
.reed-bank {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 40vh;
  background: linear-gradient(transparent, rgba(14,95,94,.32));
}
.reed-bank span {
  position: absolute;
  bottom: 0;
  width: .16rem;
  height: 36vh;
  background: linear-gradient(transparent, var(--teal), var(--black));
  transform-origin: bottom;
  box-shadow: 0 0 .8rem rgba(184,255,106,.14);
}
.reed-bank span:nth-child(1) { left: 8%; transform: rotate(-8deg); height: 29vh; }
.reed-bank span:nth-child(2) { left: 22%; transform: rotate(5deg); height: 41vh; }
.reed-bank span:nth-child(3) { left: 43%; transform: rotate(-3deg); height: 35vh; }
.reed-bank span:nth-child(4) { left: 61%; transform: rotate(8deg); height: 44vh; }
.reed-bank span:nth-child(5) { left: 75%; transform: rotate(-6deg); height: 33vh; }
.reed-bank span:nth-child(6) { left: 90%; transform: rotate(4deg); height: 39vh; }
.water-phrase {
  position: absolute;
  right: 8vw;
  bottom: 21vh;
  font: 600 clamp(2.4rem, 7vw, 7.5rem) "Fraunces", serif;
  color: rgba(120,247,255,.62);
  transform: scaleY(-1) skewX(-7deg);
  filter: url(#none);
  text-shadow: 0 0 1.8rem rgba(120,247,255,.32);
  opacity: calc(.22 + var(--glow) * .55);
  animation: rippleText 7s ease-in-out infinite;
}
.moon-shell, .dew-lens {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(242,233,201,.28);
  box-shadow: inset 0 0 1.5rem rgba(120,247,255,.13), 0 0 2rem rgba(184,255,106,.08);
}
.shell-a { right: 26vw; top: 24vh; width: 4rem; height: 2rem; border-radius: 50% 50% 10% 10%; }
.shell-b { left: 22vw; bottom: 18vh; width: 3rem; height: 1.5rem; border-radius: 50% 50% 8% 8%; }
.lens-a { right: 18vw; bottom: 37vh; width: 7rem; height: 7rem; }
.lens-b { left: 46vw; top: 34vh; width: 4rem; height: 4rem; }

.cavern {
  background:
    radial-gradient(circle at 55% 55%, rgba(59,26,104,.62), transparent 28rem),
    radial-gradient(circle at 79% 21%, rgba(255,143,199,.1), transparent 16rem),
    #05070D;
}
.cavern .seal-number { left: 7vw; bottom: 3vh; }
.cavern-note { right: 10vw; top: 16vh; }
.crystal-roof {
  position: absolute;
  top: 0;
  left: 8vw;
  right: 8vw;
  height: 35vh;
}
.crystal-roof i {
  position: absolute;
  top: 0;
  width: 0;
  height: 0;
  border-left: 2.6rem solid transparent;
  border-right: 2.6rem solid transparent;
  border-top: 22vh solid rgba(120,247,255,.16);
  filter: drop-shadow(0 0 1.4rem rgba(120,247,255,.28));
  animation: crystalPulse 6s ease-in-out infinite;
}
.crystal-roof i:nth-child(1) { left: 5%; border-top-color: rgba(184,255,106,.14); }
.crystal-roof i:nth-child(2) { left: 26%; border-top-width: 31vh; animation-delay: 1s; }
.crystal-roof i:nth-child(3) { left: 49%; border-top-color: rgba(255,143,199,.13); animation-delay: 2s; }
.crystal-roof i:nth-child(4) { left: 68%; border-top-width: 27vh; animation-delay: 3s; }
.crystal-roof i:nth-child(5) { left: 84%; border-top-color: rgba(255,184,77,.12); animation-delay: 4s; }
.choir-rings {
  position: absolute;
  left: 18vw;
  top: 42vh;
  width: 25rem;
  height: 25rem;
}
.choir-rings span {
  position: absolute;
  inset: 42%;
  border: 1px solid var(--cyan);
  border-radius: 50%;
  opacity: 0;
  box-shadow: 0 0 1.5rem rgba(120,247,255,.28);
  animation: choirRing 5.8s ease-out infinite;
}
.choir-rings span:nth-child(2) { animation-delay: 1.2s; border-color: var(--green); }
.choir-rings span:nth-child(3) { animation-delay: 2.4s; border-color: var(--rose); }
.choir-rings span:nth-child(4) { animation-delay: 3.6s; border-color: var(--gold); }

.beacon {
  background:
    radial-gradient(circle at 52% 49%, rgba(255,184,77,.2), transparent 19rem),
    radial-gradient(circle at 52% 49%, rgba(120,247,255,.12), transparent 31rem),
    #05070D;
}
.beacon .seal-number { right: 7vw; bottom: 4vh; }
.beacon-note { left: 8vw; top: 15vh; }
.final-sigil {
  position: absolute;
  right: 14vw;
  top: 29vh;
  width: min(30rem, 58vw);
  aspect-ratio: 1;
  border-radius: 50%;
  animation: sigilAssemble 9s ease-in-out infinite;
}
.sigil-halo, .sigil-ring, .sigil-moth, .sigil-flame, .sigil-reeds { position: absolute; }
.sigil-halo {
  inset: -18%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,184,77,.24), rgba(184,255,106,.1) 28%, transparent 67%);
  filter: blur(.3rem);
  animation: beaconPulse 5s ease-in-out infinite;
}
.sigil-ring { border-radius: 50%; border: 1px solid rgba(242,233,201,.45); }
.sigil-ring.outer { inset: 6%; box-shadow: 0 0 2.5rem rgba(255,184,77,.2); }
.sigil-ring.inner { inset: 28%; border-color: rgba(120,247,255,.45); }
.sigil-moth {
  left: 50%; top: 28%; width: 8rem; height: 5rem; transform: translateX(-50%);
  background: radial-gradient(ellipse at 30% 50%, rgba(255,143,199,.35), transparent 55%), radial-gradient(ellipse at 70% 50%, rgba(120,247,255,.35), transparent 55%);
  border-radius: 50%;
  filter: drop-shadow(0 0 1.2rem rgba(242,233,201,.25));
}
.sigil-flame {
  left: 50%; top: 48%; width: 3.2rem; height: 6rem; transform: translateX(-50%);
  border-radius: 55% 55% 45% 45%;
  background: linear-gradient(var(--vellum), var(--gold), var(--rose));
  box-shadow: 0 0 2rem var(--gold), 0 0 5rem rgba(255,184,77,.35);
}
.sigil-reeds {
  left: 28%; right: 28%; bottom: 20%; height: 4rem;
  background: repeating-linear-gradient(90deg, transparent 0 12%, rgba(184,255,106,.45) 13% 14%, transparent 15% 24%);
}
.keep-lantern {
  position: absolute;
  right: 21vw;
  bottom: 13vh;
  font-size: clamp(1.25rem, 2vw, 2rem);
  color: var(--gold);
  text-shadow: 0 0 1rem rgba(255,184,77,.45);
}

@keyframes emberPulse { 50% { transform: scale(1.6); opacity: .55; } }
@keyframes brushedGold { 50% { background-position: 100% 0; filter: drop-shadow(0 0 2.4rem rgba(255,184,77,.36)); } }
@keyframes footprint { 0%, 70%, 100% { opacity: .12; } 15%, 30% { opacity: .95; } }
@keyframes mothBreath { 50% { transform: scaleX(1.08) rotate(2deg); opacity: .82; } }
@keyframes pollenDrift { 50% { transform: translate(6rem, -3rem); opacity: .42; } }
@keyframes rippleText { 50% { letter-spacing: .04em; transform: scaleY(-1) skewX(4deg) translateY(.7rem); } }
@keyframes crystalPulse { 50% { opacity: .45; filter: drop-shadow(0 0 2.5rem rgba(184,255,106,.32)); } }
@keyframes choirRing { 0% { inset: 48%; opacity: .75; } 100% { inset: 0; opacity: 0; } }
@keyframes beaconPulse { 50% { transform: scale(1.08); opacity: .65; } }
@keyframes sigilAssemble { 0%, 100% { transform: rotate(-2deg) scale(.96); } 50% { transform: rotate(2deg) scale(1.03); } }

@media (max-width: 760px) {
  .expedition-note, .title-fragment { left: 6vw; right: auto; max-width: 86vw; }
  .gate-note, .compass-note, .marsh-note, .cavern-note, .beacon-note { top: auto; bottom: 9vh; left: 6vw; right: auto; }
  .gate-arch, .compass-wrap, .final-sigil { opacity: .55; right: -12vw; width: 70vw; }
  .lantern-beads { right: .8rem; }
  .water-phrase { right: 2vw; font-size: 3rem; }
  .choir-rings { left: 4vw; width: 90vw; height: 90vw; }
}