/* =============================================================================
   animate.css  —  Sitewide GSAP ScrollTrigger utility classes
   Loaded globally by the Yahrzeit Form plugin.

   HOW TO USE
   ──────────
   Add any combination of these classes to any element on the page.
   animate.js picks them up automatically on DOMContentLoaded.

   SINGLE-ELEMENT ANIMATIONS
   ─────────────────────────
   .animate-fade-up        Fade in + rise from below (most common, great default)
   .animate-fade-down      Fade in + drop from above
   .animate-fade-left      Fade in + slide from right → left
   .animate-fade-right     Fade in + slide from left  → right
   .animate-fade-in        Pure opacity fade, no movement
   .animate-scale-up       Scale from 92% → 100% while fading in
   .animate-scale-down     Scale from 108% → 100% while fading in
   .animate-blur-in        Blur-to-sharp entrance (great for images/cards)
   .animate-clip-up        Reveal with a clip-path wipe bottom → top
   .animate-clip-left      Reveal with a clip-path wipe right  → left

   CONTAINER — STAGGER CHILDREN
   ─────────────────────────────
   .stagger                Animates direct children in sequence.
                           Default: fade-up stagger. Combine with a modifier:
   .stagger-fade-in        Children fade in only (no movement)
   .stagger-scale-up       Children scale-up entrance
   .stagger-clip-up        Children clip-wipe upward

   DELAY MODIFIERS  (apply to any animated element)
   ──────────────────────────────────────────────────
   .delay-100   +0.1s
   .delay-200   +0.2s
   .delay-300   +0.3s
   .delay-400   +0.4s
   .delay-500   +0.5s
   .delay-600   +0.6s
   .delay-800   +0.8s
   .delay-1000  +1.0s

   DURATION MODIFIERS
   ──────────────────
   .duration-fast    0.45s
   .duration-normal  0.75s  (default)
   .duration-slow    1.1s
   .duration-slower  1.6s

   EASING MODIFIERS
   ────────────────
   .ease-out      power3.out  (default)
   .ease-bounce   back.out(1.4)
   .ease-elastic  elastic.out(1, 0.5)
   .ease-smooth   power1.inOut

   SCROLL TRIGGER BEHAVIOUR
   ─────────────────────────
   .once          Animate once; do NOT replay when scrolling back up (default)
   .repeat        Re-animate every time the element enters the viewport
   .scrub         Animation progress tied to scroll position (no snap)

   BRICKS BUILDER
   ──────────────
   Animations are automatically disabled in the Bricks builder.
   animate.js detects window.bricksData (only present in the builder)
   and resets all elements to visible via inline styles before bailing out.
   No extra config needed.

   EXAMPLES
   ─────────
   <h2 class="animate-clip-up duration-slow delay-200">Hello</h2>

   <ul class="stagger delay-300">
     <li>Item A</li>   ← animates at base delay
     <li>Item B</li>   ← +stagger interval
     <li>Item C</li>   ← +stagger interval × 2
   </ul>

   <section class="animate-clip-up scrub">...</section>
   ============================================================================= */


/* ── Hidden initial states ─────────────────────────────────────────────────── */

/* Elements start invisible; GSAP animates them in on scroll.
   The builder bail-out in animate.js resets these via inline styles
   so nothing is ever hidden inside the Bricks editor.              */

.animate-fade-up,
.animate-fade-down,
.animate-fade-left,
.animate-fade-right,
.animate-fade-in,
.animate-scale-up,
.animate-scale-down,
.animate-blur-in,
.animate-clip-up,
.animate-clip-left {
    opacity: 0;
    will-change: transform, opacity;
}

/* Clip animations also need overflow hidden so the wipe looks clean */
.animate-clip-up,
.animate-clip-left {
    overflow: hidden;
}

/* Stagger containers: children start hidden */
.stagger > *,
.stagger-fade-in > *,
.stagger-scale-up > *,
.stagger-clip-up > * {
    opacity: 0;
    will-change: transform, opacity;
}

/* ── After-animation: clean up will-change to free GPU memory ── */
.anim-done {
    will-change: auto;
}

/* ── Reduced-motion: skip all animations ──────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .animate-fade-up,
    .animate-fade-down,
    .animate-fade-left,
    .animate-fade-right,
    .animate-fade-in,
    .animate-scale-up,
    .animate-scale-down,
    .animate-blur-in,
    .animate-clip-up,
    .animate-clip-left,
    .stagger > *,
    .stagger-fade-in > *,
    .stagger-scale-up > *,
    .stagger-clip-up > * {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        clip-path: none !important;
        will-change: auto !important;
    }
}