:root {
  --root-black: #07110D;
  --cedar-shadow: #17392B;
  --wet-bark: #5B3A24;
  --moon-lichen: #DCE7C8;
  --sap-gold: #F2B84B;
  --firefly-green: #8CFF9A;
  --indigo-rain: #2C3F73;
  --persimmon-seal: #D95D39;
  --title-font: "Cormorant Garamond", serif;
  --story-font: "Noto Serif KR", serif;
  --small-font: "Nunito Sans", sans-serif;
  --mono-font: "IBM Plex Mono", monospace;
}

/* IBM Plex Mono appears very sparingly for tiny coordinate marks and ring catalog details. */

* { box-sizing: border-box; }

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

body {
  margin: 0;
  color: var(--moon-lichen);
  font-family: var(--story-font);
  background:
    radial-gradient(circle at 18% 18%, rgba(44, 63, 115, .36), transparent 28rem),
    radial-gradient(circle at 76% 62%, rgba(23, 57, 43, .52), transparent 34rem),
    var(--root-black);
  overflow-x: hidden;
}

body.awakened .awakening { stroke-dashoffset: 0; filter: drop-shadow(0 0 12px rgba(242, 184, 75, .8)); }
body.awakened .sap-bead { opacity: 1; animation: beadTravel 4.8s cubic-bezier(.54, .01, .15, 1) forwards; }
body.awakened .wake-button { color: var(--root-black); background: var(--sap-gold); border-color: var(--sap-gold); box-shadow: 0 0 38px rgba(242, 184, 75, .4); }

.atmosphere, .mist, .rain, .leaf-shadow, .firefly-field {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
}

.mist {
  opacity: .42;
  mix-blend-mode: screen;
  background: linear-gradient(100deg, transparent 8%, rgba(220, 231, 200, .09) 36%, transparent 62%);
  transform: translateX(-40%);
}

.mist-one { animation: mistDrift 32s linear infinite; }
.mist-two { animation: mistDrift 46s linear infinite reverse; opacity: .25; top: 18%; }

.rain {
  opacity: .28;
  background-image: repeating-linear-gradient(112deg, transparent 0 18px, rgba(220, 231, 200, .16) 19px, transparent 21px);
  background-size: 140px 140px;
  animation: rainFall 1.3s linear infinite;
}

.leaf-shadow {
  opacity: .13;
  background:
    radial-gradient(ellipse at 10% 30%, #07110D 0 4%, transparent 4.5%),
    radial-gradient(ellipse at 72% 16%, #07110D 0 7%, transparent 7.6%),
    radial-gradient(ellipse at 82% 72%, #07110D 0 5%, transparent 5.6%);
  filter: blur(8px);
  animation: shadowWipe 18s ease-in-out infinite alternate;
}

.firefly {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--firefly-green);
  box-shadow: 0 0 14px var(--firefly-green), 0 0 25px rgba(140, 255, 154, .55);
  opacity: .66;
  transform: translate3d(var(--x), var(--y), 0);
  animation: fireflyPulse 2.8s ease-in-out infinite alternate;
}

.ring-nav {
  position: fixed;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  display: grid;
  gap: 13px;
}

.ring-link {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  color: rgba(220, 231, 200, .58);
  text-decoration: none;
  font-family: var(--mono-font);
  font-size: 11px;
  border: 1px solid rgba(220, 231, 200, .22);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(23, 57, 43, .62), rgba(7, 17, 13, .78));
  transition: .5s ease;
}

.ring-link.active {
  color: var(--root-black);
  border-color: var(--sap-gold);
  background: var(--sap-gold);
  box-shadow: 0 0 24px rgba(242, 184, 75, .42);
}

.clearing {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(32px, 6vw, 84px);
  background:
    linear-gradient(180deg, rgba(7, 17, 13, .2), rgba(7, 17, 13, .88)),
    radial-gradient(circle at 50% 120%, rgba(91, 58, 36, .26), transparent 42rem);
}

.clearing::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image:
    linear-gradient(90deg, transparent 0 12%, rgba(23, 57, 43, .3) 12.4% 14.6%, transparent 15%),
    linear-gradient(90deg, transparent 0 58%, rgba(91, 58, 36, .24) 58.2% 60.5%, transparent 61%),
    linear-gradient(90deg, transparent 0 82%, rgba(23, 57, 43, .28) 82.3% 85%, transparent 85.4%);
  filter: blur(.3px);
}

