:root {
  /* Interface labels are rendered with the quiet annotation sans stack. */
  --moss-shadow: #263626;
  --mushroom-clay: #9B7357;
  --fern-milk: #D8D3B8;
  --lichen-green: #6F8B5F;
  --dew-pearl: #E9F4D8;
  --foxglove-blush: #C996A4;
  --night-soil: #171E16;
  --display: 'Fraunces', Georgia, serif;
  --serif: 'Cormorant Garamond', Garamond, serif;
  --sans: 'Nunito Sans', system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; overflow: hidden; }

body {
  color: var(--fern-milk);
  background:
    radial-gradient(circle at 15% 82%, rgba(111,139,95,0.28), transparent 32%),
    radial-gradient(circle at 83% 15%, rgba(201,150,164,0.12), transparent 29%),
    linear-gradient(145deg, var(--night-soil), var(--moss-shadow) 52%, #1e2b1d);
  font-family: var(--sans);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center, transparent 36%, rgba(23,30,22,0.72) 100%),
    repeating-linear-gradient(92deg, rgba(216,211,184,0.018) 0 1px, transparent 1px 17px);
  z-index: 10;
}

.atmosphere, .fern-plane, .path-map, .mist-curtain { position: fixed; inset: 0; pointer-events: none; }
.atmosphere { z-index: 1; filter: blur(1px); transition: transform 900ms ease; }

.bokeh {
  position: absolute;
  display: block;
  border-radius: 50%;
  opacity: 0.42;
  filter: blur(14px);
  animation: bokehPulse 10s ease-in-out infinite alternate;
}
.b1 { width: 18rem; height: 18rem; left: -4%; top: 6%; background: rgba(233,244,216,0.22); }
.b2 { width: 9rem; height: 9rem; right: 18%; top: 15%; background: rgba(201,150,164,0.25); animation-delay: -2s; }
.b3 { width: 25rem; height: 25rem; right: -8%; bottom: -8%; background: rgba(111,139,95,0.22); animation-delay: -4s; }
.b4 { width: 7rem; height: 7rem; left: 44%; top: 70%; background: rgba(216,211,184,0.18); animation-delay: -5s; }
.b5 { width: 11rem; height: 11rem; left: 62%; top: 40%; background: rgba(233,244,216,0.16); animation-delay: -7s; }
.b6 { width: 6rem; height: 6rem; left: 21%; bottom: 17%; background: rgba(155,115,87,0.24); animation-delay: -1s; }

.fern-plane { z-index: 4; transition: transform 800ms ease; }
.fern {
  position: absolute;
  width: 18rem;
  height: 32rem;
  opacity: 0.22;
  background: radial-gradient(ellipse at 50% 100%, rgba(23,30,22,0.75), transparent 68%);
  transform-origin: bottom center;
}
.fern::before, .fern::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 52%;
  height: 88%;
  border-radius: 100% 0 100% 0;
  border-left: 2px solid rgba(216,211,184,0.16);
}
.fern::before { left: 28%; transform: rotate(-22deg); }
.fern::after { left: 42%; transform: rotate(24deg); }
.fern-a { left: -7rem; bottom: -7rem; transform: rotate(-16deg) scale(1.3); }
.fern-b { right: -4rem; top: 6rem; transform: rotate(144deg) scale(0.86); opacity: 0.16; }
.fern-c { left: 58%; bottom: -12rem; transform: rotate(8deg) scale(1.1); opacity: 0.13; }

.glade { position: relative; z-index: 6; width: 100vw; height: 100vh; }
.clearing {
  position: absolute;
  inset: 0;
  padding: clamp(1.4rem, 4vw, 4.8rem);
  opacity: 0;
  transform: translateY(28px) scale(0.985);
  transition: opacity 1200ms ease, transform 1200ms ease;
  display: grid;
  align-content: center;
}
.clearing.is-active { opacity: 1; transform: translateY(0) scale(1); }
.clearing:not(.is-active) { pointer-events: none; }

