/* ============================================================
   AZKA STUDIO — CART-ANIMATION.CSS
   ------------------------------------------------------------
   Animaciones visuales puras al agregar productos al carrito.
   NO afecta la lógica del carrito (scripinicio.js intacto).
   Compatible: 320px · 360px · 390px · 430px · 768px · 1366px · 1920px
   ============================================================ */

/* ============================================================
   1. PRODUCTO VOLANDO HACIA EL CARRITO
   ------------------------------------------------------------
   Copia temporal de la imagen del producto que viaja desde la
   galería hasta el icono del carrito, encogiéndose y
   desvaneciéndose al llegar. ~750ms con la curva AZKA.
   ============================================================ */
.azka-fly-item {
    position: fixed;
    z-index: 9999;
    pointer-events: none;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55);
    opacity: 1;
    transition:
        left 0.75s cubic-bezier(0.16, 1, 0.3, 1),
        top 0.75s cubic-bezier(0.16, 1, 0.3, 1),
        width 0.75s cubic-bezier(0.16, 1, 0.3, 1),
        height 0.75s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.45s ease 0.3s;
    will-change: left, top, width, height, opacity;
}

/* ============================================================
   2. REBOTE + BRILLO DEL ICONO DEL CARRITO
   ------------------------------------------------------------
   Zoom suave + glow blanco elegante al agregar un producto.
   ============================================================ */
.azka-cart-bounce {
    animation:
        azkaCartBounce 0.65s cubic-bezier(0.16, 1, 0.3, 1),
        azkaCartGlow 0.65s ease;
}

@keyframes azkaCartBounce {
    0%   { transform: scale(1); }
    30%  { transform: scale(1.28); }
    55%  { transform: scale(0.9); }
    75%  { transform: scale(1.1); }
    100% { transform: scale(1); }
}

@keyframes azkaCartGlow {
    0%   { filter: drop-shadow(0 0 0 rgba(255, 255, 255, 0)); }
    40%  { filter: drop-shadow(0 0 16px rgba(255, 255, 255, 0.75)); }
    100% { filter: drop-shadow(0 0 0 rgba(255, 255, 255, 0)); }
}

/* ============================================================
   3. ANIMACIÓN DEL NÚMERO DEL CONTADOR
   ------------------------------------------------------------
   Escala + fade + rebote cuando cambia la cantidad real.
   ============================================================ */
.azka-count-pop {
    animation: azkaCountPop 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes azkaCountPop {
    0%   { transform: scale(0.5); opacity: 0.3; }
    50%  { transform: scale(1.35); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

/* El badge del drawer es inline; inline-block permite animar scale. */
#cart-count-badge {
    display: inline-block;
}

/* ============================================================
   RESPETO POR MOVIMIENTO REDUCIDO
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .azka-fly-item,
    .azka-cart-bounce,
    .azka-count-pop {
        animation: none;
        transition: none;
    }
}