/* ==========================================================================
   PGIS — animations.css
   Keyframes, transitions, and scroll-reveal classes.
   Bulk of this file is populated in Phase 6 (Animation & Interaction
   Polish) once real content exists across all pages.

   The reduced-motion override below ships now rather than in Phase 6:
   it's safety infrastructure (TRD §5), not decorative polish, and every
   phase after this one is required to respect it as animation is added.
   ========================================================================== */

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

/* --------------------------------------------------------------------------
   Scroll-reveal (js/animations.js, IntersectionObserver-driven)

   IMPORTANT: [data-reveal] elements are NOT hidden by this attribute
   alone — only .reveal-pending (added by JS after confirming
   IntersectionObserver support) hides them. If JS fails to load or
   run, content stays visible by default (AppFlow §6 JS-failure rule).
   -------------------------------------------------------------------------- */

[data-reveal].reveal-pending {
  opacity: 0;
  transform: translateY(24px);
}

[data-reveal] {
  transition: opacity var(--transition-base), transform var(--transition-base);
}

[data-reveal].reveal-visible {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------------------------
   Hero entrance sequence (UIUX-Plan §6 Hero spec):
   background is already in place → clouds drift in → heading fades
   upward → CTAs appear → decorative elements begin a gentle floating
   loop. Pure CSS so it plays even if JS never loads.
   -------------------------------------------------------------------------- */

@keyframes hero-fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: none; }
}

@keyframes hero-drift-in {
  from { opacity: 0; transform: translateX(-16px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes hero-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

@keyframes hero-drift-loop {
  0% { transform: translateX(0); }
  100% { transform: translateX(20px); }
}

.hero__heading {
  animation: hero-fade-up 700ms ease both;
}

.hero__subheading {
  animation: hero-fade-up 700ms ease 150ms both;
}

.hero__cta-group {
  animation: hero-fade-up 700ms ease 300ms both;
}

.hero__sun {
  animation: hero-drift-in 800ms ease both, hero-float 6s ease-in-out 800ms infinite;
}

.hero__cloud {
  animation: hero-drift-in 700ms ease both, hero-drift-loop 8s ease-in-out 700ms infinite alternate;
}

.hero__cloud--2 { animation-delay: 150ms, 1500ms; }
.hero__cloud--3 { animation-delay: 300ms, 2200ms; }

.hero__star,
.hero__balloon {
  animation: hero-fade-up 600ms ease both, hero-float 5s ease-in-out 600ms infinite;
}

.hero__star--2,
.hero__balloon--2 {
  animation-delay: 450ms, 1400ms;
}