/* Bird flock — scared scatter from center, repeats every 18s */
.bird-flock {
  position: fixed;
  top: 25%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  width: 400px;
  height: 300px;
  overflow: hidden;
  animation: flock-appear 18s ease-out infinite;
}

.bird-flock svg {
  width: 400px;
  height: 300px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
  overflow: visible;
}

@keyframes flock-appear {
  0%, 100% { opacity: 0; }
  2% { opacity: 1; }
  15% { opacity: 1; }
  18%, 100% { opacity: 0; }
}

.bird-flock .scatter-bird {
  animation: bird-scatter 2.5s ease-out infinite;
  animation-delay: var(--delay);
  opacity: 0;
}

@keyframes bird-scatter {
  0% { transform: translate(var(--sx), var(--sy)) scale(0.7); opacity: 0; }
  10% { opacity: 1; }
  60% { opacity: 1; }
  85%, 100% { transform: translate(calc(var(--sx) + var(--dx)), calc(var(--sy) + var(--dy))) scale(1.1); opacity: 0; }
}

.bird-flock .wing-l, .bird-flock .wing-r {
  animation: wing-beat 0.2s ease-in-out infinite alternate;
  transform-box: fill-box;
}

.bird-flock .wing-l { transform-origin: right center; }
.bird-flock .wing-r { transform-origin: left center; animation-name: wing-beat-r; }

@keyframes wing-beat {
  0% { transform: rotate(0deg) scaleY(1); }
  100% { transform: rotate(-40deg) scaleY(0.2); }
}

@keyframes wing-beat-r {
  0% { transform: rotate(0deg) scaleY(1); }
  100% { transform: rotate(40deg) scaleY(0.2); }
}

/* Growing plants from corners */
.corner-plants {
  position: fixed;
  bottom: 0;
  pointer-events: none;
  z-index: 10;
}

.corner-plants.left { left: 0; }
.corner-plants.right { right: 0; transform: scaleX(-1); }

.corner-plants svg {
  width: 220px;
  height: 280px;
  transform-origin: bottom center;
  animation: plant-grow 3s ease-out forwards;
  transform: scaleY(0);
}

.corner-plants.right svg { animation-delay: 0.5s; }

@keyframes plant-grow {
  0% { transform: scaleY(0); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: scaleY(1); opacity: 1; }
}

/* Dark jungle hero */
.hero {
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(180deg, rgba(10,24,10,0.3) 0%, rgba(10,24,10,0.85) 100%);
  z-index: 1;
  pointer-events: none;
}

.hero .wrap { position: relative; z-index: 2; }

/* Dark section backgrounds */
.section { background: var(--forest-dark); }
.section:nth-child(even) { background: var(--forest); }

/* Dark cards */
.game-tile, .social-card, .buy-box, .insta-box {
  background: var(--tan) !important;
  border: 1px solid rgba(45, 74, 45, 0.15);
}

.game-tile-body strong, .sc-text { color: #1a2e1a !important; }
.game-tile-body span { color: #2b2a24 !important; }

/* Headings on light backgrounds need dark text */
.section .wrap > h2 { color: #1a2e1a !important; }

/* Dark-band sections: the heading sits directly on the dark section
   background (no light card), so it stays cream like the rest of the scheme.
   The peek panel went dark green Oct 13 — its heading is cream too. */
.games-section .wrap > h2, #field .wrap > h2, .peek h2 { color: var(--cream) !important; }

/* Footer dark */
.site-footer { background: var(--olive-deep); color: var(--ink-soft); }
.site-footer strong { color: var(--cream); }

/* Nav dark */
.site-header { background: rgba(10,24,10,0.95); border-bottom: 1px solid rgba(255,255,255,0.06); }
.brand, .site-nav a { color: var(--cream) !important; }