/* ==========================================================
🎞️ CORE TOKENS (already defined in tokens.css ideally)
========================================================== */

:root {
    --cls-motion-duration: var(--cls-anim-speed);
    --cls-motion-easing: var(--cls-anim-easing);
}


/* ==========================================================
🎬 KEYFRAMES
========================================================== */

@keyframes clsModalIn {
    from {
        opacity: 0;
        transform: translateY(24px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes clsFadeUp {
    from {
        opacity: 0;
        transform: translateY(var(--cls-anim-hover-lift));
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

@keyframes clsScale {
    from {
        opacity: 0;
        transform: scale(0.96);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes clsShimmer {
    0%   { background-position: -300px 0; }
    100% { background-position: 300px 0; }
}

@keyframes clsGlow {
    0%   { box-shadow: 0 0 0 rgba(108,92,231,0.18); }
    50%  { box-shadow: 0 0 30px rgba(108,92,231,0.28); }
    100% { box-shadow: 0 0 0 rgba(108,92,231,0.18); }
}

@keyframes clsFloat {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(calc(var(--cls-anim-floating-intensity) * -1)); }
    100% { transform: translateY(0); }
}


/* ==========================================================
🚀 ENTRY ANIMATIONS
========================================================== */

.cls-custom-location-fields {
    animation: clsFadeUp var(--cls-motion-duration) var(--cls-motion-easing);
}

.cls-location-section,
.cls-map-section,
.cls-delivery-datetime,
.cls-delivery-summary {
    animation: clsFadeUp calc(var(--cls-motion-duration) * 1.2) var(--cls-motion-easing);
}


/* ==========================================================
🪟 MODALS
========================================================== */

.cls-map-box,
.cls-permission-box {
    animation: clsModalIn var(--cls-motion-duration) var(--cls-motion-easing);
}


/* ==========================================================
✨ SMALL UI ANIMATIONS
========================================================== */

.cls-map-inline {
    animation: clsFade var(--cls-motion-duration) var(--cls-motion-easing);
}

#cls-service-warning {
    animation: clsScale var(--cls-motion-duration) var(--cls-motion-easing);
}


/* ==========================================================
✨ LOADING
========================================================== */

.cls-loading {
    background: linear-gradient(
        90deg,
        rgba(255,255,255,0.6) 25%,
        rgba(255,255,255,0.9) 50%,
        rgba(255,255,255,0.6) 75%
    );
    background-size: 400px 100%;
    animation: clsShimmer calc(var(--cls-motion-duration) * 4) linear infinite;
}


/* ==========================================================
🌊 OPTIONAL FLOAT (only when needed)
========================================================== */

.cls-floating {
    animation: clsFloat 4s ease-in-out infinite;
}


/* ==========================================================
🎯 MICRO INTERACTIONS
========================================================== */

.cls-summary-row {
    transition: padding var(--cls-motion-duration);
}

.cls-summary-row:hover {
    padding-left: 4px;
}


/* ==========================================================
♿ ACCESSIBILITY (IMPORTANT)
========================================================== */

@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }
}