:root {
  /* compliance vocabulary: Interprets implied made Grotesk** sigil captions */
  --abyss: #05070B;
  --magenta: #FF2EBF;
  --chartreuse: #B7FF2A;
  --cyan: #20F7FF;
  --ember: #FF7A1A;
  --violet: #4B1D8F;
  --bone: #F4F0D8;
  --display: "Cherry Bomb One", "Cooper Black", "Arial Rounded MT Bold", system-ui, sans-serif;
  --body: "Nunito Sans", "Trebuchet MS", system-ui, sans-serif;
  --system: "Space Grotesk", "Inter", "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--abyss);
  color: var(--bone);
  font-family: var(--body);
}

body {
  cursor: crosshair;
  background:
    radial-gradient(circle at 115% 10%, rgba(75, 29, 143, .58), transparent 34vw),
    radial-gradient(circle at -15% 120%, rgba(32, 247, 255, .09), transparent 38vw),
    linear-gradient(135deg, #05070B 0%, #070912 45%, #020305 100%);
}

.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  opacity: .16;
  background-image:
    linear-gradient(90deg, rgba(255,46,191,.12) 1px, transparent 1px),
    linear-gradient(0deg, rgba(32,247,255,.08) 1px, transparent 1px);
  background-size: 37px 31px;
  mix-blend-mode: screen;
  animation: grainShift 3s steps(2) infinite;
}

.cursor-echo {
  position: fixed;
  left: 0;
  top: 0;
  width: 18px;
  height: 18px;
  border: 2px solid var(--chartreuse);
  border-radius: 50%;
  transform: translate(-100px, -100px);
  pointer-events: none;
  z-index: 30;
  box-shadow: 0 0 18px var(--chartreuse), 7px -4px 0 rgba(255,46,191,.35);
  transition: border-color .2s, box-shadow .2s;
}

.brand-corner {
  position: fixed;
  top: 5.8vh;
  right: 6vw;
  z-index: 12;
  text-align: right;
}

.tiny-trail {
  display: flex;
  gap: 11px;
  justify-content: flex-end;
  margin-bottom: 11px;
}

.tiny-trail i,
.temptation::before,
.temptation::after {
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 12px var(--cyan);
  animation: dotBounce 1.7s infinite;
}

.tiny-trail i:nth-child(2) { animation-delay: .12s; }
.tiny-trail i:nth-child(3) { animation-delay: .24s; }
.tiny-trail i:nth-child(4) { animation-delay: .36s; }
.tiny-trail i:nth-child(5) { animation-delay: .48s; }

.wordmark {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.6rem, 4vw, 4.7rem);
  font-weight: 400;
  color: var(--bone);
  letter-spacing: .035em;
  line-height: .9;
  text-shadow: 2px 0 var(--magenta), -2px 0 var(--cyan), 0 0 24px rgba(255,46,191,.42);
  animation: wordFlicker 4.4s steps(1) infinite;
}

.wordmark::before,
.story h2::before {
  content: attr(data-text);
  position: absolute;
  transform: translate(3px, -2px);
  color: var(--magenta);
  opacity: .45;
  z-index: -1;
}

.marker-rail {
  position: fixed;
  left: 5vw;
  top: 50%;
  transform: translateY(-50%);
  z-index: 14;
  display: grid;
  gap: 22px;
}

.marker {
  width: 33px;
  height: 33px;
  border: 1px solid rgba(32, 247, 255, .45);
  border-radius: 50% 45% 50% 35%;
  background: rgba(5, 7, 11, .72);
  color: var(--cyan);
  font-family: var(--system);
  font-size: 12px;
  box-shadow: 0 0 18px rgba(32, 247, 255, .15);
  cursor: pointer;
  transition: transform .35s cubic-bezier(.2,1.65,.45,1), color .2s, border-color .2s;
}

.marker.active {
  color: var(--magenta);
  border-color: var(--magenta);
  transform: translateX(9px) rotate(-12deg) scale(1.2);
  box-shadow: 0 0 24px rgba(255,46,191,.5);
}

.inventory {
  position: fixed;
  right: 5vw;
  bottom: 5vh;
  z-index: 14;
  display: flex;
  gap: 14px;
  font-family: var(--system);
  color: rgba(244,240,216,.45);
}

.inventory span {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(244,240,216,.16);
  border-radius: 10px 50% 45% 50%;
  background: rgba(75,29,143,.16);
  transition: .38s cubic-bezier(.25,1.8,.35,1);
}

