/* =============================================================================
   Buyin Child Theme — animations.css
   @keyframes definitions and scroll-triggered animation classes.
   Keep heavy keyframes out of custom.css to allow separate caching.
   ============================================================================= */


/* ─────────────────────────────────────────────────────────────
   @KEYFRAMES
───────────────────────────────────────────────────────────── */

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(32px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-24px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-10px); }
}

/* Scroll indicator chevron bounce */
@keyframes scroll-bounce {
    0%, 100% {
        transform: translateY(0);
        opacity: 0.5;
    }
    50% {
        transform: translateY(8px);
        opacity: 0.9;
    }
}

/* Online dot pulsing glow */
@keyframes pulse-glow {
    0%, 100% {
        box-shadow: 0 0 4px #2ecc71;
        opacity: 1;
    }
    50% {
        box-shadow: 0 0 12px #2ecc71, 0 0 24px rgba(46, 204, 113, 0.4);
        opacity: 0.8;
    }
}

/* Shimmer sweep for skeleton / badge highlights */
@keyframes shimmer {
    0%   { background-position: -200% center; }
    100% { background-position:  200% center; }
}

/* Counter tick — brief scale pop */
@keyframes count-pop {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.12); }
    100% { transform: scale(1); }
}

/* Hero badge entrance */
@keyframes badge-drop {
    from {
        opacity: 0;
        transform: translateY(-16px) scale(0.92);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Staggered card entrance */
@keyframes card-rise {
    from {
        opacity: 0;
        transform: translateY(40px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Slow background drift for felt texture sections */
@keyframes felt-drift {
    0%   { background-position: 0 0; }
    100% { background-position: 40px 40px; }
}


/* ─────────────────────────────────────────────────────────────
   SCROLL-TRIGGERED ANIMATION SYSTEM
   JS (custom.js) uses IntersectionObserver to add .in-view
   ───────────────────────────────────────────────────────────── */

/*
 * Base hidden state — applied via Elementor Advanced > CSS Classes.
 * Elements start invisible and off-position until .in-view is added.
 * prefers-reduced-motion: skip all transforms, keep opacity fade only.
 */

.animate-on-scroll {
    opacity: 0;
    transform: translateY(28px);
    transition:
        opacity 0.65s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.65s cubic-bezier(0.4, 0, 0.2, 1);
}

.animate-on-scroll.in-view {
    opacity: 1;
    transform: translateY(0);
}

/* Slide in from left */
.animate-slide-left {
    opacity: 0;
    transform: translateX(-40px);
    transition:
        opacity 0.65s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.65s cubic-bezier(0.4, 0, 0.2, 1);
}

.animate-slide-left.in-view {
    opacity: 1;
    transform: translateX(0);
}

/* Slide in from right */
.animate-slide-right {
    opacity: 0;
    transform: translateX(40px);
    transition:
        opacity 0.65s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.65s cubic-bezier(0.4, 0, 0.2, 1);
}

.animate-slide-right.in-view {
    opacity: 1;
    transform: translateX(0);
}

/* Simple fade (no movement) */
.animate-fade {
    opacity: 0;
    transition: opacity 0.75s ease;
}

.animate-fade.in-view {
    opacity: 1;
}

/* Scale in from slightly smaller */
.animate-scale {
    opacity: 0;
    transform: scale(0.94);
    transition:
        opacity 0.55s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

.animate-scale.in-view {
    opacity: 1;
    transform: scale(1);
}


/* ─────────────────────────────────────────────────────────────
   STAGGERED DELAYS
   Apply alongside animate-on-scroll for grid children.
   Elementor Advanced > CSS Classes: "animate-on-scroll delay-1"
───────────────────────────────────────────────────────────── */

.delay-1 { transition-delay: 0.10s; }
.delay-2 { transition-delay: 0.20s; }
.delay-3 { transition-delay: 0.30s; }
.delay-4 { transition-delay: 0.40s; }
.delay-5 { transition-delay: 0.50s; }
.delay-6 { transition-delay: 0.60s; }


/* ─────────────────────────────────────────────────────────────
   REDUCED MOTION — ACCESSIBILITY
───────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .animate-on-scroll,
    .animate-slide-left,
    .animate-slide-right,
    .animate-fade,
    .animate-scale {
        /* Skip transforms; only fade in */
        opacity: 0;
        transform: none !important;
        transition: opacity 0.4s ease !important;
    }

    .animate-on-scroll.in-view,
    .animate-slide-left.in-view,
    .animate-slide-right.in-view,
    .animate-fade.in-view,
    .animate-scale.in-view {
        opacity: 1;
    }

    /* Disable canvas particle animation (handled in JS) */
    #particle-canvas {
        display: none;
    }

    /* Disable looping keyframe animations */
    .scroll-indicator,
    .chat-online-dot,
    .float-element {
        animation: none !important;
    }
}


/* ─────────────────────────────────────────────────────────────
   UTILITY ANIMATION CLASSES
───────────────────────────────────────────────────────────── */

/* Continuous floating — add to decorative icons / badges */
.float-element {
    animation: float 4s ease-in-out infinite;
}

/* Shimmer text highlight — add to stat values on load */
.shimmer-text {
    background: linear-gradient(
        90deg,
        currentColor 20%,
        rgba(255, 255, 255, 0.7) 40%,
        currentColor 60%
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: shimmer 2.5s linear infinite;
}