.small-label {
  margin: 0 0 1.2rem;
  color: rgba(233,244,216,0.62);
  font: 600 0.68rem/1.4 var(--sans);
  letter-spacing: 0.28em;
  text-transform: lowercase;
}

.wordmark {
  margin: 0;
  max-width: 7ch;
  color: var(--fern-milk);
  font: 900 clamp(5.4rem, 18vw, 18rem)/0.72 var(--display);
  letter-spacing: -0.09em;
  text-shadow: 0 0 44px rgba(233,244,216,0.08), 0 28px 0 rgba(23,30,22,0.2);
}

h2 {
  margin: 0;
  max-width: 9.5ch;
  color: var(--fern-milk);
  font: 600 clamp(4rem, 10vw, 10.5rem)/0.82 var(--display);
  letter-spacing: -0.06em;
}

.whisper {
  max-width: 31rem;
  margin: 1.4rem 0 2rem;
  color: rgba(216,211,184,0.82);
  font: italic 500 clamp(1.25rem, 2.5vw, 2rem)/1.2 var(--serif);
}
.hero-whisper { margin-left: min(34vw, 26rem); margin-top: -0.8rem; }

.invitation {
  justify-self: start;
  border: 1px solid rgba(233,244,216,0.28);
  color: var(--dew-pearl);
  background: rgba(38,54,38,0.2);
  border-radius: 999px;
  padding: 0.82rem 1.15rem;
  font: 600 0.72rem/1 var(--sans);
  letter-spacing: 0.16em;
  text-transform: lowercase;
  cursor: pointer;
  box-shadow: inset 0 0 18px rgba(233,244,216,0.05), 0 12px 36px rgba(23,30,22,0.28);
  transition: transform 450ms ease, border-color 450ms ease, background 450ms ease;
}
.invitation:hover { transform: translateY(-3px); border-color: rgba(201,150,164,0.55); background: rgba(155,115,87,0.18); }

.orb, .chance-bubble, .charm-orb {
  border-radius: 46% 54% 52% 48% / 45% 48% 52% 55%;
  border: 1px solid rgba(233,244,216,0.42);
  background: radial-gradient(circle at 32% 25%, rgba(233,244,216,0.34), rgba(201,150,164,0.08) 38%, rgba(111,139,95,0.12) 70%, rgba(23,30,22,0.08));
  box-shadow: inset -14px -18px 32px rgba(23,30,22,0.18), 0 0 30px rgba(233,244,216,0.08);
  backdrop-filter: blur(3px);
}
.orb { position: absolute; display: grid; place-items: center; color: var(--dew-pearl); font: italic 500 2rem var(--serif); animation: drift 13s ease-in-out infinite alternate; }
.orb-large { width: 12rem; height: 12rem; right: 13%; top: 16%; }
.orb-soft { width: 7rem; height: 7rem; left: 55%; bottom: 18%; animation-delay: -5s; color: rgba(233,244,216,0.75); }

