/**
 * Section Animations — aligned with assets/js/animation-system.js
 *
 * Config (keep in sync with animation-system.js `i` map):
 *   fade-up/down/left/right: translate ±12px (Tailwind translate-y/x-3)
 *   scale-in: 0.98, scale-soft: 0.99, blur-in: 4px
 * Durations ~700–900ms, easing matches ease-smooth feel.
 *
 * Usage:
 * 1. Add "section-animate-in" to section wrapper
 * 2. Children: "animate-on-scroll" + one of:
 *    animate-fade-up | animate-fade-down | animate-fade-left | animate-fade-right |
 *    animate-scale-in | animate-scale-soft | animate-slide-up | animate-blur-in
 * 3. Stagger: animate-stagger-1 … animate-stagger-8
 *
 * @package TeeqCore
 * @since 1.0.0
 */

:root {
    --teeq-animate-duration: 0.9s;
    --teeq-animate-duration-fast: 0.75s;
    --teeq-animate-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --teeq-animate-shift: 12px;
    --teeq-animate-slideY: 24px;
    --teeq-scale-in-from: 0.98;
    --teeq-scale-soft-from: 0.99;
    --teeq-blur-from: 4px;
}

/* ===== Keyframes ===== */
@keyframes sectionFadeUp {
    from {
        opacity: 0;
        transform: translateY(var(--teeq-animate-shift));
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes sectionFadeDown {
    from {
        opacity: 0;
        transform: translateY(calc(-1 * var(--teeq-animate-shift)));
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes sectionFadeLeft {
    from {
        opacity: 0;
        transform: translateX(calc(-1 * var(--teeq-animate-shift)));
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes sectionFadeRight {
    from {
        opacity: 0;
        transform: translateX(var(--teeq-animate-shift));
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes sectionScaleIn {
    from {
        opacity: 0;
        transform: scale(var(--teeq-scale-in-from));
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes sectionScaleSoft {
    from {
        opacity: 0;
        transform: scale(var(--teeq-scale-soft-from));
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes sectionSlideUp {
    from {
        opacity: 0;
        transform: translateY(var(--teeq-animate-slideY));
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes sectionBlurIn {
    from {
        opacity: 0;
        filter: blur(var(--teeq-blur-from));
    }

    to {
        opacity: 1;
        filter: blur(0);
    }
}

/* RTL: horizontal variants swap (match animation-system.js); must match .is-visible specificity */
html[dir="rtl"] .animate-on-scroll.animate-fade-left.is-visible,
html[dir="rtl"] .animate-on-scroll.animate-fade-left.animate-in {
    animation-name: sectionFadeRight;
}

html[dir="rtl"] .animate-on-scroll.animate-fade-right.is-visible,
html[dir="rtl"] .animate-on-scroll.animate-fade-right.animate-in {
    animation-name: sectionFadeLeft;
}

/**
 * Do not set global .animate-on-scroll.is-visible { opacity; transform } — it overrides
 * horizontal/scale/blur animations and fights animation-system.js Tailwind classes.
 */

/* Initial offset before run (optional; JS usually applies Tailwind initial) */
.animate-on-scroll.animate-fade-up {
    transform: translateY(var(--teeq-animate-shift));
}

.animate-on-scroll.animate-fade-up.is-visible,
.animate-on-scroll.animate-fade-up.animate-in {
    animation: sectionFadeUp var(--teeq-animate-duration) var(--teeq-animate-ease) forwards;
}

.animate-on-scroll.animate-fade-down {
    transform: translateY(calc(-1 * var(--teeq-animate-shift)));
}

.animate-on-scroll.animate-fade-down.is-visible,
.animate-on-scroll.animate-fade-down.animate-in {
    animation: sectionFadeDown var(--teeq-animate-duration) var(--teeq-animate-ease) forwards;
}

.animate-on-scroll.animate-fade-left {
    transform: translateX(calc(-1 * var(--teeq-animate-shift)));
}

.animate-on-scroll.animate-fade-left.is-visible,
.animate-on-scroll.animate-fade-left.animate-in {
    animation: sectionFadeLeft var(--teeq-animate-duration) var(--teeq-animate-ease) forwards;
}

.animate-on-scroll.animate-fade-right {
    transform: translateX(var(--teeq-animate-shift));
}

.animate-on-scroll.animate-fade-right.is-visible,
.animate-on-scroll.animate-fade-right.animate-in {
    animation: sectionFadeRight var(--teeq-animate-duration) var(--teeq-animate-ease) forwards;
}

.animate-on-scroll.animate-scale-in {
    transform: scale(var(--teeq-scale-in-from));
}

.animate-on-scroll.animate-scale-in.is-visible,
.animate-on-scroll.animate-scale-in.animate-in {
    animation: sectionScaleIn var(--teeq-animate-duration) var(--teeq-animate-ease) forwards;
}

.animate-on-scroll.animate-scale-soft {
    transform: scale(var(--teeq-scale-soft-from));
}

.animate-on-scroll.animate-scale-soft.is-visible,
.animate-on-scroll.animate-scale-soft.animate-in {
    animation: sectionScaleSoft var(--teeq-animate-duration) var(--teeq-animate-ease) forwards;
}

.animate-on-scroll.animate-slide-up {
    transform: translateY(var(--teeq-animate-slideY));
}

.animate-on-scroll.animate-slide-up.is-visible,
.animate-on-scroll.animate-slide-up.animate-in {
    animation: sectionSlideUp 1s var(--teeq-animate-ease) forwards;
}

.animate-on-scroll.animate-blur-in.is-visible,
.animate-on-scroll.animate-blur-in.animate-in {
    animation: sectionBlurIn var(--teeq-animate-duration-fast) var(--teeq-animate-ease) forwards;
}

/* ===== Stagger delays (works with CSS animation or transition) ===== */
.animate-stagger-1 {
    animation-delay: 0.1s;
    transition-delay: 0.1s;
    animation-fill-mode: both;
}

.animate-stagger-2 {
    animation-delay: 0.2s;
    transition-delay: 0.2s;
    animation-fill-mode: both;
}

.animate-stagger-3 {
    animation-delay: 0.3s;
    transition-delay: 0.3s;
    animation-fill-mode: both;
}

.animate-stagger-4 {
    animation-delay: 0.4s;
    transition-delay: 0.4s;
    animation-fill-mode: both;
}

.animate-stagger-5 {
    animation-delay: 0.5s;
    transition-delay: 0.5s;
    animation-fill-mode: both;
}

.animate-stagger-6 {
    animation-delay: 0.6s;
    transition-delay: 0.6s;
    animation-fill-mode: both;
}

.animate-stagger-7 {
    animation-delay: 0.7s;
    transition-delay: 0.7s;
    animation-fill-mode: both;
}

.animate-stagger-8 {
    animation-delay: 0.8s;
    transition-delay: 0.8s;
    animation-fill-mode: both;
}

/**
 * Section wrapper: hide children only until the section is revealed.
 * Never force opacity:1 on all children when .is-visible — that overrides Tailwind opacity-0
 * and breaks animation-system.js stagger (higher-specificity than utility classes).
 */
.section-animate-in:not(.is-visible) .animate-on-scroll {
    opacity: 0;
}

/* Plain .animate-on-scroll items (no directional/scale/blur class): simple fade when section is visible */
.section-animate-in.is-visible .animate-on-scroll:not(.animate-fade-up):not(.animate-fade-down):not(.animate-fade-left):not(.animate-fade-right):not(.animate-scale-in):not(.animate-scale-soft):not(.animate-slide-up):not(.animate-blur-in) {
    opacity: 1;
    transform: none;
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
    :root {
        --teeq-animate-duration: 0.01ms;
        --teeq-animate-duration-fast: 0.01ms;
    }

    .animate-on-scroll,
    .section-animate-in:not(.is-visible) .animate-on-scroll,
    .section-animate-in.is-visible .animate-on-scroll {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        animation: none !important;
        transition: none !important;
    }

    .animate-on-scroll.is-visible,
    .animate-on-scroll.animate-in {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }
}