/* ================================================================
   Scroll Reveal Animations — admin-configurable via Theme Customize
   Applied by IntersectionObserver in app.blade.php
   ================================================================ */

/* ── CSS variables (set inline by app.blade.php) ─────────────── */
:root {
    --anim-duration: 0.6s;
    --anim-easing: cubic-bezier(0.22, 0.61, 0.36, 1);
    --anim-stagger: 0.1s;
}

/* ── Ready state (element not yet observed) ───────────────────── */
[data-anim] {
    opacity: 1;
    transform: none;
    transition: none;
}

/* ── Hidden state (before animation fires) ───────────────────── */
[data-anim].anim-hidden {
    visibility: visible;
}

/* ── Fade In ─────────────────────────────────────────────────── */
[data-anim="fade_in"].anim-hidden {
    opacity: 0;
}
[data-anim="fade_in"].anim-visible {
    opacity: 1;
    transition: opacity var(--anim-duration) var(--anim-easing);
}

/* ── Slide Up ────────────────────────────────────────────────── */
[data-anim="slide_up"].anim-hidden {
    opacity: 0;
    transform: translateY(40px);
}
[data-anim="slide_up"].anim-visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity var(--anim-duration) var(--anim-easing),
                transform var(--anim-duration) var(--anim-easing);
}

/* ── Slide from Right ────────────────────────────────────────── */
[data-anim="slide_left"].anim-hidden {
    opacity: 0;
    transform: translateX(50px);
}
[data-anim="slide_left"].anim-visible {
    opacity: 1;
    transform: translateX(0);
    transition: opacity var(--anim-duration) var(--anim-easing),
                transform var(--anim-duration) var(--anim-easing);
}

/* ── Slide from Left ─────────────────────────────────────────── */
[data-anim="slide_right"].anim-hidden {
    opacity: 0;
    transform: translateX(-50px);
}
[data-anim="slide_right"].anim-visible {
    opacity: 1;
    transform: translateX(0);
    transition: opacity var(--anim-duration) var(--anim-easing),
                transform var(--anim-duration) var(--anim-easing);
}

/* ── Zoom In ─────────────────────────────────────────────────── */
[data-anim="zoom_in"].anim-hidden {
    opacity: 0;
    transform: scale(0.88);
}
[data-anim="zoom_in"].anim-visible {
    opacity: 1;
    transform: scale(1);
    transition: opacity var(--anim-duration) var(--anim-easing),
                transform var(--anim-duration) var(--anim-easing);
}

/* ── Bounce In ───────────────────────────────────────────────── */
[data-anim="bounce_in"].anim-hidden {
    opacity: 0;
    transform: scale(0.7) translateY(30px);
}
[data-anim="bounce_in"].anim-visible {
    opacity: 1;
    transform: scale(1) translateY(0);
    transition: opacity var(--anim-duration) cubic-bezier(0.34, 1.56, 0.64, 1),
                transform var(--anim-duration) cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── Flip Up ─────────────────────────────────────────────────── */
[data-anim="flip_up"].anim-hidden {
    opacity: 0;
    transform: perspective(600px) rotateX(25deg) translateY(30px);
    transform-origin: top center;
}
[data-anim="flip_up"].anim-visible {
    opacity: 1;
    transform: perspective(600px) rotateX(0deg) translateY(0);
    transition: opacity var(--anim-duration) var(--anim-easing),
                transform var(--anim-duration) var(--anim-easing);
}

/* ── Rotate In ───────────────────────────────────────────────── */
[data-anim="rotate_in"].anim-hidden {
    opacity: 0;
    transform: rotate(-8deg) scale(0.9);
}
[data-anim="rotate_in"].anim-visible {
    opacity: 1;
    transform: rotate(0deg) scale(1);
    transition: opacity var(--anim-duration) var(--anim-easing),
                transform var(--anim-duration) var(--anim-easing);
}

/* ── Blur Reveal ─────────────────────────────────────────────── */
[data-anim="blur_in"].anim-hidden {
    opacity: 0;
    filter: blur(12px);
    transform: translateY(16px);
}
[data-anim="blur_in"].anim-visible {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
    transition: opacity var(--anim-duration) var(--anim-easing),
                filter var(--anim-duration) var(--anim-easing),
                transform var(--anim-duration) var(--anim-easing);
}

/* ── Stagger delay helpers ───────────────────────────────────── */
[data-anim-delay="1"] { transition-delay: calc(var(--anim-stagger) * 1) !important; }
[data-anim-delay="2"] { transition-delay: calc(var(--anim-stagger) * 2) !important; }
[data-anim-delay="3"] { transition-delay: calc(var(--anim-stagger) * 3) !important; }
[data-anim-delay="4"] { transition-delay: calc(var(--anim-stagger) * 4) !important; }
[data-anim-delay="5"] { transition-delay: calc(var(--anim-stagger) * 5) !important; }
[data-anim-delay="6"] { transition-delay: calc(var(--anim-stagger) * 6) !important; }
[data-anim-delay="7"] { transition-delay: calc(var(--anim-stagger) * 7) !important; }
[data-anim-delay="8"] { transition-delay: calc(var(--anim-stagger) * 8) !important; }

/* ── Reduced motion: respect user preference ─────────────────── */
@media (prefers-reduced-motion: reduce) {
    [data-anim] {
        transition: none !important;
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }
}