/* ============================================================================
   animation.css — KEYFRAMES, REVEAL STATES & MOTION
   ----------------------------------------------------------------------------
   Every animation in the site is declared here. Nothing else animates.

   Two families live in this file:
     A) @keyframes + `.animate-*` classes — motion that plays on load/forever.
     B) Reveal states — an element's "before" state plus the class that flips it
        to its "after" state when animations.js observes it entering the viewport.

   NOTE ON THE REVEAL PATTERN
     In the original monolith the "before" states were written by JavaScript with
     `el.style.opacity = '0'` etc. They now live here as real CSS classes and
     animations.js only toggles a class. Same timings, same easings, no inline CSS.
   ========================================================================== */

/* ============================================================================
   A. KEYFRAMES
   ========================================================================== */

/* Partner logo marquee — Organism: partners-ticker */
@keyframes ticker {
    0%   { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(-100%, 0, 0); }
}

/* Mini-hero glass card entrance — Organism: mini-hero (all 7 banners) */
@keyframes fade-in-up {
    from { opacity: 0; transform: translateY(3rem); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Hand-drawn underline stroke beneath each mini-hero headline — Atom: underline-stroke */
@keyframes draw-stroke {
    from { stroke-dasharray: 0 300;   stroke-dashoffset: 0; opacity: 0; }
    to   { stroke-dasharray: 300 0;   stroke-dashoffset: 0; opacity: 0.8; }
}

/* Breathing glow on the "Join the Movement" card — Organism: program-overview */
@keyframes ambient-glow {
    0%, 100% { box-shadow: var(--shadow-ambient-min); }
    50%      { box-shadow: var(--shadow-ambient-max); }
}

/* Staggered card entrance in the news carousel — Organism: newsletter */
@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================================================
   B. ANIMATION UTILITY CLASSES
   ========================================================================== */

/* Applied to the mini-hero glass card (paired with `opacity-0 translate-y-12`
   in the markup so the element is hidden until the animation takes over). */
.animate-fade-in-up {
    animation: fade-in-up 1.2s var(--ease-cinematic) forwards;
}

/* Applied to the SVG <path> of the mini-hero underline. */
.animate-draw-stroke {
    stroke-dasharray: 300;
    animation: draw-stroke 2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    animation-delay: 0.8s;
}

/* Applied to the "Join the Movement" CTA card. */
.animate-ambient-glow {
    animation: ambient-glow 4s ease-in-out infinite;
}

/* Slow zoom-out on hover for every mini-hero background layer. */
.mini-hero-bg {
    transition: transform 3s ease;
}

/* ============================================================================
   C. REVEAL STATES
   ========================================================================== */

/* ---- C1. Generic fade-up ------------------------------------------------
   Used by: Hero content, About, Engagement cards, FAQ header, Philosophy card.
   animations.js adds `.visible` via the global IntersectionObserver.        */
.fade-up {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s var(--ease-out-expo),
                transform 0.8s var(--ease-out-expo);
}

.fade-up.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ---- C2. Program Overview cards ----------------------------------------
   Organism: program-overview. animations.js adds `.visible` with a 100ms
   stagger per card index.                                                   */
.reveal-card {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s var(--ease-out-expo),
                transform 0.8s var(--ease-out-expo);
}

.reveal-card.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ---- C3. Volunteer Introduction ----------------------------------------
   Organism: volunteer-intro. `.active` is added on intersection.            */
.reveal-on-scroll {
    opacity: 0;
    transform: translate3d(0, 40px, 0);
    transition: all 0.8s var(--ease-out-quint);
}

.reveal-on-scroll.active {
    opacity: 1 !important;
    transform: translate3d(0, 0, 0) !important;
}

/* ---- C4. Initiatives ----------------------------------------------------
   Organism: initiatives (header, three cards, footer stats).                */
.reveal-item {
    opacity: 0;
    transform: translateY(40px);
    transition: all 1.2s var(--ease-cinematic);
}

.reveal-item.active {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* ---- C5. Editorial project-category cards -------------------------------
   Organism: editorial-categories. Revealed with a 150ms stagger per card.   */
.editorial-reveal-card {
    opacity: 0;
    transform: translateY(3rem);
    transition: all 1s cubic-bezier(0, 0, 0.2, 1);
}

.editorial-reveal-card.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ---- C6. Strategic Roadmap tiers ----------------------------------------
   Organism: strategic-roadmap.                                              */
.roadmap-reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: all 1s var(--ease-out-quint);
}

.roadmap-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ---- C7. Tri Hita Karana staggered rows ---------------------------------
   Organism: philosophy. The container gets `.reveal-active`, which releases
   the three child rows that start at `opacity-0 translate-x-8`.             */
.stagger-item {
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.reveal-active {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

.reveal-active .stagger-item {
    opacity: 1 !important;
    transform: translateX(0) !important;
}

/* ---- C8. News article cards ---------------------------------------------
   Organism: newsletter. These animate immediately on mount (no observer),
   cascading 200ms apart.                                                    */
.article-card {
    opacity: 0;
    transform: translateY(40px);
    animation: fadeInUp 0.8s var(--ease-cinematic) forwards;
}

.article-card:nth-child(2) { animation-delay: 0.2s; }
.article-card:nth-child(3) { animation-delay: 0.4s; }

/* ---- C9. Transition-delay helpers ---------------------------------------
   Replaces the former inline `style="transition-delay: 200ms"` attributes.  */
.delay-100 { transition-delay: 100ms !important; }
.delay-200 { transition-delay: 200ms !important; }
.delay-300 { transition-delay: 300ms !important; }
.delay-400 { transition-delay: 400ms !important; }

/* ---- C10. Glass card hover mechanics ------------------------------------
   The 3D tilt transform itself is written by animations.js on mousemove;
   this only declares how that transform eases.                              */
.glass-card {
    transition: transform 0.15s ease-out,
                box-shadow 0.4s ease,
                border-color 0.4s ease;
    will-change: transform;
}