/* ===================================================================
   THEME: Forest (body.theme-forest)
   Loaded after style.css. Redefines the colour tokens and adds a
   treeline, mist and drifting fireflies to the hero.
   =================================================================== */

body.theme-forest {
  --night: #06140c;
  --plum: #123020;          /* button text colour, dark green */
  --rose: #7bc47f;          /* fern */
  --gold: #ffd86b;          /* firefly light */
  --aqua: #9fd8c4;          /* mist */
  --lilac: #c3e88d;         /* lichen */
  --ink: #f3f7ee;
  --muted: #c5d9c4;
  --glass: rgba(18, 48, 32, 0.45);
  --glass-border: rgba(195, 232, 141, 0.2);
  --shadow: 0 24px 60px rgba(0, 0, 0, 0.45);

  background:
    radial-gradient(900px 600px at 50% -5%, rgba(74, 140, 92, 0.35), transparent 65%),
    radial-gradient(800px 500px at 0% 100%, rgba(40, 90, 60, 0.4), transparent 60%),
    linear-gradient(180deg, #0d2418 0%, #06140c 70%, #030b06 100%);
  background-attachment: fixed;
}

/* The soft orbs become faint green light. */
body.theme-forest .bokeh span { opacity: 0.18; }

/* ---------------------------------------------------------------
   Hero scenery
   --------------------------------------------------------------- */
.forest-trees {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 220px;
  z-index: -1;
  pointer-events: none;
}
.forest-trees svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Low mist that drifts sideways across the treeline. */
.forest-mist {
  position: absolute;
  left: -20%;
  right: -20%;
  bottom: 40px;
  height: 120px;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 50%, rgba(200, 235, 215, 0.18), transparent 70%);
  animation: mist 22s ease-in-out infinite alternate;
}
@keyframes mist {
  to { transform: translateX(8%); }
}

/* Fireflies: small glowing dots that drift and pulse. */
.fireflies {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.fireflies span {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff1b8;
  box-shadow: 0 0 10px 3px rgba(255, 216, 107, 0.7);
  animation: flit 9s ease-in-out infinite, glow 2.8s ease-in-out infinite;
}
.fireflies span:nth-child(1)  { top: 18%; left: 8%;  animation-delay: -1s, -0.4s; }
.fireflies span:nth-child(2)  { top: 30%; left: 22%; animation-delay: -4s, -1.6s; }
.fireflies span:nth-child(3)  { top: 14%; left: 38%; animation-delay: -2s, -2.2s; }
.fireflies span:nth-child(4)  { top: 42%; left: 12%; animation-delay: -6s, -0.9s; }
.fireflies span:nth-child(5)  { top: 26%; left: 62%; animation-delay: -3s, -2.6s; }
.fireflies span:nth-child(6)  { top: 50%; left: 80%; animation-delay: -5s, -1.2s; }
.fireflies span:nth-child(7)  { top: 10%; left: 88%; animation-delay: -7s, -0.2s; }
.fireflies span:nth-child(8)  { top: 58%; left: 30%; animation-delay: -8s, -1.9s; }
.fireflies span:nth-child(9)  { top: 36%; left: 50%; animation-delay: -2.5s, -2.9s; }
.fireflies span:nth-child(10) { top: 64%; left: 68%; animation-delay: -4.5s, -0.6s; }
.fireflies span:nth-child(11) { top: 46%; left: 92%; animation-delay: -6.5s, -2.3s; }
.fireflies span:nth-child(12) { top: 22%; left: 74%; animation-delay: -9s, -1.4s; }

@keyframes flit {
  50% { transform: translate(30px, -40px); }
}
@keyframes glow {
  0%, 100% { opacity: 0.15; }
  50%      { opacity: 1; }
}

/* ---------------------------------------------------------------
   Type
   --------------------------------------------------------------- */
body.theme-forest .name {
  background: linear-gradient(90deg, #ffd86b, #c3e88d, #7bc47f, #ffd86b);
  background-size: 300% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 4px 0 rgba(4, 30, 14, 0.7)) drop-shadow(0 16px 36px rgba(123, 196, 127, 0.35));
}

body.theme-forest .section-title,
body.theme-forest .footer-name {
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.35), 0 0 30px rgba(255, 216, 107, 0.25);
}

body.theme-forest .quote {
  color: #eaf6d9;
  text-shadow: 0 4px 24px rgba(123, 196, 127, 0.35);
}

/* ---------------------------------------------------------------
   Cards and buttons
   --------------------------------------------------------------- */
body.theme-forest .glass {
  background: linear-gradient(155deg, rgba(40, 90, 60, 0.45), rgba(12, 36, 22, 0.55));
  border-color: rgba(195, 232, 141, 0.2);
}
body.theme-forest .info-icon {
  background: linear-gradient(135deg, #ffd86b, #7bc47f);
  box-shadow: 0 10px 24px rgba(123, 196, 127, 0.35);
}
body.theme-forest .info:hover {
  border-color: rgba(255, 216, 107, 0.5);
}
body.theme-forest .unit b {
  color: var(--gold);
}
body.theme-forest .btn {
  background: linear-gradient(90deg, #ffd86b, #7bc47f);
  box-shadow: 0 10px 30px rgba(123, 196, 127, 0.4);
}
body.theme-forest .btn:hover,
body.theme-forest .btn:focus-visible {
  box-shadow: 0 16px 40px rgba(123, 196, 127, 0.55);
}
body.theme-forest .btn-ghost {
  color: var(--ink);
  background: rgba(195, 232, 141, 0.08);
  border: 1px solid rgba(195, 232, 141, 0.25);
}

/* ---------------------------------------------------------------
   Phones
   --------------------------------------------------------------- */
@media (max-width: 480px) {
  .forest-trees { height: 150px; }
}