.path-map { z-index: 5; width: 100vw; height: 100vh; opacity: 0.8; transition: transform 750ms ease, opacity 1000ms ease; }
.root-line, .branch { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.root-line { stroke: var(--lichen-green); stroke-width: 3.4; filter: drop-shadow(0 0 9px rgba(233,244,216,0.24)); }
.branch { stroke: rgba(216,211,184,0.55); stroke-width: 1.7; }
.node { fill: var(--mushroom-clay); opacity: 0; filter: drop-shadow(0 0 12px rgba(201,150,164,0.55)); transition: opacity 700ms ease; }
.path-map.path-awake .root-line, .path-map.path-awake .branch { animation: drawPath 5600ms ease forwards; }
.path-map.path-awake .branch-one { animation-delay: 1700ms; }
.path-map.path-awake .branch-two { animation-delay: 2500ms; }
.path-map.path-awake .branch-three { animation-delay: 3300ms; }
.path-map.path-awake .node { opacity: 1; transition-delay: 3100ms; }

.clearing-path { padding-left: 13vw; align-content: end; padding-bottom: 10vh; }
.clearing-bubbles { align-content: center; justify-items: end; text-align: right; padding-right: 9vw; }
.clearing-charm { place-items: center; text-align: center; }
.clearing-charm h2 { max-width: 10ch; }

.capsule {
  position: absolute;
  min-width: 5rem;
  padding: 0.52rem 1rem;
  border-radius: 999px;
  color: var(--dew-pearl);
  border: 1px solid rgba(233,244,216,0.28);
  background: rgba(23,30,22,0.34);
  font: italic 500 1.35rem var(--serif);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 800ms ease, transform 800ms ease;
}
.clearing-path.is-active .capsule { opacity: 1; transform: translateY(0); }
.cloud-c1 { left: 24%; top: 26%; transition-delay: 1800ms; }
.cloud-c2 { right: 22%; top: 36%; transition-delay: 2600ms; }
.cloud-c3 { left: 55%; bottom: 16%; transition-delay: 3400ms; }

.bubble-field { position: absolute; inset: 0; pointer-events: none; }
.chance-bubble {
  position: absolute;
  display: grid;
  place-items: center;
  width: clamp(5rem, 10vw, 8rem);
  height: clamp(5rem, 10vw, 8rem);
  color: var(--dew-pearl);
  font: italic 500 1.55rem var(--serif);
  cursor: pointer;
  pointer-events: auto;
  animation: drift 11s ease-in-out infinite alternate;
}
.chance-bubble.is-open { background: radial-gradient(circle at 30% 22%, rgba(233,244,216,0.46), rgba(201,150,164,0.22) 42%, rgba(111,139,95,0.16)); transform: scale(1.08); }
.cb1 { left: 10%; top: 18%; }
.cb2 { left: 31%; bottom: 13%; animation-delay: -4s; }
.cb3 { right: 14%; top: 12%; animation-delay: -8s; }
.cb4 { left: 55%; top: 52%; animation-delay: -2s; }
.bubble-message { color: var(--foxglove-blush); font: italic 500 2rem var(--serif); min-height: 2.5rem; }

.final-charm { position: relative; width: 17rem; height: 14rem; margin: 1rem auto 2rem; }
.charm-orb { position: absolute; left: 50%; top: 35%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 7.5rem; height: 7.5rem; color: var(--dew-pearl); font: italic 500 1.9rem var(--serif); }
.charm-thread { position: absolute; left: 12%; right: 12%; top: 55%; height: 1px; background: linear-gradient(90deg, transparent, var(--lichen-green), var(--mushroom-clay), transparent); box-shadow: 0 0 12px rgba(233,244,216,0.2); }

.mist-curtain { z-index: 8; background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(233,244,216,0.05), transparent 24%); mix-blend-mode: screen; transition: opacity 500ms ease; }
.mist-curtain.veil { opacity: 0.84; background: rgba(216,211,184,0.08); }

@keyframes drawPath { to { stroke-dashoffset: 0; } }
@keyframes bokehPulse { from { transform: translate3d(0,0,0) scale(0.95); opacity: 0.25; } to { transform: translate3d(18px,-22px,0) scale(1.08); opacity: 0.5; } }
@keyframes drift { from { translate: 0 0; border-radius: 46% 54% 52% 48% / 45% 48% 52% 55%; } to { translate: 14px -20px; border-radius: 56% 44% 45% 55% / 52% 42% 58% 48%; } }

@media (max-width: 760px) {
  .hero-whisper { margin-left: 0; margin-top: 1.2rem; }
  .clearing-path, .clearing-bubbles { padding-left: 1.4rem; padding-right: 1.4rem; text-align: left; justify-items: start; }
  .orb-large { right: -2rem; top: 8rem; }
  .orb-soft { left: 5%; bottom: 11%; }
  .capsule { font-size: 1.05rem; }
}