/* Animations supplémentaires pour MycvTop - MODERNIZED */

/* Animation d'entrée douce */
@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Animation de pulsation premium */
@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.03); /* Moins agressif */
        box-shadow: 0 0 15px rgba(245, 158, 11, 0.4);
    }
}

/* Appliquer les animations aux cartes */
.product-card, .category-card {
    opacity: 0;
    animation: slideInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.product-card:nth-child(1), .category-card:nth-child(1) { animation-delay: 0.05s; }
.product-card:nth-child(2), .category-card:nth-child(2) { animation-delay: 0.1s; }
.product-card:nth-child(3), .category-card:nth-child(3) { animation-delay: 0.15s; }
.product-card:nth-child(4) { animation-delay: 0.2s; }
.product-card:nth-child(5) { animation-delay: 0.25s; }
.product-card:nth-child(6) { animation-delay: 0.3s; }

/* Animation pour les badges promo */
.badge-promo {
    animation: pulse 2.5s infinite cubic-bezier(0.4, 0, 0.2, 1);
}

/* Effet de survol amélioré pour les boutons - Géré par CSS Variables maintenant */
.btn:active {
    transform: scale(0.97);
}

/* Effet de brillance moderne sur les images */
.product-image {
    position: relative;
    overflow: hidden;
}
.product-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    transform: skewX(-20deg);
    transition: left 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 2;
}

.product-card:hover .product-image::before {
    left: 150%;
}

/* Animations topbar */
@keyframes progressShimmer{
    0%{ filter: brightness(1); }
    50%{ filter: brightness(1.15); }
    100%{ filter: brightness(1); }
}

@keyframes topbarGlow{
    0%{ opacity:0.4; transform: rotate(15deg) translateX(0); }
    50%{ opacity:0.8; transform: rotate(15deg) translateX(-5%); }
    100%{ opacity:0.4; transform: rotate(15deg) translateX(0); }
}