/**
 * File: /assets/css/animations.css
 * Description: Hardware-accelerated Keyframes, Micro-Interactions, and Lens Physics.
 * Strict Rule: Only animate GPU-friendly properties (transform, opacity, filter, box-shadow).
 */

/* ========================================================
   1. SYSTEM LOADERS & PROGRESS (Zero-Bloat)
   ======================================================== */
/* Replaces heavy SVG/GIF spinners with pure CSS */
.btn-loader {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #ffffff;
    animation: spinMechanical 0.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    will-change: transform;
}

/* Used for CRM dashboard async states */
.loader-dark {
    border: 3px solid rgba(0, 0, 0, 0.1);
    border-top-color: var(--text-main);
}

@keyframes spinMechanical {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ========================================================
   2. VOLUMETRIC UI REVEALS (Spring Physics)
   ======================================================== */
/* Apply this to elements that should snap into place as they enter the viewport */
.animate-spring-up {
    opacity: 0;
    transform: translateY(40px);
    animation: springUp 0.8s var(--spring-bounce) forwards;
    will-change: transform, opacity;
}

@keyframes springUp {
    0% { 
        opacity: 0; 
        transform: translateY(40px) scale(0.98); 
    }
    100% { 
        opacity: 1; 
        transform: translateY(0) scale(1); 
    }
}

/* Stagger delays for grids (e.g., the 3 product cards) */
.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }

/* ========================================================
   3. OPTICS & LENS PHYSICS
   ======================================================== */
/* Subtle breathing bloom for the "After" image or highlighted features */
.lens-bloom-active {
    animation: specularBloom 4s ease-in-out infinite alternate;
    will-change: filter, box-shadow;
}

@keyframes specularBloom {
    0% { 
        filter: contrast(1) brightness(1); 
        box-shadow: 0 0 0 rgba(255, 255, 255, 0); 
    }
    50% { 
        filter: contrast(1.05) brightness(1.05); 
        box-shadow: 0 0 15px rgba(255, 255, 255, 0.3), inset 0 0 10px rgba(255, 255, 255, 0.2); 
    }
    100% { 
        filter: contrast(1) brightness(1); 
        box-shadow: 0 0 0 rgba(255, 255, 255, 0); 
    }
}

/* ========================================================
   4. HAPTIC MICRO-INTERACTIONS
   ======================================================== */
/* Emits a physical "ring" when a successful action occurs (e.g., WA redirect in CRM) */
.success-ripple {
    position: relative;
}

.success-ripple::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.6); /* WhatsApp Green */
    animation: rippleEmit 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    pointer-events: none;
}

@keyframes rippleEmit {
    0% { 
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.6); 
    }
    70% { 
        box-shadow: 0 0 0 12px rgba(37, 211, 102, 0); 
    }
    100% { 
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); 
    }
}

/* ========================================================
   5. LOGISTICS RAIL (Tracker Pulses)
   ======================================================== */
/* The glowing dot inside the active node on the tracking page */
.status-pulse {
    animation: statusDotPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    will-change: box-shadow;
}

@keyframes statusDotPulse {
    0% { 
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.8); 
    }
    50% { 
        box-shadow: 0 0 0 8px rgba(255, 255, 255, 0); 
    }
    100% { 
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); 
    }
}