/**
 * Zinc Motion — Animation Stylesheet
 *
 * All entry animations, hover effects, scroll-driven transforms,
 * and accessibility overrides for the Zinc Page Builder motion system.
 *
 * @package ZincOS\Builder
 * @since   2.1.0
 */

/* ═══════════════════════════════════════════════════════════════════════════
   1. BASE — Default timing & behaviour for animated blocks
   ═══════════════════════════════════════════════════════════════════════════ */

[data-zb-motion] {
    animation-fill-mode: both;
    animation-duration: var(--zb-motion-duration, 600ms);
    animation-timing-function: var(--zb-motion-easing, cubic-bezier(0.22, 1, 0.36, 1));
    animation-delay: var(--zb-motion-delay, 0ms);
}

/* Blocks waiting for IntersectionObserver trigger — invisible until animated */
[data-zb-motion]:not(.zb-motion-triggered) {
    opacity: 0;
}

/* After triggering, the animation class handles the visual */
[data-zb-motion].zb-motion-triggered {
    /* animation-name set by individual class */
}


/* ═══════════════════════════════════════════════════════════════════════════
   2. ENTRY ANIMATIONS — @keyframes & utility classes (17 presets)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Fade In ────────────────────────────────────────────────────────────── */
@keyframes zbFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.zb-anim-fade-in { animation-name: zbFadeIn; }

/* ── Fade In Up ─────────────────────────────────────────────────────────── */
@keyframes zbFadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: none; }
}
.zb-anim-fade-in-up { animation-name: zbFadeInUp; }

/* ── Fade In Down ───────────────────────────────────────────────────────── */
@keyframes zbFadeInDown {
    from { opacity: 0; transform: translateY(-30px); }
    to   { opacity: 1; transform: none; }
}
.zb-anim-fade-in-down { animation-name: zbFadeInDown; }

/* ── Fade In Left ───────────────────────────────────────────────────────── */
@keyframes zbFadeInLeft {
    from { opacity: 0; transform: translateX(-30px); }
    to   { opacity: 1; transform: none; }
}
.zb-anim-fade-in-left { animation-name: zbFadeInLeft; }

/* ── Fade In Right ──────────────────────────────────────────────────────── */
@keyframes zbFadeInRight {
    from { opacity: 0; transform: translateX(30px); }
    to   { opacity: 1; transform: none; }
}
.zb-anim-fade-in-right { animation-name: zbFadeInRight; }

/* ── Zoom In ────────────────────────────────────────────────────────────── */
@keyframes zbZoomIn {
    from { opacity: 0; transform: scale(0.6); }
    to   { opacity: 1; transform: none; }
}
.zb-anim-zoom-in { animation-name: zbZoomIn; }

/* ── Zoom Out ───────────────────────────────────────────────────────────── */
@keyframes zbZoomOut {
    from { opacity: 0; transform: scale(1.4); }
    to   { opacity: 1; transform: none; }
}
.zb-anim-zoom-out { animation-name: zbZoomOut; }

/* ── Slide In Up ────────────────────────────────────────────────────────── */
@keyframes zbSlideInUp {
    from { opacity: 0; transform: translateY(100%); }
    to   { opacity: 1; transform: none; }
}
.zb-anim-slide-in-up { animation-name: zbSlideInUp; }

/* ── Slide In Down ──────────────────────────────────────────────────────── */
@keyframes zbSlideInDown {
    from { opacity: 0; transform: translateY(-100%); }
    to   { opacity: 1; transform: none; }
}
.zb-anim-slide-in-down { animation-name: zbSlideInDown; }

/* ── Slide In Left ──────────────────────────────────────────────────────── */
@keyframes zbSlideInLeft {
    from { opacity: 0; transform: translateX(-100%); }
    to   { opacity: 1; transform: none; }
}
.zb-anim-slide-in-left { animation-name: zbSlideInLeft; }

/* ── Slide In Right ─────────────────────────────────────────────────────── */
@keyframes zbSlideInRight {
    from { opacity: 0; transform: translateX(100%); }
    to   { opacity: 1; transform: none; }
}
.zb-anim-slide-in-right { animation-name: zbSlideInRight; }

/* ── Flip In X ──────────────────────────────────────────────────────────── */
@keyframes zbFlipInX {
    from { opacity: 0; transform: perspective(600px) rotateX(90deg); }
    to   { opacity: 1; transform: none; }
}
.zb-anim-flip-in-x { animation-name: zbFlipInX; }

/* ── Flip In Y ──────────────────────────────────────────────────────────── */
@keyframes zbFlipInY {
    from { opacity: 0; transform: perspective(600px) rotateY(90deg); }
    to   { opacity: 1; transform: none; }
}
.zb-anim-flip-in-y { animation-name: zbFlipInY; }

/* ── Rotate In ──────────────────────────────────────────────────────────── */
@keyframes zbRotateIn {
    from { opacity: 0; transform: rotate(-180deg) scale(0.5); }
    to   { opacity: 1; transform: none; }
}
.zb-anim-rotate-in { animation-name: zbRotateIn; }

