/* Mysterious forest theme.
   Loaded after each page's own <style>, so it only overrides colors and adds
   decoration. Remove the <link href="forest.css"> line to get the original look back. */

:root {
  --esp: #13221a; /* night forest */
  --parch: #e6ece0; /* morning mist */
  --gold: #c9b878; /* firefly / lichen */
  --clay: #3f6b4e; /* moss */
  --taupe: #66756a;
  --sand: #b4c3b0;
  --text: #16231c;
  --ww: #f4f7f0;
  --tint: #d8e2d2;
  --firefly: 214, 226, 140;
}

body {
  background: var(--parch);
}

/* Shared borders were hard-coded in the original warm gold */
nav,
footer {
  border-color: rgba(201, 184, 120, 0.3);
}
.card,
.week {
  border-color: rgba(201, 184, 120, 0.5);
}
.card {
  box-shadow: 0 8px 24px rgba(19, 34, 26, 0.06);
}
.checks li,
details {
  border-color: rgba(63, 107, 78, 0.22);
}
.gallery figure {
  box-shadow: 0 10px 30px rgba(19, 34, 26, 0.18);
}
.btn:hover {
  background: #325a40;
}
.sample {
  background: linear-gradient(160deg, #1b3125, var(--esp));
}

/* Dark sections become a forest at night */
.dark {
  background:
    radial-gradient(
      ellipse 60% 50% at 80% 0%,
      rgba(201, 184, 120, 0.12),
      transparent 70%
    ),
    linear-gradient(180deg, #0e1913 0%, var(--esp) 55%, #1a3024 100%);
  position: relative;
  overflow: hidden;
}
.dark > .wrap {
  position: relative;
  z-index: 2;
}

/* Tree line along the bottom of the hero and the final call to action */
.hero,
.final {
  padding-bottom: 170px;
}
.hero::after,
.final::after,
.forest-floor::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 150px;
  background: url("images/treeline.svg") repeat-x bottom / 480px 150px;
  pointer-events: none;
  z-index: 1;
}

/* Mist drifting low between the trees */
.dark::before {
  content: "";
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: 0;
  height: 220px;
  background:
    radial-gradient(
      ellipse 40% 60% at 25% 80%,
      rgba(200, 215, 200, 0.12),
      transparent 70%
    ),
    radial-gradient(
      ellipse 35% 55% at 75% 85%,
      rgba(200, 215, 200, 0.1),
      transparent 70%
    );
  pointer-events: none;
  z-index: 1;
  animation: mist-drift 28s ease-in-out infinite alternate;
}

/* The original "stars" become glowing fireflies */
.stars {
  z-index: 1;
  background-image:
    radial-gradient(
      2.5px 2.5px at 12% 38%,
      rgba(var(--firefly), 0.9),
      transparent
    ),
    radial-gradient(2px 2px at 30% 70%, rgba(var(--firefly), 0.7), transparent),
    radial-gradient(
      3px 3px at 48% 52%,
      rgba(var(--firefly), 0.85),
      transparent
    ),
    radial-gradient(2px 2px at 62% 78%, rgba(var(--firefly), 0.6), transparent),
    radial-gradient(
      2.5px 2.5px at 88% 42%,
      rgba(var(--firefly), 0.8),
      transparent
    ),
    radial-gradient(2px 2px at 93% 66%, rgba(var(--firefly), 0.6), transparent),
    radial-gradient(2px 2px at 6% 84%, rgba(var(--firefly), 0.7), transparent);
  filter: drop-shadow(0 0 4px rgba(var(--firefly), 0.9));
  animation: firefly-glow 5s ease-in-out infinite alternate;
}

@keyframes firefly-glow {
  0% {
    opacity: 0.35;
    transform: translate(0, 0);
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.55;
    transform: translate(6px, -10px);
  }
}
@keyframes mist-drift {
  from {
    transform: translateX(-4%);
  }
  to {
    transform: translateX(4%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .stars,
  .dark::before {
    animation: none;
  }
}

/* Thank-you page: the whole page is the forest */
body.forest-floor {
  background: linear-gradient(180deg, #0e1913 0%, var(--esp) 60%, #1a3024 100%);
  position: relative;
  padding-bottom: 170px;
}
body.forest-floor .box {
  position: relative;
  z-index: 2;
  background: rgba(14, 25, 19, 0.6);
  border-color: rgba(201, 184, 120, 0.4);
}
body.forest-floor .moon {
  box-shadow: 0 0 40px rgba(var(--firefly), 0.45);
}

/* Terms page uses hard-coded colors, so target them directly */
body.terms {
  background: var(--parch);
  color: var(--text);
}
body.terms h1,
body.terms h2 {
  color: var(--esp);
}
body.terms h2 {
  border-color: rgba(63, 107, 78, 0.35);
}
body.terms a {
  color: var(--clay);
}
body.terms .fill {
  background: var(--ww);
  border-color: var(--clay);
}