/* ============================================================
   ZKB Animations — Framer Motion style
   Mimics React spring animations: opacity 0→1, translateY 20→0
   ============================================================ */

/* Spring-like cubic-bezier: overshoot then settle */
:root {
    --zkb-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --zkb-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --zkb-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

/* ── Base state — hidden, shifted down ── */
.zkb-animate {
    opacity: 0;
    transform: translateY(20px);
    transition:
        opacity 0.7s var(--zkb-ease-out),
        transform 0.7s var(--zkb-spring);
    will-change: opacity, transform;
}

/* ── Revealed state ── */
.zkb-animate--visible {
    opacity: 1;
    transform: translateY(0) scale(1) translateX(0);
}

/* ── Staggered delays (Framer Motion staggerChildren style) ── */
.zkb-animate--delay-1 { transition-delay: 0.08s; }
.zkb-animate--delay-2 { transition-delay: 0.16s; }
.zkb-animate--delay-3 { transition-delay: 0.24s; }
.zkb-animate--delay-4 { transition-delay: 0.32s; }
.zkb-animate--delay-5 { transition-delay: 0.40s; }
.zkb-animate--delay-6 { transition-delay: 0.48s; }
.zkb-animate--delay-7 { transition-delay: 0.56s; }
.zkb-animate--delay-8 { transition-delay: 0.64s; }

/* ── Fade-in variant (no vertical movement) ── */
.zkb-animate--fade {
    transform: none;
}
.zkb-animate--fade.zkb-animate--visible {
    transform: none;
}

/* ── Scale-up variant (zoom in from 95%) ── */
.zkb-animate--scale {
    transform: scale(0.95);
    opacity: 0;
}
.zkb-animate--scale.zkb-animate--visible {
    transform: scale(1);
    opacity: 1;
}

/* ── Slide-in from left ── */
.zkb-animate--slide-left {
    transform: translateX(-30px);
}
.zkb-animate--slide-left.zkb-animate--visible {
    transform: translateX(0);
}

/* ── Slide-in from right ── */
.zkb-animate--slide-right {
    transform: translateX(30px);
}
.zkb-animate--slide-right.zkb-animate--visible {
    transform: translateX(0);
}

/* ── Slide up (more dramatic) ── */
.zkb-animate--slide-up {
    transform: translateY(40px);
}
.zkb-animate--slide-up.zkb-animate--visible {
    transform: translateY(0);
}

/* ── Bounce keyframe (for scroll indicator) ── */
@keyframes zkb-bounce {
    0%, 100% {
        transform: translateY(0) translateX(-50%);
        animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }
    50% {
        transform: translateY(-25%) translateX(-50%);
        animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
}

/* ── Pulse glow (for buttons/CTAs) ── */
@keyframes zkb-pulse-glow {
    0%, 100% {
        box-shadow: 0 0 15px rgba(194, 60, 221, 0.3);
    }
    50% {
        box-shadow: 0 0 30px rgba(194, 60, 221, 0.5), 0 0 60px rgba(194, 60, 221, 0.2);
    }
}

/* ── Breathing scale (for hero elements) ── */
@keyframes zkb-breathe {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.02); }
}

/* ── Spin (for loading states) ── */
@keyframes zkb-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ── Float (subtle up-down) ── */
@keyframes zkb-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

/* ── Shimmer (for gradient backgrounds) ── */
@keyframes zkb-shimmer {
    0% { background-position: -200% center; }
    100% { background-position: 200% center; }
}

/* ── Accordion (FAQ open/close) ── */
@keyframes zkb-accordion-down {
    from {
        max-height: 0;
        opacity: 0;
    }
    to {
        max-height: 500px;
        opacity: 1;
    }
}

@keyframes zkb-accordion-up {
    from {
        max-height: 500px;
        opacity: 1;
    }
    to {
        max-height: 0;
        opacity: 0;
    }
}

/* ── Fade in up (general purpose) ── */
@keyframes zkb-fade-in-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── Fade in (no movement) ── */
@keyframes zkb-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ── Respect user motion preferences ── */
@media (prefers-reduced-motion: reduce) {
    .zkb-animate,
    .zkb-animate--visible,
    .zkb-animate--delay-1,
    .zkb-animate--delay-2,
    .zkb-animate--delay-3,
    .zkb-animate--delay-4,
    .zkb-animate--delay-5,
    .zkb-animate--delay-6,
    .zkb-animate--delay-7,
    .zkb-animate--delay-8,
    .zkb-animate--fade,
    .zkb-animate--fade.zkb-animate--visible,
    .zkb-animate--scale,
    .zkb-animate--scale.zkb-animate--visible,
    .zkb-animate--slide-left,
    .zkb-animate--slide-left.zkb-animate--visible,
    .zkb-animate--slide-right,
    .zkb-animate--slide-right.zkb-animate--visible,
    .zkb-animate--slide-up,
    .zkb-animate--slide-up.zkb-animate--visible {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        transition-delay: 0s !important;
        animation: none !important;
    }
}