/* ============================================================
   Forest scene — a hand-built layered illustration (sky, soft sun,
   three pine-treeline layers) for the landing hero, plus the
   drifting-leaf particle field used on every page. Pure CSS/SVG —
   no WebGL, so it always renders correctly and cheaply.
   ============================================================ */

:root,
:root[data-theme="dark"] {
  --sky-top: #0c1913;
  --sky-bottom: #23392a;
  --sun-color: #e8b86d;
  --forest-back: #1c2e22;
  --forest-mid: #16241b;
  --forest-front: #0e1912;
}
:root[data-theme="light"] {
  --sky-top: #cfe3d6;
  --sky-bottom: #f6ecd4;
  --sun-color: #f0b25e;
  --forest-back: #a9c2ac;
  --forest-mid: #6f9271;
  --forest-front: #3f6b4a;
}

/* ---- Hero illustration (landing page only) ---------------------------- */
#forest-scene {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.forest-sky {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-bottom) 100%);
}
.forest-sun {
  position: absolute;
  left: 50%;
  bottom: 30vh;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  transform: translateX(-50%);
  background: radial-gradient(circle, var(--sun-color) 0%, transparent 70%);
  opacity: 0.55;
  filter: blur(2px);
}
.forest-layer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  display: block;
}
.forest-layer-back path { fill: var(--forest-back); }
.forest-layer-mid path { fill: var(--forest-mid); }
.forest-layer-front path { fill: var(--forest-front); }

/* ---- Drifting leaves (every page) --------------------------------------- */
#leaf-field {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.leaf {
  position: absolute;
  top: -5vh;
  border-radius: 0% 100% 0% 100% / 0% 100% 0% 100%;
  animation: leafDrift linear infinite;
  will-change: transform;
}
@keyframes leafDrift {
  0%   { transform: translate(0, -10vh) rotate(0deg); }
  25%  { transform: translate(3vw, 30vh) rotate(90deg); }
  50%  { transform: translate(-2vw, 55vh) rotate(180deg); }
  75%  { transform: translate(4vw, 80vh) rotate(270deg); }
  100% { transform: translate(0, 112vh) rotate(360deg); }
}