/* ==========================================================================
   Animation Toolkit (migrated from WPCodeBox)
   Scroll-triggered animations using IntersectionObserver
   ========================================================================== */

/* Base animation states */
.anim-fade-up,
.anim-fade-in,
.anim-fade-down,
.anim-slide-left,
.anim-slide-right,
.anim-scale-in,
.anim-scale-up,
.anim-blur-in {
    opacity: 0;
    transition-property: opacity, transform, filter;
    transition-duration: .6s;
    transition-timing-function: cubic-bezier(0.25, .46, .45, .94);
    will-change: opacity, transform;
}

/* Individual animation transforms */
.anim-fade-up { transform: translateY(28px); }
.anim-fade-in { transform: none; }
.anim-fade-down { transform: translateY(-28px); }
.anim-slide-left { transform: translateX(40px); }
.anim-slide-right { transform: translateX(-40px); }
.anim-scale-in { transform: scale(0.92); }
.anim-scale-up { transform: scale(0.8); }
.anim-blur-in { transform: translateY(12px); filter: blur(8px); }

/* Visible states */
.anim-fade-up.anim-visible,
.anim-fade-down.anim-visible,
.anim-slide-left.anim-visible,
.anim-slide-right.anim-visible {
    opacity: 1;
    transform: translateY(0) translateX(0);
}

.anim-fade-in.anim-visible {
    opacity: 1;
}

.anim-scale-in.anim-visible,
.anim-scale-up.anim-visible {
    opacity: 1;
    transform: scale(1);
}

.anim-blur-in.anim-visible {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

/* ---------- Stagger Delays ---------- */

/* Normal stagger (80ms intervals) */
.anim-stagger > :nth-child(1) { transition-delay: 0ms; }
.anim-stagger > :nth-child(2) { transition-delay: 80ms; }
.anim-stagger > :nth-child(3) { transition-delay: 160ms; }
.anim-stagger > :nth-child(4) { transition-delay: 240ms; }
.anim-stagger > :nth-child(5) { transition-delay: 320ms; }
.anim-stagger > :nth-child(6) { transition-delay: 400ms; }
.anim-stagger > :nth-child(7) { transition-delay: 480ms; }
.anim-stagger > :nth-child(8) { transition-delay: 560ms; }
.anim-stagger > :nth-child(9) { transition-delay: 640ms; }
.anim-stagger > :nth-child(10) { transition-delay: 720ms; }
.anim-stagger > :nth-child(11) { transition-delay: 800ms; }
.anim-stagger > :nth-child(12) { transition-delay: 880ms; }

/* Tight stagger (50ms intervals) */
.anim-stagger-tight > :nth-child(1) { transition-delay: 0ms; }
.anim-stagger-tight > :nth-child(2) { transition-delay: 50ms; }
.anim-stagger-tight > :nth-child(3) { transition-delay: 100ms; }
.anim-stagger-tight > :nth-child(4) { transition-delay: 150ms; }
.anim-stagger-tight > :nth-child(5) { transition-delay: 200ms; }
.anim-stagger-tight > :nth-child(6) { transition-delay: 250ms; }
.anim-stagger-tight > :nth-child(7) { transition-delay: 300ms; }
.anim-stagger-tight > :nth-child(8) { transition-delay: 350ms; }
.anim-stagger-tight > :nth-child(9) { transition-delay: 400ms; }
.anim-stagger-tight > :nth-child(10) { transition-delay: 450ms; }
.anim-stagger-tight > :nth-child(11) { transition-delay: 500ms; }
.anim-stagger-tight > :nth-child(12) { transition-delay: 550ms; }

/* Wide stagger (120ms intervals) */
.anim-stagger-wide > :nth-child(1) { transition-delay: 0ms; }
.anim-stagger-wide > :nth-child(2) { transition-delay: 120ms; }
.anim-stagger-wide > :nth-child(3) { transition-delay: 240ms; }
.anim-stagger-wide > :nth-child(4) { transition-delay: 360ms; }
.anim-stagger-wide > :nth-child(5) { transition-delay: 480ms; }
.anim-stagger-wide > :nth-child(6) { transition-delay: 600ms; }
.anim-stagger-wide > :nth-child(7) { transition-delay: 720ms; }
.anim-stagger-wide > :nth-child(8) { transition-delay: 840ms; }
.anim-stagger-wide > :nth-child(9) { transition-delay: 960ms; }
.anim-stagger-wide > :nth-child(10) { transition-delay: 1080ms; }
.anim-stagger-wide > :nth-child(11) { transition-delay: 1200ms; }
.anim-stagger-wide > :nth-child(12) { transition-delay: 1320ms; }

/* ---------- Duration Modifiers ---------- */
.anim-fast { transition-duration: .3s !important; }
.anim-slow { transition-duration: .8s !important; }

/* ---------- Delay Modifiers ---------- */
.anim-delay-1 { transition-delay: 100ms !important; }
.anim-delay-2 { transition-delay: 200ms !important; }
.anim-delay-3 { transition-delay: 300ms !important; }
.anim-delay-4 { transition-delay: 400ms !important; }
.anim-delay-5 { transition-delay: 500ms !important; }

/* ---------- Easing Modifiers ---------- */
.anim-ease-spring { transition-timing-function: cubic-bezier(0.34, 1.56, .64, 1) !important; }
.anim-ease-bounce { transition-timing-function: cubic-bezier(0.68, -.55, .27, 1.55) !important; }
.anim-ease-smooth { transition-timing-function: cubic-bezier(0.16, 1, .3, 1) !important; }

/* ---------- Accessibility ---------- */
@media (prefers-reduced-motion: reduce) {
    .anim-fade-up,
    .anim-fade-in,
    .anim-fade-down,
    .anim-slide-left,
    .anim-slide-right,
    .anim-scale-in,
    .anim-scale-up,
    .anim-blur-in {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
    }

    .anim-stagger > *,
    .anim-stagger-tight > *,
    .anim-stagger-wide > * {
        transition-delay: 0ms !important;
    }
}