/* ============================================================
   ANIMATIONS — Keyframes, page-load sequence classes,
   scroll-reveal states, and micro-interaction transitions.
   Built in Phase 9 (Animation phase).
   ============================================================ */

/* ----------------------------------------------------------
   PAGE LOAD SEQUENCE — Phase 3
   Classes applied by main.js with staggered setTimeout delays:
     0ms   → .anim-fade-in   (header)
     100ms → .anim-slide-up  (hero eyebrow)
     200ms → .anim-slide-up  (hero heading)
     500ms → .anim-fade-in   (hero subtitle)
     700ms → .anim-fade-in   (hero CTAs)
     900ms → .anim-scale-in  (hero image wrap)
   All use --ease-out-expo: cubic-bezier(0.22, 1, 0.36, 1)

   Elements start in the hidden state.
   main.js adds .is-animated after each delay, which triggers
   the transition to the revealed state.

   Note: .anim-scale-in targets .hero__image-wrap (the wrapper).
   The photo's own rotate(-2deg) transform is unaffected because
   it lives on the child element, not the wrapper.
   ---------------------------------------------------------- */

/* Initial hidden state — set before first paint */
.anim-fade-in,
.anim-slide-up,
.anim-scale-in {
  opacity: 0;
}

.anim-slide-up {
  transform: translateY(20px);
}

.anim-scale-in {
  transform: scale(0.96);
}

/* Revealed state — transition activates when .is-animated is added */
.anim-fade-in.is-animated {
  opacity: 1;
  transition: opacity var(--dur-slow) var(--ease-out-expo);
}

.anim-slide-up.is-animated {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity   var(--dur-slow) var(--ease-out-expo),
    transform var(--dur-slow) var(--ease-out-expo);
}

.anim-scale-in.is-animated {
  opacity: 1;
  transform: scale(1);
  transition:
    opacity   var(--dur-slow) var(--ease-out-expo),
    transform var(--dur-slow) var(--ease-out-expo);
}

/* ----------------------------------------------------------
   SCROLL REVEAL
   Base state — hidden. Toggled to .is-revealed by scroll-reveal.js.
   Children stagger via --reveal-index CSS custom property.
   ---------------------------------------------------------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 350ms var(--ease-out-expo),
    transform 350ms var(--ease-out-expo);
  transition-delay: calc(var(--reveal-index, 0) * 40ms);
}

[data-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ----------------------------------------------------------
   KEYFRAMES
   Phase 9+
   ---------------------------------------------------------- */

/* Slow rotation — manifesto sun icon (20s), hero sun (60s) */
@keyframes spin-slow {
  to { transform: rotate(360deg); }
}

/* Map pin pulse — location section */
@keyframes pulse {
  0%, 100% { transform: scale(1);    opacity: 1;   }
  50%       { transform: scale(1.15); opacity: 0.6; }
}

/* Manifesto marquee — mobile only.
   Track contains two identical paragraphs; animating to -50%
   moves exactly one paragraph width, creating a seamless loop. */
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}