:root {
  --abyss: #05070B;
  --obsidian: #111827;
  --ivory: #F2E6C9;
  --violet: #8B5CF6;
  --cyan: #53F4D8;
  --lichen: #B7F35A;
  --plum: #5B1237;
  --amber: #F0A64B;
  --lantern: #8B5CF6;
  --title: "Cormorant Unicase", "Cormorant", Georgia, serif;
  --story: "Fraunces", Georgia, serif;
  --plain: "Nunito Sans", Inter, system-ui, sans-serif;
  /* Space Mono appears sparingly for depth readings and ritual coordinates. */
  --mono: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ivory);
  font-family: var(--story);
  overflow-x: hidden;
  background:
    radial-gradient(circle at 62% 12%, rgba(139, 92, 246, .14), transparent 32rem),
    radial-gradient(circle at 18% 42%, rgba(83, 244, 216, .09), transparent 28rem),
    linear-gradient(180deg, #010205 0%, var(--abyss) 18%, var(--obsidian) 48%, #030407 100%);
}

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  opacity: .17;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(242,230,201,.9) 0 1px, transparent 1px),
    radial-gradient(circle at 70% 38%, rgba(183,243,90,.8) 0 1px, transparent 1px),
    radial-gradient(circle at 40% 75%, rgba(83,244,216,.7) 0 1px, transparent 1px);
  background-size: 71px 83px, 113px 127px, 47px 59px;
  mix-blend-mode: screen;
}

.cavern-depth { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }

.surface-crack {
  position: fixed;
  top: 0;
  left: 12vw;
  width: 76vw;
  height: clamp(3px, 1vw, 12px);
  background: linear-gradient(90deg, transparent, #F2E6C9, #53F4D8, #F2E6C9, transparent);
  box-shadow: 0 0 30px #53F4D8, 0 0 90px rgba(242, 230, 201, .55);
  clip-path: polygon(0 45%, 9% 15%, 16% 58%, 25% 20%, 41% 50%, 54% 15%, 68% 65%, 81% 22%, 100% 48%, 100% 100%, 0 100%);
  transform-origin: top;
  opacity: calc(1 - var(--seal, 0));
  transform: scaleY(calc(1 - var(--seal, 0) * .92));
}

.mist { position: absolute; width: 52rem; height: 52rem; border-radius: 50%; filter: blur(28px); opacity: .18; animation: drift 18s ease-in-out infinite alternate; }
.mist-one { background: var(--violet); top: 20vh; left: -18rem; }
.mist-two { background: var(--cyan); top: 62vh; right: -20rem; animation-duration: 22s; }

.mineral-curtain { position: absolute; top: 0; bottom: 0; width: 28vw; opacity: .42; background: linear-gradient(90deg, transparent, rgba(17,24,39,.9)); filter: drop-shadow(0 0 28px #05070B); }
.curtain-left { left: 0; clip-path: polygon(0 0, 88% 0, 62% 9%, 84% 18%, 55% 30%, 74% 42%, 48% 58%, 63% 72%, 35% 100%, 0 100%); }
.curtain-right { right: 0; transform: scaleX(-1); clip-path: polygon(0 0, 88% 0, 62% 9%, 84% 18%, 55% 30%, 74% 42%, 48% 58%, 63% 72%, 35% 100%, 0 100%); }

main, .scene { position: relative; z-index: 2; }

.scene {
  min-height: 112vh;
  padding: 12vh clamp(1.2rem, 5vw, 6rem);
  display: grid;
  align-items: center;
  isolation: isolate;
}

.scene::before {
  content: "";
  position: absolute;
  inset: 4vh 2vw;
  z-index: -2;
  background:
    radial-gradient(circle at 25% 20%, rgba(242,230,201,.08), transparent 8rem),
    radial-gradient(circle at 75% 66%, rgba(91,18,55,.26), transparent 22rem),
    linear-gradient(135deg, rgba(17,24,39,.52), rgba(5,7,11,.25));
  clip-path: polygon(8% 4%, 84% 0, 96% 16%, 90% 39%, 99% 55%, 83% 90%, 55% 96%, 32% 88%, 8% 97%, 0 61%, 5% 37%, 0 18%);
}

.hero { min-height: 120vh; align-content: start; padding-top: 18vh; }
.specimen-tag, .depth-label, .descent-cue, .depth-gauge, .cave-marks, .floating-line, .moth-copy { font-family: var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.specimen-tag { color: var(--cyan); font-size: .75rem; margin-left: 9vw; text-shadow: 0 0 18px var(--cyan); }
h1, h2 { font-family: var(--title); font-weight: 700; margin: 0; line-height: .86; text-wrap: balance; }
h1 { font-size: clamp(4.2rem, 15vw, 15rem); max-width: 10ch; color: var(--ivory); text-shadow: 0 0 16px rgba(242,230,201,.3), 0 0 62px rgba(139,92,246,.35); }
h2 { font-size: clamp(2.7rem, 8vw, 7.5rem); color: var(--ivory); text-shadow: 0 0 24px var(--lantern); }
p { font-size: clamp(1.05rem, 1.7vw, 1.45rem); line-height: 1.55; }
.invitation { color: var(--amber); font-size: clamp(1.45rem, 3vw, 3rem); max-width: 22ch; margin: 1rem 0 0 7vw; text-shadow: 0 0 28px rgba(240,166,75,.65); }

.slate, .chapter {
  background: linear-gradient(145deg, rgba(17,24,39,.88), rgba(5,7,11,.78));
  border: 1px solid rgba(242,230,201,.14);
  box-shadow: inset 0 0 42px rgba(242,230,201,.04), 0 28px 80px rgba(0,0,0,.55), 0 0 46px color-mix(in srgb, var(--lantern) 28%, transparent);
  backdrop-filter: blur(3px);
}

.hero-tablet { width: min(31rem, 82vw); margin: 9vh 0 0 45vw; padding: 2rem; clip-path: polygon(7% 0, 100% 10%, 92% 100%, 0 91%); }
.date-rune { float: left; color: var(--lichen); font-size: 4rem; margin-right: 1rem; text-shadow: 0 0 20px var(--lichen); }
.descent-cue { position: absolute; bottom: 12vh; right: 10vw; color: var(--lichen); font-size: .72rem; writing-mode: vertical-rl; }

.root-web { position: absolute; inset: 0 0 auto 0; height: 48vh; opacity: .42; background: repeating-radial-gradient(ellipse at 50% 0%, transparent 0 23px, rgba(242,230,201,.08) 24px 25px), conic-gradient(from 12deg at 50% 0%, transparent, rgba(91,18,55,.4), transparent, rgba(240,166,75,.22), transparent); clip-path: polygon(0 0, 100% 0, 82% 34%, 68% 24%, 61% 56%, 52% 21%, 43% 68%, 35% 26%, 21% 45%, 12% 22%, 0 37%); }

.chapter { max-width: 42rem; padding: clamp(1.4rem, 4vw, 3.3rem); position: relative; }
.chapter p { color: rgba(242,230,201,.88); }
.depth-label { color: var(--cyan); font-size: .72rem; }
blockquote { margin: 2rem 0; font-size: clamp(1.4rem, 3vw, 2.5rem); color: var(--amber); }
.narrow-stone { width: min(33rem, 88vw); margin-left: 13vw; clip-path: polygon(4% 0, 82% 4%, 100% 28%, 89% 100%, 7% 92%, 0 44%); }
.stalactites { position: absolute; inset: 0 0 auto 0; height: 30vh; background: linear-gradient(#05070B, transparent); clip-path: polygon(0 0, 100% 0, 100% 30%, 91% 11%, 87% 60%, 78% 16%, 73% 48%, 62% 8%, 55% 58%, 45% 13%, 40% 70%, 31% 17%, 26% 51%, 14% 9%, 10% 45%, 0 23%); }

.lantern-choice { display: flex; flex-wrap: wrap; gap: .75rem; }
button { font: inherit; color: var(--ivory); cursor: pointer; }
.hue { border: 1px solid rgba(242,230,201,.22); background: rgba(5,7,11,.7); padding: .8rem 1rem; border-radius: 999px; font-family: var(--plain); text-transform: lowercase; transition: transform .25s, border-color .25s, box-shadow .25s; }
.hue span { display: inline-block; width: .8rem; height: .8rem; border-radius: 50%; margin-right: .55rem; background: var(--lantern); box-shadow: 0 0 14px var(--lantern); }
.hue[data-hue="cyan"] span { background: var(--cyan); box-shadow: 0 0 14px var(--cyan); }
.hue[data-hue="amber"] span { background: var(--amber); box-shadow: 0 0 14px var(--amber); }
.hue.active, .hue:hover { transform: translateY(-3px); border-color: var(--lantern); box-shadow: 0 0 26px color-mix(in srgb, var(--lantern) 38%, transparent); }

.bone-charms { position: absolute; right: 15vw; top: 36vh; display: grid; gap: 1.5rem; }
.bone-charms i { width: 2rem; height: 5rem; background: var(--ivory); opacity: .5; border-radius: 50% 50% 45% 45%; box-shadow: 0 0 18px rgba(242,230,201,.28); animation: sway 4s ease-in-out infinite; }
.bone-charms i:nth-child(2) { animation-delay: -1s; height: 3rem; }

.ballroom { grid-template-columns: minmax(0, 1fr) minmax(17rem, 34rem); gap: 4vw; }
.mushroom-balcony { margin-left: 5vw; clip-path: polygon(12% 0, 92% 7%, 100% 71%, 80% 100%, 0 86%, 8% 31%); }
.mushroom-field i { position: absolute; width: 7rem; height: 9rem; bottom: 8vh; border-radius: 50% 50% 8% 8%; background: radial-gradient(ellipse at 50% 16%, var(--violet), transparent 42%), linear-gradient(var(--plum), transparent); box-shadow: 0 0 54px var(--violet); opacity: .58; animation: breathe 5s ease-in-out infinite; }
.mushroom-field i::after { content: ""; position: absolute; left: 45%; bottom: 0; width: 14%; height: 58%; background: rgba(242,230,201,.5); border-radius: 1rem; }
.mushroom-field i:nth-child(1) { left: 4vw; transform: scale(.7); }
.mushroom-field i:nth-child(2) { left: 22vw; bottom: 16vh; animation-delay: -2s; }
.mushroom-field i:nth-child(3) { right: 27vw; transform: scale(.55); animation-delay: -1s; }
.mushroom-field i:nth-child(4) { right: 7vw; bottom: 23vh; transform: scale(.9); }
.mushroom-field i:nth-child(5) { left: 44vw; bottom: 4vh; transform: scale(.45); background: radial-gradient(ellipse at 50% 16%, var(--cyan), transparent 42%), linear-gradient(var(--obsidian), transparent); box-shadow: 0 0 54px var(--cyan); }
.mushroom-field i:nth-child(6) { left: 70vw; bottom: 2vh; transform: scale(.62); background: radial-gradient(ellipse at 50% 16%, var(--lichen), transparent 42%), linear-gradient(var(--obsidian), transparent); box-shadow: 0 0 54px var(--lichen); }

.artifact-niches { display: grid; gap: 1.2rem; align-self: center; }
.niche { min-height: 9rem; padding: 1.3rem; display: grid; place-items: center; position: relative; overflow: hidden; background: radial-gradient(circle at 50% 28%, rgba(240,166,75,.2), transparent 50%), rgba(5,7,11,.8); border: 1px solid rgba(242,230,201,.16); border-radius: 48% 42% 52% 38%; box-shadow: inset 0 0 34px rgba(0,0,0,.7), 0 0 28px rgba(240,166,75,.18); font-family: var(--title); font-size: 2rem; }
.niche span { position: absolute; bottom: 1.5rem; width: 2rem; height: 2rem; border-radius: 50%; background: var(--amber); box-shadow: 0 0 22px var(--amber); }
.niche:hover { box-shadow: inset 0 0 34px rgba(0,0,0,.7), 0 0 46px var(--amber); }
.floating-line, .moth-copy { color: var(--lichen); min-height: 2rem; }

.blacklake { align-items: end; padding-bottom: 18vh; }
.lake { position: absolute; left: -5vw; right: -5vw; bottom: 0; height: 44vh; background: radial-gradient(ellipse at 50% 0, rgba(83,244,216,.18), transparent 45%), linear-gradient(180deg, rgba(17,24,39,.1), rgba(0,0,0,.92)); box-shadow: inset 0 24px 60px rgba(83,244,216,.18); transform: skewY(-2deg); }
.lake::after { content: ""; position: absolute; inset: 16% 0 0; background: repeating-linear-gradient(178deg, transparent 0 18px, rgba(242,230,201,.06) 19px 20px); animation: ripple 7s linear infinite; }
.lake-script { margin-left: auto; margin-right: 12vw; width: min(44rem, 87vw); clip-path: polygon(0 15%, 15% 0, 100% 6%, 92% 80%, 58% 100%, 8% 86%); }
.reflected { transform: scaleY(-1); color: rgba(83,244,216,.48); filter: blur(.2px); }
.upright { color: var(--ivory); }
.moth-stage { position: absolute; left: 12vw; top: 23vh; width: 38vw; height: 28vh; }
.moth { position: absolute; width: 4rem; height: 2.2rem; border: 0; background: transparent; }
.moth::before, .moth::after { content: ""; position: absolute; top: .3rem; width: 2.1rem; height: 1.7rem; background: radial-gradient(circle, var(--cyan), transparent 60%); border-radius: 80% 20% 80% 20%; box-shadow: 0 0 28px var(--cyan); }
.moth::before { left: 0; transform: rotate(-24deg); }
.moth::after { right: 0; transform: scaleX(-1) rotate(-24deg); }
.moth-left { left: 0; top: 40%; animation: mothPath 8s ease-in-out infinite; }
.moth-right { right: 5%; top: 5%; animation: mothPath 9s ease-in-out infinite reverse; }

.bridge { align-items: center; }
.diagonal-slate { margin-left: 30vw; transform: rotate(-4deg); clip-path: polygon(7% 0, 100% 2%, 91% 87%, 26% 100%, 0 70%); }
.crystal-ribs i { position: absolute; width: 2.2rem; height: 68vh; top: 15vh; background: linear-gradient(180deg, rgba(83,244,216,.05), rgba(83,244,216,.45), rgba(139,92,246,.12)); clip-path: polygon(50% 0, 100% 50%, 55% 100%, 0 47%); box-shadow: 0 0 32px rgba(83,244,216,.38); }
.crystal-ribs i:nth-child(1) { left: 8vw; transform: rotate(22deg); }
.crystal-ribs i:nth-child(2) { left: 21vw; transform: rotate(-9deg); }
.crystal-ribs i:nth-child(3) { right: 35vw; transform: rotate(16deg); }
.crystal-ribs i:nth-child(4) { right: 18vw; transform: rotate(-18deg); }
.crystal-ribs i:nth-child(5) { right: 6vw; transform: rotate(8deg); }
.stepping-stones { position: absolute; inset: auto 8vw 16vh 10vw; display: flex; justify-content: space-around; transform: rotate(-8deg); }
.stepping-stones i { width: clamp(4rem, 9vw, 9rem); height: clamp(3rem, 6vw, 6rem); display: grid; place-items: center; border-radius: 47%; background: rgba(17,24,39,.92); color: var(--lichen); box-shadow: 0 0 24px rgba(183,243,90,.28); font-style: normal; font-size: 2rem; }

.grotto { min-height: 126vh; place-items: center; text-align: center; }
.grotto-ring { position: absolute; width: min(82vw, 55rem); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, transparent 44%, rgba(240,166,75,.16) 45% 48%, transparent 49%), conic-gradient(from 20deg, var(--amber), transparent, var(--violet), transparent, var(--cyan), transparent, var(--lichen), transparent, var(--amber)); filter: blur(.2px) drop-shadow(0 0 55px rgba(240,166,75,.45)); opacity: .72; animation: turn 32s linear infinite; }
.final-ritual { width: min(48rem, 88vw); border-radius: 48% 52% 44% 56% / 16% 21% 18% 20%; padding: clamp(2rem, 5vw, 4.5rem); }
.date-stone { margin: 1rem auto; width: min(18rem, 70vw); aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(242,230,201,.26); background: radial-gradient(circle at 50% 42%, rgba(240,166,75,.32), rgba(91,18,55,.46) 38%, rgba(5,7,11,.92) 70%); box-shadow: inset 0 0 40px rgba(0,0,0,.8), 0 0 42px rgba(240,166,75,.35); font-family: var(--mono); font-size: .78rem; text-transform: uppercase; letter-spacing: .11em; }
.date-stone.revealed { box-shadow: inset 0 0 40px rgba(0,0,0,.8), 0 0 72px var(--amber), 0 0 110px var(--violet); transform: rotate(12deg); }
.hidden-omen { opacity: 0; transform: translateY(1rem); color: var(--amber); transition: .6s ease; }
.hidden-omen.visible { opacity: 1; transform: translateY(0); }
.paired-lanterns { position: absolute; bottom: 16vh; display: flex; gap: min(24vw, 16rem); }
.paired-lanterns i { width: 3.3rem; height: 5.8rem; border-radius: 45% 45% 30% 30%; background: radial-gradient(circle at 50% 42%, var(--amber), rgba(240,166,75,.12) 46%, transparent 70%); box-shadow: 0 0 55px var(--amber); animation: lanternPulse 2.8s ease-in-out infinite; }
.paired-lanterns i:nth-child(2) { animation-delay: .35s; --amber: var(--lantern); }
.closing-mark { position: absolute; bottom: 4vh; font-family: var(--title); font-size: clamp(2rem, 7vw, 6rem); color: rgba(242,230,201,.22); }

.depth-gauge { position: fixed; z-index: 10; top: 1.1rem; left: 1rem; color: var(--cyan); font-size: .68rem; text-shadow: 0 0 12px var(--cyan); }
.gauge-line { margin-top: .5rem; width: 11rem; height: 1px; background: rgba(83,244,216,.25); }
.gauge-line i { display: block; width: .65rem; height: .65rem; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 15px var(--cyan); transform: translate(calc(var(--progress, 0) * 10.4rem), -.31rem); }
.cave-marks { position: fixed; z-index: 12; right: 1rem; top: 50%; transform: translateY(-50%); display: grid; gap: .8rem; }
.cave-marks a { width: 2rem; height: 2rem; display: grid; place-items: center; text-decoration: none; color: var(--ivory); border-radius: 50%; background: rgba(17,24,39,.75); border: 1px solid rgba(242,230,201,.14); box-shadow: 0 0 16px rgba(83,244,216,.14); font-size: .68rem; }
.cave-marks a.active { color: var(--abyss); background: var(--lichen); box-shadow: 0 0 24px var(--lichen); }

#sporeCanvas { position: fixed; inset: 0; z-index: 8; pointer-events: none; }
.reveal-chamber { opacity: .35; transform: translateY(3rem) rotate(var(--tilt, 0deg)); transition: opacity .8s ease, transform .8s ease, filter .8s ease; filter: saturate(.7); }
.reveal-chamber.awake { opacity: 1; transform: translateY(0) rotate(var(--tilt, 0deg)); filter: saturate(1.16); }

@keyframes drift { to { transform: translate(8vw, 7vh) scale(1.18); } }
@keyframes sway { 50% { transform: rotate(9deg) translateX(.4rem); } }
@keyframes breathe { 50% { opacity: .88; transform: translateY(-.6rem) scale(1.05); } }
@keyframes ripple { to { transform: translateX(-4rem); } }
@keyframes mothPath { 0%,100% { transform: translate(0,0) rotate(-8deg); } 45% { transform: translate(18vw, -7vh) rotate(15deg); } 70% { transform: translate(26vw, 5vh) rotate(-18deg); } }
@keyframes turn { to { transform: rotate(360deg); } }
@keyframes lanternPulse { 50% { filter: brightness(1.35); transform: translateY(-.35rem); } }

@media (max-width: 760px) {
  .hero-tablet, .narrow-stone, .mushroom-balcony, .lake-script, .diagonal-slate { margin-left: 0; margin-right: 0; transform: none; }
  .ballroom { grid-template-columns: 1fr; }
  .artifact-niches { grid-template-columns: 1fr; }
  .cave-marks { right: .35rem; }
  .moth-stage { opacity: .7; width: 70vw; }
}