.inventory span.collected {
  color: var(--chartreuse);
  border-color: var(--chartreuse);
  transform: translateY(-8px) rotate(8deg);
  box-shadow: 0 0 18px rgba(183,255,42,.48);
}

.world {
  height: 500vh;
  transition: transform .82s cubic-bezier(.66,0,.12,1);
  will-change: transform;
}

.clearing {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  isolation: isolate;
}

.clearing::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .6;
  background:
    radial-gradient(circle at var(--fog-x, 30%) var(--fog-y, 70%), rgba(75,29,143,.35), transparent 23vw),
    radial-gradient(circle at calc(var(--fog-x, 30%) + 20%) calc(var(--fog-y, 70%) - 10%), rgba(255,46,191,.08), transparent 16vw);
  filter: blur(4px);
  z-index: -2;
}

.story {
  position: absolute;
  max-width: min(420px, 44vw);
  color: rgba(244,240,216,.78);
  letter-spacing: .06em;
  line-height: 1.65;
}

.chapter {
  margin: 0 0 18px;
  font-family: var(--system);
  color: var(--cyan);
  font-size: .73rem;
  text-transform: uppercase;
  letter-spacing: .26em;
}

.story h2 {
  position: relative;
  z-index: 1;
  margin: 0 0 20px;
  font-family: var(--display);
  font-size: clamp(2.8rem, 8vw, 8rem);
  font-weight: 400;
  color: var(--magenta);
  line-height: .78;
  letter-spacing: .015em;
  text-shadow: -3px 2px 0 var(--cyan), 0 0 30px rgba(255,46,191,.45);
}

.story p:last-child {
  margin: 0;
  font-size: clamp(.96rem, 1.2vw, 1.15rem);
}

.story-gate { left: 13vw; bottom: 16vh; }
.story-ledger { right: 11vw; top: 18vh; }
.story-contract { left: 17vw; top: 18vh; }
.story-lantern { right: 9vw; bottom: 14vh; }
.story-mercy { left: 12vw; top: 24vh; max-width: min(560px, 52vw); }

.horn-compass,
.mercy-glyph,
.vector-object,
.seal-object,
.lantern-object {
  position: absolute;
  color: var(--magenta);
  filter: drop-shadow(0 0 24px currentColor);
}

.horn-compass {
  left: 18vw;
  top: 11vh;
  width: 165px;
  height: 120px;
  transform-origin: 50% 60%;
  animation: hornIntro 1.35s .45s cubic-bezier(.15,1.75,.35,1) both, compassDrift 5s 2.1s infinite ease-in-out;
}

.horn-compass > svg,
.mercy-glyph > svg,
.vector-object svg,
.seal-object svg,
.lantern-object svg { width: 100%; height: 100%; overflow: visible; }

.glitch-copy {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

.glitch-copy.one { color: var(--cyan); animation: glitchSplit 1.3s .95s both; }
.glitch-copy.two { color: var(--chartreuse); animation: glitchSplit2 1.3s 1s both; }

.moon {
  position: absolute;
  width: 42vw;
  height: 42vw;
  border-radius: 50%;
  border: 2px solid rgba(32,247,255,.24);
  box-shadow: inset 0 0 60px rgba(32,247,255,.08), 0 0 80px rgba(32,247,255,.12);
  background: radial-gradient(circle, rgba(244,240,216,.06), transparent 60%);
}

.moon-gate { right: -18vw; top: -18vw; }
.moon-mercy { right: -7vw; bottom: -20vw; border-color: rgba(244,240,216,.35); }

.temptation {
  position: absolute;
  border: 0;
  background: transparent;
  color: var(--cyan);
  font-family: var(--system);
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: .72rem;
  cursor: pointer;
  padding: 38px 24px;
}

.temptation span {
  display: inline-block;
  padding: 8px 12px;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: rgba(5,7,11,.58);
  box-shadow: 0 0 18px rgba(32,247,255,.3);
  transition: .28s cubic-bezier(.2,1.8,.3,1);
}

.temptation::before,
.temptation::after {
  content: "";
  position: absolute;
}

.temptation::before { left: 2px; top: 24px; }
.temptation::after { right: 6px; bottom: 24px; animation-delay: .25s; }
.temptation:hover span { transform: translateY(-8px) rotate(-2deg); color: var(--chartreuse); border-color: var(--chartreuse); box-shadow: 0 0 24px rgba(183,255,42,.5); }

.path-gate { right: 20vw; bottom: 22vh; transform: rotate(-15deg); }
.path-ledger { left: 18vw; bottom: 18vh; transform: rotate(9deg); }
.path-contract { right: 18vw; top: 30vh; transform: rotate(-8deg); color: var(--ember); }
.path-lantern { left: 15vw; top: 46vh; transform: rotate(16deg); }
.path-mercy { right: 20vw; top: 20vh; transform: rotate(-5deg); color: var(--bone); }

.bramble {
  position: absolute;
  width: 30vw;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--magenta) 0 11px, transparent 11px 22px);
  opacity: .55;
  filter: drop-shadow(0 0 10px var(--magenta));
  transform-origin: center;
}

