:root {
  --cedar: #17241B;
  --moss: #486B3E;
  --lichen: #B8C7A5;
  --soil: #5A3F2B;
  --parchment: #EFE6D1;
  --amber: #D99A3D;
  --firefly: #B7F06A;
  --moon: #7E9AA4;
  --season-glow: rgba(217, 154, 61, 0.18);
  --title: "Cormorant Garamond", serif;
  --kr: "Noto Serif KR", serif;
  --sans: "Nunito Sans", sans-serif;
  --mono: "IBM Plex Mono", monospace;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  color: var(--parchment);
  font-family: var(--sans);
  background:
    radial-gradient(circle at 20% 10%, rgba(126, 154, 164, 0.12), transparent 28rem),
    linear-gradient(180deg, #17241B 0%, #203225 38%, #101813 100%);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 30%), var(--season-glow), transparent 22rem);
  mix-blend-mode: screen;
  z-index: 8;
  transition: background 800ms ease;
}

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  opacity: .18;
  background-image:
    repeating-radial-gradient(circle at 12% 18%, rgba(239, 230, 209, .3) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(82deg, rgba(90, 63, 43, .25) 0 1px, transparent 1px 6px);
  mix-blend-mode: overlay;
}

.season-shift {
  position: fixed;
  inset: 0;
  background: linear-gradient(130deg, transparent, var(--season-glow), transparent);
  opacity: .45;
  pointer-events: none;
  z-index: 1;
  transition: opacity .8s ease, background 1s ease;
}

.trail-index {
  position: fixed;
  left: clamp(1rem, 2vw, 2rem);
  top: 50%;
  transform: translateY(-50%);
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: .55rem;
  padding: .8rem .65rem;
  border-left: 1px solid rgba(184, 199, 165, .32);
  background: rgba(23, 36, 27, .36);
  backdrop-filter: blur(8px);
}

.trail-index .index-title {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--mono);
  font-size: .62rem;
  color: var(--moon);
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: .65rem;
}

.trail-index a {
  color: var(--lichen);
  text-decoration: none;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .12em;
  opacity: .62;
  transition: color .35s ease, opacity .35s ease, transform .35s ease;
}

.trail-index a.active,
.trail-index a:hover {
  color: var(--firefly);
  opacity: 1;
  transform: translateX(.25rem);
}

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

.trail-label {
  display: inline-block;
  font-family: var(--mono);
  color: var(--lichen);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: clamp(.62rem, .9vw, .78rem);
  margin-bottom: .9rem;
}

.trail-label.dark { color: var(--moss); }

h1, h2 {
  font-family: var(--title);
  font-weight: 500;
  margin: 0;
  letter-spacing: .055em;
  line-height: .92;
}

p {
  margin: 0;
  line-height: 1.75;
  color: rgba(239, 230, 209, .78);
}

