/**
 * COMMERCIFY BANNER RIGHTCLICK - DEMI-FLIP + VIBRATION
 * Namespace: .cf-brc- (Commercify Banner RightClick)
 * Optimisé pour performances : GPU-accelerated, empreinte minimale
 */

/* Variables CSS custom properties - Définies dynamiquement par JS */
:root {
    --cf-brc-half-flip-angle: 25deg;
    --cf-brc-half-flip-duration: 300ms;
    --cf-brc-vibration-intensity: 15px;
    --cf-brc-vibration-duration: 250ms;
}

/* Animation demi-flip "plongeoir" - Basculement vers l'avant (rotateX) */
@keyframes cf-brc-half-flip {
    0% {
        transform: perspective(1000px) rotateX(0deg) translateZ(0);
    }
    50% {
        transform: perspective(1000px) rotateX(var(--cf-brc-half-flip-angle)) translateZ(0);
    }
    100% {
        transform: perspective(1000px) rotateX(0deg) translateZ(0);
    }
}

/* Animation vibration - Mouvement latéral rapide (pas de clignotement) */
@keyframes cf-brc-vibration {
    0% {
        transform: translateX(0) translateY(0);
    }
    10% {
        transform: translateX(calc(var(--cf-brc-vibration-intensity) * -1)) translateY(0);
    }
    20% {
        transform: translateX(var(--cf-brc-vibration-intensity)) translateY(0);
    }
    30% {
        transform: translateX(calc(var(--cf-brc-vibration-intensity) * -0.7)) translateY(0);
    }
    40% {
        transform: translateX(calc(var(--cf-brc-vibration-intensity) * 0.7)) translateY(0);
    }
    50% {
        transform: translateX(calc(var(--cf-brc-vibration-intensity) * -0.5)) translateY(0);
    }
    60% {
        transform: translateX(calc(var(--cf-brc-vibration-intensity) * 0.5)) translateY(0);
    }
    70% {
        transform: translateX(calc(var(--cf-brc-vibration-intensity) * -0.3)) translateY(0);
    }
    80% {
        transform: translateX(calc(var(--cf-brc-vibration-intensity) * 0.3)) translateY(0);
    }
    90% {
        transform: translateX(calc(var(--cf-brc-vibration-intensity) * -0.1)) translateY(0);
    }
    100% {
        transform: translateX(0) translateY(0);
    }
}

/* Classe d'isolation pour éviter les conflits avec les règles hover */
.vignette-ad.cf-brc-animating {
    contain: layout style paint;
    isolation: isolate;
    /* Désactiver les transitions pour permettre les animations */
    transition: none !important;
}

/* Désactiver explicitement les effets hover pendant l'animation */
.vignette-ad.cf-brc-animating:hover,
.vignette-ad.cf-brc-animating:hover .product-card,
.vignette-ad.cf-brc-animating .product-card:hover {
    transform: none !important;
    transition: none !important;
    box-shadow: none !important;
    filter: none !important;
}

/* Classe pour le demi-flip - Appliquée temporairement via JS sur .vignette-ad */
.vignette-ad.cf-brc-animating.cf-brc-half-flip-active {
    animation: cf-brc-half-flip var(--cf-brc-half-flip-duration) ease-in-out !important;
    will-change: transform !important;
    backface-visibility: hidden;
    transform-style: preserve-3d;
    transform-origin: center center;
    transition: none !important; /* Forcer l'animation, pas de transition */
}

/* Classe pour la vibration - Appliquée temporairement via JS sur .vignette-ad */
.vignette-ad.cf-brc-animating.cf-brc-vibration-active {
    animation: cf-brc-vibration calc(var(--cf-brc-vibration-duration) * var(--cf-brc-vibration-count)) ease-out !important;
    will-change: transform !important;
    backface-visibility: hidden;
    transform-origin: center center;
    transition: none !important; /* Forcer l'animation, pas de transition */
}

/* Note: Le nettoyage est géré directement par la suppression des classes dans le JS */

/* Respect de prefers-reduced-motion pour accessibilité */
@media (prefers-reduced-motion: reduce) {
    .cf-brc-half-flip-active,
    .cf-brc-vibration-active {
        animation: none !important;
        transform: none !important;
    }
}