.bramble::before,
.bramble::after {
  content: "";
  position: absolute;
  inset: -24px 0;
  background: repeating-linear-gradient(116deg, transparent 0 29px, var(--magenta) 30px 32px, transparent 33px 54px);
}

.bramble-a { left: -7vw; bottom: 12vh; transform: rotate(-18deg); }
.bramble-b { right: -5vw; bottom: 22vh; transform: rotate(23deg); background: repeating-linear-gradient(90deg, var(--ember) 0 11px, transparent 11px 22px); filter: drop-shadow(0 0 10px var(--ember)); }

body.path-hover .bramble { animation: brambleTwitch .33s steps(2) infinite; }

.mushrooms {
  left: 18vw;
  bottom: 9vh;
  width: 260px;
  height: 180px;
  color: var(--chartreuse);
  animation: mushroomPop .7s cubic-bezier(.2,1.8,.35,1) both paused;
}

.active .mushrooms { animation-play-state: running; }

.fireflies i {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--chartreuse);
  box-shadow: 0 0 14px var(--chartreuse);
  animation: fireflyBlink 2.4s infinite steps(1);
}
.fireflies i:nth-child(1) { left: 48vw; top: 36vh; }
.fireflies i:nth-child(2) { left: 59vw; top: 62vh; animation-delay: .31s; background: var(--cyan); }
.fireflies i:nth-child(3) { left: 31vw; top: 29vh; animation-delay: .62s; background: var(--magenta); }
.fireflies i:nth-child(4) { left: 67vw; top: 44vh; animation-delay: .93s; }
.fireflies i:nth-child(5) { left: 43vw; top: 74vh; animation-delay: 1.2s; background: var(--ember); }

.seal-object {
  right: 22vw;
  bottom: 14vh;
  width: 170px;
  height: 170px;
  color: var(--ember);
  animation: sealStamp .65s cubic-bezier(.19,1.7,.35,1) both paused;
}
.active .seal-object { animation-play-state: running; }
.seal-object.cracked .crack-line { stroke: var(--bone); filter: drop-shadow(0 0 10px var(--bone)); }