.gate-bark {
  display: grid;
  place-items: center;
  background:
    linear-gradient(88deg, rgba(0,0,0,.28), transparent 48%, rgba(0,0,0,.34)),
    repeating-linear-gradient(96deg, #17241B 0 18px, #1f2f22 18px 32px, #5A3F2B 33px 36px, #132017 38px 55px),
    radial-gradient(circle at 50% 30%, rgba(72, 107, 62, .35), transparent 45%);
}

.bark-fissures,
.bark-fissures svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.bark-fissures path {
  fill: none;
  stroke: rgba(8, 13, 10, .8);
  stroke-width: 9;
  stroke-linecap: round;
  filter: drop-shadow(0 0 8px rgba(217,154,61,.08));
}

.amber-sweep {
  position: absolute;
  inset: -30% auto -30% -45%;
  width: 36%;
  transform: rotate(13deg);
  background: linear-gradient(90deg, transparent, rgba(217,154,61,.05), rgba(217,154,61,.46), rgba(239,230,209,.14), transparent);
  animation: sweep 5s ease-in-out infinite;
  mix-blend-mode: screen;
}

@keyframes sweep {
  0%, 18% { left: -48%; opacity: 0; }
  46% { opacity: 1; }
  76%, 100% { left: 112%; opacity: 0; }
}

.gate-plank {
  position: relative;
  z-index: 3;
  width: min(68rem, 76vw);
  padding: clamp(2rem, 5vw, 5rem);
  transform: rotate(-2deg);
  border-radius: 44% 56% 47% 53% / 10% 14% 12% 16%;
  background:
    linear-gradient(100deg, rgba(90,63,43,.72), rgba(23,36,27,.86)),
    repeating-linear-gradient(0deg, rgba(239,230,209,.06) 0 1px, transparent 1px 13px);
  box-shadow: inset 0 0 0 1px rgba(184,199,165,.18), inset 0 0 70px rgba(0,0,0,.42), 0 28px 80px rgba(0,0,0,.35);
}

.gate-plank h1 {
  font-size: clamp(4.2rem, 14vw, 13rem);
  color: rgba(239, 230, 209, .18);
  text-shadow: 0 2px 0 rgba(0,0,0,.75), 0 -1px 0 rgba(184,199,165,.08), 0 0 28px rgba(217,154,61,.18);
  animation: carvedReveal 5s ease-in-out infinite;
}

@keyframes carvedReveal {
  0%, 28% { color: rgba(239,230,209,.16); }
  52%, 72% { color: rgba(239,230,209,.72); }
  100% { color: rgba(239,230,209,.2); }
}

.gate-plank p { max-width: 31rem; font-family: var(--kr); }
.sprout-a { position: relative; display: inline-block; color: inherit; }
.sprout-a::after {
  content: "";
  position: absolute;
  width: .24em;
  height: .32em;
  border-radius: 100% 0 100% 0;
  background: var(--firefly);
  top: .06em;
  right: -.1em;
  transform: rotate(-31deg) scale(.85);
  box-shadow: 0 0 18px rgba(183,240,106,.72);
}
.moon-dot { color: var(--moon); text-shadow: 0 0 18px rgba(126,154,164,.75); }

.ring-halo {
  position: absolute;
  width: clamp(11rem, 22vw, 19rem);
  height: clamp(11rem, 22vw, 19rem);
  right: 10vw;
  bottom: 11vh;
  border-radius: 50%;
  opacity: .42;
  background: repeating-radial-gradient(circle, transparent 0 12px, rgba(184,199,165,.28) 13px 14px, transparent 15px 26px);
  animation: breathe 7s ease-in-out infinite;
}

@keyframes breathe { 50% { transform: scale(1.08) rotate(8deg); opacity: .7; } }

.mud-path {
  position: absolute;
  height: 16rem;
  border: 2px solid rgba(90,63,43,.8);
  border-color: rgba(90,63,43,.8) transparent transparent transparent;
  border-radius: 58% 42% 0 0;
  filter: blur(.2px);
}
.path-one { width: 48vw; left: -8vw; bottom: -5rem; transform: rotate(8deg); }
.path-two { width: 54vw; right: -16vw; bottom: -7rem; transform: rotate(-9deg); border-top-color: rgba(72,107,62,.55); }

.root-map {
  padding: clamp(4rem, 7vw, 7rem) clamp(1.4rem, 7vw, 8rem);
  background:
    radial-gradient(circle at 10% 84%, rgba(90,63,43,.22), transparent 24rem),
    linear-gradient(180deg, #253728, #486B3E 16%, #EFE6D1 16%, #D9CEB4 100%);
  color: var(--cedar);
}

.map-sheet {
  position: relative;
  min-height: calc(100vh - 10rem);
  border-radius: 55% 45% 50% 50% / 5% 8% 7% 6%;
  background:
    radial-gradient(circle at 82% 18%, rgba(184,199,165,.54), transparent 18rem),
    linear-gradient(145deg, rgba(239,230,209,.95), rgba(184,199,165,.88));
  box-shadow: inset 0 0 0 1px rgba(90,63,43,.18), inset 0 0 90px rgba(90,63,43,.18), 0 30px 80px rgba(23,36,27,.32);
  overflow: hidden;
}

.map-edge {
  position: absolute;
  top: 1.2rem;
  left: 2rem;
  font-family: var(--mono);
  color: rgba(90,63,43,.52);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.root-network,
.contours {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.root-network path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.root-main {
  stroke: var(--soil);
  stroke-width: 13;
  stroke-dasharray: 1800;
  stroke-dashoffset: 1800;
}
.scene.in-view .root-main { animation: drawRoot 2.8s ease forwards; }
.root-branch {
  stroke: rgba(90,63,43,.72);
  stroke-width: 7;
  stroke-dasharray: 620;
  stroke-dashoffset: 620;
}
.scene.in-view .root-branch { animation: drawRoot 2.4s ease .55s forwards; }
.root-branch.hair { stroke-width: 3; stroke: rgba(72,107,62,.62); }
@keyframes drawRoot { to { stroke-dashoffset: 0; } }

.contours path,
.stone-contours path {
  fill: none;
  stroke: rgba(72,107,62,.28);
  stroke-width: 2;
  stroke-dasharray: 8 14;
  animation: contourBreath 9s ease-in-out infinite;
}
@keyframes contourBreath { 50% { stroke-dashoffset: 32; opacity: .48; } }

.specimen {
  position: absolute;
  padding: .55rem .75rem;
  background: rgba(239,230,209,.8);
  border: 1px solid rgba(90,63,43,.3);
  color: var(--soil);
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .08em;
  transform: rotate(var(--r, -5deg));
  box-shadow: 0 8px 20px rgba(90,63,43,.12);
}
.tag-na { left: 12%; top: 52%; --r: 7deg; }
.tag-mu { left: 37%; top: 29%; --r: -8deg; }
.tag-land { right: 12%; top: 33%; --r: 4deg; }

.root-copy {
  position: absolute;
  right: clamp(2rem, 7vw, 7rem);
  bottom: clamp(2rem, 7vw, 7rem);
  width: min(31rem, 72vw);
}
.root-copy h2 { font-size: clamp(2.8rem, 6vw, 6rem); color: var(--cedar); }
.root-copy p { color: rgba(23,36,27,.72); font-family: var(--kr); margin-top: 1rem; }

.moss-clearing {
  min-height: 110vh;
  background:
    radial-gradient(ellipse at 62% 42%, rgba(239,230,209,.58), rgba(184,199,165,.2) 31%, transparent 54%),
    radial-gradient(ellipse at 50% 92%, #486B3E 0%, #263b2a 48%, #17241B 82%);
}

.wood-plaque {
  position: absolute;
  left: clamp(3rem, 16vw, 15rem);
  top: 26vh;
  width: min(38rem, 76vw);
  padding: clamp(1.8rem, 4vw, 3.8rem);
  border-radius: 29% 71% 31% 69% / 9% 14% 12% 11%;
  background:
    linear-gradient(105deg, rgba(90,63,43,.92), rgba(72,107,62,.72)),
    repeating-linear-gradient(90deg, transparent 0 18px, rgba(239,230,209,.06) 19px 21px);
  box-shadow: inset 0 0 50px rgba(0,0,0,.28), 0 28px 70px rgba(0,0,0,.28);
  transform: rotate(1.5deg);
}
.wood-plaque h2 { font-size: clamp(2.7rem, 6vw, 5.8rem); }
.wood-plaque p { font-family: var(--kr); margin-top: 1.1rem; max-width: 31rem; }

.moss-pillow {
  position: absolute;
  bottom: -5rem;
  border-radius: 50% 50% 38% 42% / 64% 56% 38% 35%;
  background:
    radial-gradient(circle at 40% 24%, rgba(183,240,106,.22), transparent 22%),
    linear-gradient(180deg, #B8C7A5, #486B3E 48%, #17241B);
  box-shadow: inset 0 20px 40px rgba(183,240,106,.12), 0 -20px 70px rgba(72,107,62,.45);
}
.pillow-a { width: 45vw; height: 19rem; left: -7vw; }
.pillow-b { width: 54vw; height: 23rem; left: 24vw; bottom: -8rem; }
.pillow-c { width: 39vw; height: 17rem; right: -9vw; bottom: -3rem; }

.dew {
  position: absolute;
  width: .7rem;
  height: 1.4rem;
  border-radius: 50%;
  background: linear-gradient(160deg, rgba(239,230,209,.9), rgba(126,154,164,.32));
  box-shadow: 0 0 20px rgba(184,199,165,.55);
  animation: dewSlide 6s ease-in-out infinite;
}
.dew-one { left: 34%; bottom: 14rem; }
.dew-two { right: 22%; bottom: 9rem; animation-delay: 1.4s; }
.dew-three { left: 12%; bottom: 7rem; animation-delay: 2.1s; }
@keyframes dewSlide { 50% { transform: translateY(18px) scale(.86); opacity: .62; } }

.pressed-leaf {
  position: absolute;
  width: 8rem;
  height: 15rem;
  border-radius: 100% 0 100% 0;
  background: linear-gradient(135deg, rgba(184,199,165,.42), rgba(72,107,62,.18));
  transform: rotate(var(--leaf-r));
  opacity: .5;
  mask-image: radial-gradient(ellipse at 55% 50%, #000 0 52%, transparent 54%);
}
.leaf-one { right: 17vw; top: 16vh; --leaf-r: 37deg; }
.leaf-two { left: 7vw; top: 12vh; --leaf-r: -62deg; }

.canopy-lanterns {
  background:
    radial-gradient(circle at 50% 42%, rgba(126,154,164,.18), transparent 24rem),
    linear-gradient(180deg, #17241B, #0d1510 65%, #17241B);
}
.leaf-mask {
  position: absolute;
  background: linear-gradient(160deg, rgba(72,107,62,.74), rgba(8,13,10,.94));
  filter: drop-shadow(0 14px 38px rgba(0,0,0,.45));
  animation: leafTilt 8s ease-in-out infinite;
}
.canopy-a { width: 54vw; height: 45vh; left: -10vw; top: -9vh; border-radius: 0 100% 0 100%; transform: rotate(-18deg); }
.canopy-b { width: 66vw; height: 48vh; right: -18vw; top: -8vh; border-radius: 100% 0 100% 0; animation-delay: -2s; }
.canopy-c { width: 38vw; height: 38vh; left: 34vw; top: -14vh; border-radius: 0 100% 0 100%; animation-delay: -4s; }
@keyframes leafTilt { 50% { transform: rotate(-8deg) translateY(1rem); } }

.canopy-copy {
  position: absolute;
  left: clamp(3rem, 11vw, 11rem);
  top: 28vh;
  width: min(34rem, 76vw);
}
.canopy-copy h2 { font-size: clamp(3rem, 7vw, 7rem); }
.kr-line { font-family: var(--kr); color: var(--lichen); margin-top: 1rem; }

.firefly-field { position: absolute; inset: 0; }
.firefly {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: .72rem;
  height: .72rem;
  border: 0;
  padding: 0;
  border-radius: 50%;
  background: var(--firefly);
  box-shadow: 0 0 10px #B7F06A, 0 0 32px rgba(183,240,106,.78), 0 0 70px rgba(183,240,106,.3);
  cursor: pointer;
  animation: fireflyBlink 3s ease-in-out var(--delay) infinite, fireflyOrbit 7s ease-in-out var(--delay) infinite;
}
@keyframes fireflyBlink { 0%,100% { opacity: .34; transform: scale(.72); } 45% { opacity: 1; transform: scale(1.08); } }
@keyframes fireflyOrbit { 50% { margin-left: var(--orbit); margin-top: calc(var(--orbit) * -.55); } }

.caption-bubble {
  position: absolute;
  left: 50%;
  top: 70%;
  transform: translate(-50%, -50%);
  padding: .75rem 1rem;
  border: 1px solid rgba(183,240,106,.28);
  border-radius: 999px;
  background: rgba(23,36,27,.72);
  color: var(--firefly);
  font-family: var(--mono);
  font-size: .75rem;
  letter-spacing: .12em;
  opacity: .55;
  transition: opacity .35s ease, top .35s ease;
}
.caption-bubble.visible { opacity: 1; top: 66%; }

.boundary-stone {
  display: grid;
  place-items: center;
  min-height: 112vh;
  background:
    radial-gradient(circle at 50% 52%, rgba(126,154,164,.32), transparent 32rem),
    linear-gradient(180deg, #17241B, #223026 50%, #111812);
}
.stone-contours {
  position: absolute;
  width: min(88vw, 70rem);
  height: min(72vh, 48rem);
  opacity: .75;
}
.stone-marker {
  position: relative;
  z-index: 2;
  width: min(51rem, 76vw);
  min-height: 26rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2rem, 6vw, 5rem);
  color: var(--cedar);
  text-align: center;
  border-radius: 45% 55% 51% 49% / 22% 17% 30% 25%;
  background:
    radial-gradient(circle at 42% 22%, rgba(239,230,209,.52), transparent 8rem),
    linear-gradient(145deg, #B8C7A5, #7E9AA4 58%, #5A3F2B);
  box-shadow: inset 0 0 0 2px rgba(23,36,27,.16), inset 0 -38px 80px rgba(23,36,27,.22), 0 50px 90px rgba(0,0,0,.38);
}
.stone-marker h2 {
  font-size: clamp(4rem, 10vw, 10rem);
  color: rgba(23,36,27,.72);
  text-shadow: 0 2px 0 rgba(239,230,209,.24), 0 -2px 0 rgba(0,0,0,.28);
}
.stone-marker h2 span { color: rgba(183,240,106,.66); text-shadow: 0 0 20px rgba(183,240,106,.55); }
.stone-marker p { color: rgba(23,36,27,.72); font-family: var(--kr); width: min(32rem, 100%); margin: 1rem auto 0; }
.coordinate { margin-top: 1.4rem; color: rgba(23,36,27,.62); font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; }
.beyond-path {
  position: absolute;
  right: -8vw;
  bottom: 8vh;
  width: 42vw;
  height: 8rem;
  border-top: 4px solid rgba(183,240,106,.5);
  border-radius: 50%;
  filter: drop-shadow(0 0 18px rgba(183,240,106,.5));
  transform: rotate(-8deg);
}

@media (max-width: 760px) {
  .trail-index { top: auto; bottom: 1rem; left: 1rem; right: 1rem; transform: none; flex-direction: row; justify-content: center; border-left: 0; border-top: 1px solid rgba(184,199,165,.32); }
  .trail-index .index-title { display: none; }
  .gate-plank, .wood-plaque, .stone-marker { width: 86vw; }
  .root-copy { left: 2rem; right: auto; }
  .specimen { font-size: .58rem; }
  .canopy-copy { top: 24vh; }
}