/* =========================================================
   TropiRoots Madagascar — animations.css
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Animated background canopy (leaves / light) ---------- */
.bg-scene {
  position: fixed;
  inset: 0;
  z-index: -10;
  pointer-events: none;
  overflow: hidden;
  background: linear-gradient(160deg, var(--forest) 0%, var(--page-green) 55%, var(--forest-deep) 100%);
}
.bg-scene .glow {
  position: absolute;
  width: 60vw; height: 60vw;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .35;
  background: radial-gradient(circle, var(--forest-light), transparent 70%);
  animation: driftGlow 34s ease-in-out infinite;
}
.bg-scene .leaf {
  position: absolute;
  top: -8%;
  opacity: .5;
  animation-name: leafFall;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  will-change: transform;
}
.bg-scene .leaf svg { width: 100%; height: 100%; }

@keyframes leafFall {
  0%   { transform: translate(0, -10vh) rotate(0deg); }
  100% { transform: translate(var(--drift, 40px), 115vh) rotate(var(--spin, 220deg)); }
}
@keyframes driftGlow {
  0%, 100% { transform: translate(-10%, -10%) scale(1); }
  50% { transform: translate(10%, 6%) scale(1.15); }
}

/* On interior pages the scene sits behind a solid section, keep it very subtle */
.page-hero .bg-scene { display: none; }

/* ---------- Scroll line cue ---------- */
@keyframes scrollLine {
  0% { transform: scaleY(0); transform-origin: top; opacity: 0; }
  40% { transform: scaleY(1); transform-origin: top; opacity: 1; }
  60% { transform: scaleY(1); transform-origin: bottom; opacity: 1; }
  100% { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
}

/* ---------- Reveal on load / scroll (single orchestrated pass) ---------- */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.reveal.in { opacity: 1; transform: translateY(0); }

.reveal-stagger > * {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal-stagger.in > * { opacity: 1; transform: translateY(0); }
.reveal-stagger.in > *:nth-child(1) { transition-delay: .05s; }
.reveal-stagger.in > *:nth-child(2) { transition-delay: .12s; }
.reveal-stagger.in > *:nth-child(3) { transition-delay: .19s; }
.reveal-stagger.in > *:nth-child(4) { transition-delay: .26s; }
.reveal-stagger.in > *:nth-child(5) { transition-delay: .33s; }
.reveal-stagger.in > *:nth-child(6) { transition-delay: .4s; }
.reveal-stagger.in > *:nth-child(7) { transition-delay: .47s; }
.reveal-stagger.in > *:nth-child(8) { transition-delay: .54s; }

/* ---------- Hero entrance (one orchestrated sequence) ---------- */
.hero-content .eyebrow, .hero-content h1, .hero-content .lede, .hero-actions {
  opacity: 0;
  transform: translateY(26px);
  animation: heroIn .9s var(--ease) forwards;
}
.hero-content .eyebrow { animation-delay: .15s; }
.hero-content h1 { animation-delay: .3s; }
.hero-content .lede { animation-delay: .5s; }
.hero-actions { animation-delay: .68s; }
@keyframes heroIn { to { opacity: 1; transform: translateY(0); } }

/* ---------- Mobile menu panel ---------- */
.mobile-panel {
  position: fixed;
  top: 0; right: 0;
  height: 100%;
  width: min(340px, 86vw);
  background: var(--forest-deep);
  z-index: 610;
  transform: translateX(100%);
  transition: transform .5s var(--ease);
  overflow-y: auto;
}
.mobile-panel.open { transform: translateX(0); }
.mobile-overlay {
  position: fixed; inset: 0;
  background: rgba(10,20,14,.55);
  z-index: 600;
  opacity: 0; visibility: hidden;
  transition: opacity .4s ease, visibility .4s;
}
.mobile-overlay.open { opacity: 1; visibility: visible; }

/* ---------- Mobile submenu accordion ---------- */
.mobile-submenu {
  max-height: 0;
  overflow: hidden;
  transition: max-height .45s var(--ease);
}
.mobile-has-submenu.open .mobile-submenu { max-height: 600px; }
.mobile-submenu-toggle svg { transition: transform .35s var(--ease); }
.mobile-has-submenu.open .mobile-submenu-toggle svg { transform: rotate(180deg); }