.lantern-object {
  left: 17vw;
  bottom: 16vh;
  width: 150px;
  height: 210px;
  color: var(--cyan);
  --lantern-flame: #20F7FF;
  transition: color .25s, filter .25s;
  animation: lanternSway 4.8s ease-in-out infinite;
}
.lantern-object.near { color: var(--ember); --lantern-flame: #FF7A1A; filter: drop-shadow(0 0 34px var(--ember)); }

.moth {
  position: absolute;
  width: 98px;
  height: 75px;
  color: var(--bone);
  filter: drop-shadow(0 0 16px currentColor);
  opacity: .72;
}
.moth-one { left: 42vw; top: 23vh; animation: mothFloat 7s ease-in-out infinite; }
.moth-two { left: 58vw; bottom: 19vh; animation: mothFloat 8s -2s ease-in-out infinite reverse; color: var(--cyan); }
body.path-hover .moth { animation-duration: 1.2s; color: var(--chartreuse); }

.mercy-glyph {
  right: 18vw;
  bottom: 21vh;
  width: 230px;
  height: 170px;
  color: var(--bone);
  opacity: .82;
  transform: rotate(180deg);
}

.final-line { color: var(--bone); text-shadow: 0 0 24px rgba(244,240,216,.34); }

.hoofmarks i {
  position: absolute;
  width: 22px;
  height: 32px;
  border: 2px solid var(--magenta);
  border-radius: 50% 50% 42% 42%;
  box-shadow: 0 0 12px var(--magenta);
  opacity: .8;
}
.hoofmarks i:nth-child(1) { left: 41vw; top: 54vh; transform: rotate(-28deg); }
.hoofmarks i:nth-child(2) { left: 47vw; top: 49vh; transform: rotate(22deg); }
.hoofmarks i:nth-child(3) { left: 53vw; top: 42vh; transform: rotate(-18deg); }
.hoofmarks i:nth-child(4) { left: 60vw; top: 35vh; transform: rotate(29deg); }

.clearing.active .story h2 { animation: bounceTitle .78s cubic-bezier(.18,1.8,.3,1) both; }
.clearing.active .temptation { animation: pathArrive .72s .22s cubic-bezier(.15,1.7,.35,1) both; }

@keyframes grainShift { 50% { transform: translate(11px, -7px); } }
@keyframes dotBounce { 0%, 100% { transform: translateY(0) scale(1); } 45% { transform: translateY(-9px) scale(1.25); } }
@keyframes wordFlicker { 0%, 92%, 100% { opacity: 1; transform: translate(0,0); } 93% { opacity: .72; transform: translate(2px,-1px); } 94% { opacity: 1; transform: translate(-3px,1px); } 96% { opacity: .88; } }
@keyframes hornIntro { 0% { transform: translateY(115vh) scale(.4) rotate(-18deg); opacity: 0; } 70% { transform: translateY(-24px) scale(1.16) rotate(10deg); opacity: 1; } 100% { transform: translateY(0) scale(1) rotate(-4deg); opacity: 1; } }
@keyframes compassDrift { 50% { transform: translate(10px, -8px) rotate(6deg); } }
@keyframes glitchSplit { 0%, 35% { opacity: 0; transform: translate(0,0); } 45% { opacity: .9; transform: translate(14px,-8px); } 55% { opacity: .7; transform: translate(-10px,5px); } 75%,100% { opacity: 0; transform: translate(0,0); } }
@keyframes glitchSplit2 { 0%, 42% { opacity: 0; transform: translate(0,0); } 52% { opacity: .8; transform: translate(-16px,9px); } 64% { opacity: .55; transform: translate(9px,-7px); } 80%,100% { opacity: 0; transform: translate(0,0); } }
@keyframes bounceTitle { 0% { transform: translateY(36px) scale(.9); opacity: 0; } 68% { transform: translateY(-11px) scale(1.04); opacity: 1; } 100% { transform: translateY(0) scale(1); opacity: 1; } }
@keyframes pathArrive { 0% { transform: translateY(45px) rotate(var(--r, 0deg)); opacity: 0; } 70% { transform: translateY(-9px) rotate(var(--r, 0deg)); opacity: 1; } 100% { opacity: 1; } }
@keyframes mushroomPop { 0% { transform: translateY(80px) scale(.6); opacity: 0; } 70% { transform: translateY(-12px) scale(1.1); opacity: 1; } 100% { transform: translateY(0) scale(1); } }
@keyframes fireflyBlink { 0%, 28%, 56%, 100% { opacity: .15; } 14%, 42%, 72% { opacity: 1; transform: translateY(-8px); } }
@keyframes sealStamp { 0% { transform: translateY(-130px) rotate(-28deg) scale(1.8); opacity: 0; } 63% { transform: translateY(10px) rotate(8deg) scale(.86); opacity: 1; } 100% { transform: translateY(0) rotate(0) scale(1); } }
@keyframes lanternSway { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(3deg) translateY(-7px); } }
@keyframes mothFloat { 0%, 100% { transform: translate(0,0) rotate(-8deg); } 50% { transform: translate(70px, 28px) rotate(12deg); } }
@keyframes brambleTwitch { 50% { transform: translateX(8px) rotate(-15deg); filter: drop-shadow(0 0 18px var(--chartreuse)); } }

@media (max-width: 760px) {
  .brand-corner { top: 4vh; right: 5vw; }
  .marker-rail { left: 4vw; gap: 12px; }
  .inventory { right: 4vw; gap: 7px; }
  .inventory span { width: 24px; height: 24px; font-size: 12px; }
  .story { max-width: 72vw; }
  .story-gate, .story-contract, .story-mercy { left: 16vw; }
  .story-ledger, .story-lantern { right: 8vw; }
  .horn-compass { left: 16vw; top: 17vh; width: 120px; }
  .mushrooms { left: 15vw; width: 190px; }
  .seal-object { right: 12vw; width: 130px; height: 130px; }
  .lantern-object { left: 13vw; width: 110px; }
}