/* --- Splash: standing inside the forest at dusk --- */

:root {
  --sky-top: #060c22;
  --sky-mid: #0f1c40;
  --sky-horizon: #1c3550;
  --glow-warm: #ffe27a;
  --glow-cool: #c7f39a;
  --glow-orange: #ffb56a;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: #05070f;
  color: #e8e6d8;
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  overflow: hidden;
}

.scene {
  position: fixed;
  inset: 0;
  overflow: hidden;
}

.sky {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    var(--sky-top)     0%,
    var(--sky-mid)     55%,
    var(--sky-horizon) 100%);
  z-index: 0;
}

/* --- Moon: sits low-center, partially covered by the canopy above --- */

.moon {
  position: absolute;
  top: 14vh;
  left: 50%;
  transform: translateX(-50%);
  width: 110px;
  height: 110px;
  display: block;
  cursor: default; /* no tell */
  filter: drop-shadow(0 0 24px rgba(255, 246, 213, 0.35));
  transition: filter 240ms ease;
  z-index: 1;
}
.moon svg { width: 100%; height: 100%; display: block; }
.moon:hover { filter: drop-shadow(0 0 32px rgba(255, 246, 213, 0.55)); }

/* --- Forest + ambient layers (interleaved for depth) --- */

.forest, .ambient {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.forest svg { display: block; width: 100%; height: 100%; }

.forest--far   { z-index: 2; }
.ambient--far  { z-index: 3; }
.forest--mid   { z-index: 4; }
.ambient--mid  { z-index: 5; }
.forest--near  { z-index: 6; }
.ambient--near { z-index: 7; }

/* --- Ambient fireflies (background layers, non-interactive) --- */

.ambient span {
  position: absolute;
  border-radius: 50%;
  background: var(--glow-warm);
  animation:
    blink var(--blink, 6s) ease-in-out infinite,
    drift var(--drift, 60s) ease-in-out infinite alternate;
  animation-delay: var(--blink-delay, 0s), var(--drift-delay, 0s);
  opacity: 0;
  will-change: opacity, transform;
}
.ambient span.cool { background: var(--glow-cool); }

@keyframes blink {
  0%, 100% { opacity: 0; box-shadow: none; }
  10%      { opacity: 0.2; }
  50% {
    opacity: 1;
    box-shadow:
      0 0 6px  var(--glow, #ffe27a),
      0 0 14px var(--glow, #ffe27a),
      0 0 28px rgba(255, 226, 122, 0.4);
  }
  90%      { opacity: 0.2; }
}

@keyframes drift {
  0%   { transform: translate(0, 0); }
  100% { transform: translate(var(--drift-x, 20px), var(--drift-y, -30px)); }
}

/* --- Character fireflies (built and animated by JS) --- */

.characters { position: absolute; inset: 0; pointer-events: none; z-index: 8; }

.firefly {
  position: absolute;
  will-change: transform;
  filter: drop-shadow(0 0 12px rgba(255, 226, 122, 0.55));
}
/* Let the abdomen glow gradient spill outside the SVG viewBox */
.firefly svg { overflow: visible; }
.firefly.cool   { filter: drop-shadow(0 0 12px rgba(199, 243, 154, 0.5)); }
.firefly.orange { filter: drop-shadow(0 0 12px rgba(255, 181, 106, 0.55)); }

/* --- Tagline --- */

.tagline {
  position: absolute;
  bottom: 5vh;
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  font-style: italic;
  font-size: clamp(18px, 2.4vw, 26px);
  color: rgba(232, 230, 216, 0.72);
  letter-spacing: 0.02em;
  pointer-events: none;
  text-shadow: 0 1px 12px rgba(0,0,0,0.7);
  z-index: 10;
}