.clearing::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .22;
  background-image: radial-gradient(rgba(220, 231, 200, .18) 1px, transparent 1px), radial-gradient(rgba(91, 58, 36, .24) 1px, transparent 1px);
  background-size: 33px 37px, 19px 23px;
  mix-blend-mode: screen;
}

h1, h2 {
  margin: 0;
  font-family: var(--title-font);
  font-weight: 600;
  letter-spacing: .035em;
  color: var(--moon-lichen);
  text-shadow: 0 2px 0 rgba(91, 58, 36, .5), 0 0 22px rgba(220, 231, 200, .16);
}

h1 { font-size: clamp(4.2rem, 12vw, 11rem); line-height: .8; }
h2 { font-size: clamp(3.2rem, 8vw, 8rem); line-height: .82; }

.coordinate {
  margin: 0 0 12px;
  font-family: var(--mono-font);
  color: var(--sap-gold);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.story, .fragment, .inscription, .shrine-script {
  font-size: clamp(1.1rem, 2vw, 1.6rem);
  line-height: 1.75;
  color: rgba(220, 231, 200, .88);
}

.rain-gate {
  display: grid;
  place-items: center;
  text-align: center;
  background:
    radial-gradient(ellipse at 50% 80%, rgba(44, 63, 115, .34), transparent 28rem),
    linear-gradient(180deg, #07110D, #07110D 44%, #0a1711);
}

.tree-frame, .shrine-trees {
  position: absolute;
  top: -5vh;
  bottom: -8vh;
  width: clamp(120px, 17vw, 260px);
  background:
    repeating-linear-gradient(94deg, rgba(220, 231, 200, .04) 0 2px, transparent 2px 13px),
    linear-gradient(90deg, #07110D, var(--cedar-shadow) 42%, var(--wet-bark), #07110D);
  border-radius: 45% 55% 42% 58%;
  filter: drop-shadow(0 0 42px #07110D);
}

.tree-left { left: -62px; transform: rotate(-2deg); }
.tree-right { right: -78px; transform: rotate(3deg); }
.path-slit { position: absolute; bottom: -14vh; width: min(18vw, 180px); height: 72vh; border-radius: 50% 50% 0 0; background: linear-gradient(180deg, transparent, rgba(242, 184, 75, .13), rgba(44, 63, 115, .28)); filter: blur(2px); }
.bark-wordmark { position: relative; z-index: 3; transform: translateY(-4vh); }
.shrine-a { position: relative; color: var(--moon-lichen); }
.shrine-a::after { content: ""; position: absolute; left: 32%; right: 29%; bottom: 13%; height: 22%; border-radius: 50% 50% 0 0; background: rgba(242, 184, 75, .32); box-shadow: 0 0 16px rgba(242, 184, 75, .5); }
.sap-dot { color: var(--sap-gold); text-shadow: 0 0 18px var(--sap-gold); }
.wake-button { position: absolute; bottom: 11vh; z-index: 5; padding: 15px 24px; border-radius: 999px; border: 1px solid rgba(242, 184, 75, .45); background: rgba(7, 17, 13, .52); color: var(--sap-gold); font: 700 13px var(--small-font); letter-spacing: .16em; text-transform: uppercase; cursor: pointer; transition: .55s ease; }
.gate-fragment { position: absolute; left: 12vw; bottom: 17vh; max-width: 310px; text-align: left; color: rgba(220, 231, 200, .68); }

.root-map { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.root-line { fill: none; stroke: var(--wet-bark); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; opacity: .78; }
.root-line.side, .root-line.branch { stroke-width: 3; opacity: .42; }
.awakening { stroke: var(--sap-gold); stroke-dasharray: 930; stroke-dashoffset: 930; transition: stroke-dashoffset 3.8s ease; }
.sap-bead { position: absolute; left: 48.6%; top: 95%; z-index: 6; width: 16px; height: 16px; border-radius: 50%; opacity: 0; background: var(--sap-gold); box-shadow: 0 0 22px var(--sap-gold), 0 0 42px rgba(242, 184, 75, .7); }

.root-ledger { background: radial-gradient(circle at 76% 12%, rgba(140, 255, 154, .1), transparent 19rem), linear-gradient(140deg, #07110D, #10251d 54%, #07110D); }
.ledger-map .primary { stroke: var(--sap-gold); stroke-width: 8; filter: drop-shadow(0 0 12px rgba(242, 184, 75, .35)); }
.plaque { position: relative; z-index: 5; width: min(560px, 84vw); padding: clamp(24px, 4vw, 44px); background: linear-gradient(135deg, rgba(91, 58, 36, .84), rgba(23, 57, 43, .82)); border: 1px solid rgba(220, 231, 200, .18); border-radius: 28px 14px 34px 18px; box-shadow: inset 0 0 0 1px rgba(7, 17, 13, .35), 0 24px 80px rgba(0, 0, 0, .42); }
.ledger-plaque { margin: 20vh 0 0 9vw; transform: rotate(-2deg); }
.name-leaf, .paper-tag { position: absolute; z-index: 7; padding: 13px 19px; background: #DCE7C8; color: #17392B; font-family: var(--story-font); border-radius: 70% 30% 65% 35%; box-shadow: 0 10px 30px rgba(0,0,0,.35); transition: transform .22s ease, box-shadow .22s ease; }
.name-leaf.warm, .paper-tag.warm { box-shadow: 0 0 22px rgba(242,184,75,.55), 0 10px 30px rgba(0,0,0,.35); transform: translate(var(--tremble-x), var(--tremble-y)) rotate(var(--rot)); }
.leaf-one { left: 62vw; top: 18vh; }
.leaf-two { left: 72vw; top: 58vh; }
.leaf-three { left: 38vw; top: 70vh; }
.dew-lens { position: absolute; right: 17vw; bottom: 15vh; width: 118px; height: 118px; display: grid; place-items: center; border-radius: 50%; color: var(--firefly-green); font: 500 14px var(--mono-font); background: radial-gradient(circle at 32% 28%, rgba(220,231,200,.58), rgba(44,63,115,.2) 38%, rgba(7,17,13,.25)); border: 1px solid rgba(220,231,200,.26); backdrop-filter: blur(2px); }

.bark-archive { display: grid; place-items: center; background: radial-gradient(circle at 50% 46%, rgba(91, 58, 36, .34), transparent 25rem), #07110D; }
.trunk-hollow { position: relative; width: min(44vw, 430px); height: min(60vh, 560px); border-radius: 48% 52% 42% 58%; background: repeating-radial-gradient(ellipse at 50% 48%, rgba(220,231,200,.05) 0 2px, transparent 3px 16px), linear-gradient(90deg, #17392B, #5B3A24 46%, #17392B); box-shadow: inset 0 0 80px #07110D, 0 0 100px rgba(0,0,0,.56); }
.hollow-core { position: absolute; inset: 18% 24%; border-radius: 50%; background: radial-gradient(circle, #07110D 0 44%, rgba(44,63,115,.44) 45%, rgba(7,17,13,.92)); box-shadow: inset 0 0 70px #000, 0 0 28px rgba(140,255,154,.08); }
.tiny-drawer { position: absolute; padding: 8px 12px; background: rgba(7,17,13,.72); border: 1px solid rgba(242,184,75,.34); color: var(--sap-gold); font: 11px var(--mono-font); }
.drawer-one { left: 16%; top: 34%; }.drawer-two { right: 18%; top: 54%; }.drawer-three { left: 39%; bottom: 16%; }
.bark-scroll { position: absolute; z-index: 5; width: min(330px, 72vw); padding: 22px; background: linear-gradient(100deg, rgba(91,58,36,.96), rgba(23,57,43,.86)); border-radius: 16px 36px 13px 28px; border-left: 5px solid var(--sap-gold); box-shadow: 0 20px 60px rgba(0,0,0,.38); }
.bark-scroll span { font: 11px var(--mono-font); color: var(--sap-gold); text-transform: uppercase; letter-spacing: .15em; }
.bark-scroll p { margin: 10px 0 0; line-height: 1.55; }
.scroll-one { left: 8vw; top: 19vh; transform: rotate(-8deg); }.scroll-two { right: 8vw; top: 31vh; transform: rotate(7deg); }.scroll-three { left: 18vw; bottom: 12vh; transform: rotate(3deg); }
.ring-map { position: absolute; right: 15vw; bottom: 14vh; width: 190px; height: 190px; border-radius: 50%; }
.ring-map i { position: absolute; inset: calc(var(--i, 0) * 14px); border: 1px solid rgba(242,184,75,.4); border-radius: 46% 54% 51% 49%; animation: ringBreathe 5s ease-in-out infinite; }
.ring-map i:nth-child(1){--i:0}.ring-map i:nth-child(2){--i:1}.ring-map i:nth-child(3){--i:2}.ring-map i:nth-child(4){--i:3}.ring-map i:nth-child(5){--i:4}

.bell-canopy { background: linear-gradient(180deg, #07110D 0%, #10231b 64%, #07110D); }
.canopy-thread { position: absolute; top: 0; width: 1px; height: 42vh; background: linear-gradient(#DCE7C8, transparent); opacity: .34; }
.thread-one { left: 22vw; height: 50vh; }.thread-two { left: 52vw; height: 38vh; }.thread-three { left: 78vw; height: 57vh; }
.bell { position: absolute; z-index: 5; width: 74px; height: 86px; border-radius: 48% 48% 18% 18%; background: linear-gradient(110deg, #F2B84B, #5B3A24 78%); box-shadow: inset -10px -18px 24px rgba(7,17,13,.32), 0 0 24px rgba(242,184,75,.26); transform-origin: 50% -60px; animation: bellSway 4s ease-in-out infinite; transition: filter .2s ease, transform .2s ease; }
.bell span { position: absolute; left: 50%; bottom: -17px; width: 12px; height: 28px; border-radius: 50%; background: var(--persimmon-seal); transform: translateX(-50%); }
.bell.warm { filter: drop-shadow(0 0 18px rgba(242,184,75,.85)); }
.bell-one { left: calc(22vw - 37px); top: 45vh; }.bell-two { left: calc(52vw - 37px); top: 33vh; animation-delay: -1s; }.bell-three { left: calc(78vw - 37px); top: 52vh; animation-delay: -2.1s; }
.tag-one { left: 30vw; top: 17vh; border-radius: 8px 8px 18px 18px; transform: rotate(4deg); }.tag-two { right: 13vw; bottom: 18vh; border-radius: 8px 8px 18px 18px; transform: rotate(-5deg); }
.bell-plaque { margin: 57vh 0 0 9vw; }

.hollow-compass { background: radial-gradient(circle at 50% 54%, rgba(44,63,115,.44), transparent 33rem), #07110D; }
.compass-stage { position: absolute; inset: 0; display: grid; place-items: center; }
.leaf-compass { position: relative; width: min(58vw, 540px); height: min(58vw, 540px); border-radius: 50%; background: radial-gradient(circle, rgba(23,57,43,.32), rgba(7,17,13,.86) 62%, transparent 63%); border: 1px solid rgba(220,231,200,.15); box-shadow: inset 0 0 90px rgba(44,63,115,.26); animation: ringBreathe 7s ease-in-out infinite; }
.needle { position: absolute; left: 50%; top: 50%; width: 44%; height: 13%; background: linear-gradient(90deg, transparent, rgba(220,231,200,.33), rgba(140,255,154,.18)); border-radius: 100% 0; transform-origin: 0 50%; filter: blur(.4px); }
.needle-a { transform: rotate(22deg); }.needle-b { transform: rotate(112deg); }.needle-c { transform: rotate(206deg); }.needle-d { transform: rotate(303deg); }
.compass-eye { position: absolute; inset: 40%; display: grid; place-items: center; border-radius: 50%; background: var(--sap-gold); color: var(--root-black); font: 600 36px var(--story-font); box-shadow: 0 0 32px rgba(242,184,75,.55); }
.moss-island, .ripple { position: absolute; border-radius: 50%; }
.moss-island { background: radial-gradient(circle, #8CFF9A, #17392B 48%, transparent 68%); opacity: .35; filter: blur(3px); }
.island-one { width: 190px; height: 82px; left: 16vw; top: 62vh; }.island-two { width: 140px; height: 62px; right: 18vw; top: 23vh; }
.ripple { border: 1px solid rgba(220,231,200,.18); animation: rippleOpen 5s linear infinite; }
.ripple-one { width: 260px; height: 110px; left: 14vw; top: 59vh; }.ripple-two { width: 210px; height: 90px; right: 16vw; top: 21vh; animation-delay: -2s; }
.compass-plaque { margin: 16vh 0 0 8vw; }

.saplit-shrine { display: grid; place-items: center; background: radial-gradient(circle at 50% 60%, rgba(242,184,75,.14), transparent 24rem), linear-gradient(180deg, #07110D, #10221a); }
.shrine-left { left: -40px; }.shrine-right { right: -45px; transform: scaleX(-1); }
.altar { position: relative; z-index: 6; width: min(680px, 86vw); padding: clamp(32px, 5vw, 62px); text-align: center; background: linear-gradient(145deg, rgba(91,58,36,.82), rgba(23,57,43,.88)); border-radius: 42px 42px 24px 24px; border: 1px solid rgba(242,184,75,.24); box-shadow: inset 0 0 80px rgba(7,17,13,.48), 0 0 90px rgba(242,184,75,.12); }
.wooden-seal { display: inline-grid; place-items: center; margin: 26px auto 18px; min-height: 90px; padding: 18px 34px; color: var(--moon-lichen); font: 700 clamp(2rem, 5vw, 4rem) var(--title-font); background: var(--persimmon-seal); border-radius: 22px 12px 26px 15px; transform: rotate(-2deg); box-shadow: 0 16px 40px rgba(0,0,0,.34), 0 0 35px rgba(217,93,57,.22); }
.leaf-mark { display: inline-block; padding: 12px 24px; border-radius: 999px 35px 999px 35px; background: var(--moon-lichen); color: var(--cedar-shadow); font: 700 13px var(--small-font); letter-spacing: .12em; text-transform: uppercase; }
.seal-glow { position: absolute; width: 36vw; height: 36vw; border-radius: 50%; background: radial-gradient(circle, rgba(140,255,154,.18), transparent 68%); filter: blur(20px); animation: fireflyPulse 4s ease-in-out infinite alternate; }

@keyframes mistDrift { to { transform: translateX(45%); } }
@keyframes rainFall { to { background-position: -120px 140px; } }
@keyframes shadowWipe { to { transform: translateX(8vw) translateY(-3vh) scale(1.1); } }
@keyframes fireflyPulse { from { opacity: .24; transform: translate3d(var(--x,0), var(--y,0), 0) scale(.7); } to { opacity: .9; transform: translate3d(var(--x,0), var(--y,0), 0) scale(1.25); } }
@keyframes beadTravel { 0% { left: 48.6%; top: 95%; } 26% { left: 46%; top: 66%; } 55% { left: 43%; top: 43%; } 78% { left: 50%; top: 24%; } 100% { left: 60%; top: 8%; } }
@keyframes bellSway { 0%,100% { transform: rotate(-4deg); } 50% { transform: rotate(5deg); } }
@keyframes ringBreathe { 0%,100% { transform: scale(.96) rotate(-2deg); opacity: .55; } 50% { transform: scale(1.05) rotate(2deg); opacity: .95; } }
@keyframes rippleOpen { from { transform: scale(.62); opacity: .44; } to { transform: scale(1.45); opacity: 0; } }

@media (max-width: 760px) {
  .ring-nav { right: 10px; gap: 8px; }
  .ring-link { width: 32px; height: 32px; }
  .gate-fragment, .ring-map { display: none; }
  .ledger-plaque, .bell-plaque, .compass-plaque { margin-left: 0; margin-top: 18vh; }
  .tree-frame, .shrine-trees { width: 110px; }
  .bark-scroll { position: relative; inset: auto; margin: 12px; transform: none; }
  .bark-archive { align-content: center; gap: 10px; padding-top: 90px; }
  .trunk-hollow { position: absolute; opacity: .55; width: 72vw; }
}