/* ── Bounce In ──────────────────────────────────────────────────────────── */
@keyframes zbBounceIn {
    0%   { opacity: 0; transform: scale(0.3); }
    50%  { opacity: 1; transform: scale(1.08); }
    70%  { transform: scale(0.95); }
    100% { opacity: 1; transform: none; }
}
.zb-anim-bounce-in { animation-name: zbBounceIn; }

/* ── Blur In ────────────────────────────────────────────────────────────── */
@keyframes zbBlurIn {
    from { opacity: 0; filter: blur(12px); }
    to   { opacity: 1; filter: blur(0); }
}
.zb-anim-blur-in { animation-name: zbBlurIn; }


/* ═══════════════════════════════════════════════════════════════════════════
   3. HOVER EFFECTS — (9 presets)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Base transition for hover elements */
[data-zb-motion-hover] {
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.3s ease,
                filter 0.3s ease,
                border-color 0.3s ease;
}

/* ── Grow ────────────────────────────────────────────────────────────────── */
.zb-hover-grow { transform: scale(1.05); }

/* ── Shrink ──────────────────────────────────────────────────────────────── */
.zb-hover-shrink { transform: scale(0.95); }

/* ── Pulse (infinite) ────────────────────────────────────────────────────── */
@keyframes zbPulse {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.05); }
    100% { transform: scale(1); }
}
.zb-hover-pulse { animation: zbPulse 1s cubic-bezier(0.22, 1, 0.36, 1) infinite; }

/* ── Wobble ──────────────────────────────────────────────────────────────── */
@keyframes zbWobble {
    0%   { transform: translateX(0); }
    15%  { transform: translateX(-6px) rotate(-3deg); }
    30%  { transform: translateX(5px) rotate(2deg); }
    45%  { transform: translateX(-4px) rotate(-1.5deg); }
    60%  { transform: translateX(3px) rotate(1deg); }
    75%  { transform: translateX(-1px) rotate(-0.5deg); }
    100% { transform: translateX(0); }
}
.zb-hover-wobble { animation: zbWobble 0.8s ease; }

/* ── Float ───────────────────────────────────────────────────────────────── */
.zb-hover-float {
    transform: translateY(-6px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* ── Glow ────────────────────────────────────────────────────────────────── */
.zb-hover-glow {
    box-shadow: 0 0 20px rgba(124, 58, 237, 0.4),
                0 0 40px rgba(124, 58, 237, 0.15);
}

/* ── Border Grow ─────────────────────────────────────────────────────────── */
.zb-hover-border-grow {
    box-shadow: inset 0 0 0 3px currentColor;
}

/* ── Shadow Grow ─────────────────────────────────────────────────────────── */
.zb-hover-shadow-grow {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2),
                0 4px 12px rgba(0, 0, 0, 0.1);
}


/* ═══════════════════════════════════════════════════════════════════════════
   4. SCROLL EFFECTS — Base styles for JS-driven transforms
   ═══════════════════════════════════════════════════════════════════════════ */

[data-zb-motion-scroll] {
    will-change: auto; /* JS sets will-change: transform when visible */
}

/* Scroll transform is applied inline by JS via CSS custom properties:
   --zb-scroll-x, --zb-scroll-y, --zb-scroll-scale, --zb-scroll-rotate,
   --zb-scroll-opacity, --zb-scroll-blur */
.zb-scroll-active {
    transform: translate3d(
        var(--zb-scroll-x, 0px),
        var(--zb-scroll-y, 0px),
        0
    )
    scale(var(--zb-scroll-scale, 1))
    rotate(var(--zb-scroll-rotate, 0deg));
    opacity: var(--zb-scroll-opacity, 1);
    filter: blur(var(--zb-scroll-blur, 0px));
}


/* ═══════════════════════════════════════════════════════════════════════════
   5. LOTTIE CONTAINER
   ═══════════════════════════════════════════════════════════════════════════ */

.zb-lottie-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    pointer-events: none;
}

.zb-lottie-container lottie-player,
.zb-lottie-container dotlottie-player {
    width: 100%;
    max-width: 100%;
    height: auto;
}


/* ═══════════════════════════════════════════════════════════════════════════
   6. ACCESSIBILITY — Respect prefers-reduced-motion
   ═══════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {

    /* Disable ALL entry animations */
    [data-zb-motion] {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
    }

    /* Disable ALL hover effects */
    [data-zb-motion-hover] {
        transition: none !important;
    }
    .zb-hover-grow,
    .zb-hover-shrink,
    .zb-hover-pulse,
    .zb-hover-wobble,
    .zb-hover-float,
    .zb-hover-glow,
    .zb-hover-border-grow,
    .zb-hover-shadow-grow {
        animation: none !important;
        transform: none !important;
        box-shadow: none !important;
        filter: none !important;
    }

    /* Disable ALL scroll effects */
    .zb-scroll-active {
        transform: none !important;
        opacity: 1 !important;
        filter: none !important;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   7. UTILITIES
   ═══════════════════════════════════════════════════════════════════════════ */

/* Performance hint for blocks about to animate */
.zb-will-animate {
    will-change: transform, opacity;
    contain: layout style;
}

/* Clean up after animation completes */
.zb-animation-done {
    will-change: auto;
}