/* ═══════════════════════════════════════════════════════════
   COMMERCIFY PERFORMANCE OPTIMIZED CSS
   Optimisations GPU et performance scroll pour page ad
   ═══════════════════════════════════════════════════════════ */

/* Optimisations GPU et performance scroll */
.hover-scale {
    backface-visibility: hidden;
    transform: translate3d(0,0,0);
    transition: transform 0.3s ease;
}

.hover-scale:hover {
    will-change: transform;
    transform: scale(1.1) translate3d(0,0,0);
}

/* PHASE 2 : Styles YouTube supprimés - maintenant dans v1_commercify_vignettes_youtube.css */
/*
.youtube-video-container {
    backface-visibility: hidden;
    transform: translate3d(0,0,0);
}

/* OPTIMISATION CRITIQUE : Animations YouTube seulement au hover */
.youtube-play-overlay:not(:hover) {
    animation: none !important;
}

.youtube-play-overlay:hover {
    backface-visibility: hidden;
    animation: youtube-pulse-optimized 12s infinite ease-in-out; /* 6s → 12s (2x plus lent) */
}

@keyframes youtube-pulse-optimized {
    0%, 100% { 
        transform: scale(1) translate3d(0,0,0); 
    }
    50% { 
        transform: scale(1.03) translate3d(0,0,0); /* 1.05 → 1.03 (moins de mouvement) */
    }
}

/* Animation optimisée pour hover YouTube - SEULEMENT AU HOVER */
.youtube-mega-hover-optimized:not(:hover) {
    animation: none !important;
}

.youtube-mega-hover-optimized:hover {
    animation: youtube-mega-hover-optimized 8s infinite ease-in-out; /* 4s → 8s (2x plus lent) */
}

@keyframes youtube-mega-hover-optimized {
    0%, 100% { 
        transform: scale(1.3) rotate(2deg) translate3d(0,0,0);
        box-shadow: 0 15px 40px rgba(255,0,0,0.7), 0 0 40px rgba(255,0,0,0.4);
    }
    50% { 
        transform: scale(1.32) rotate(2deg) translate3d(0,0,0); /* 1.35 → 1.32 (moins de mouvement) */
        box-shadow: 0 18px 45px rgba(255,0,0,0.75), 0 0 45px rgba(255,0,0,0.45);
    }
}

/* Désactiver animations pendant le scroll */
.scrolling * {
    animation-play-state: paused !important;
    pointer-events: none;
}

/* DÉSACTIVER LES ANIMATIONS QUAND LA PAGE EST INACTIVE */
body.idle * {
    animation-play-state: paused !important;
}

body.idle .youtube-play-overlay,
body.idle .youtube-mega-hover-optimized {
    animation: none !important;
}

/* Optimisations pour les images de galerie */
.gallery-image-optimized {
    backface-visibility: hidden;
    transform: translate3d(0,0,0);
    will-change: auto;
}

.gallery-image-optimized:hover {
    will-change: transform;
}

/* Optimisations pour les boutons et éléments interactifs */
.btn-optimized {
    backface-visibility: hidden;
    transform: translate3d(0,0,0);
}

.btn-optimized:hover {
    will-change: transform;
}

/* Optimisations pour les overlays */
.overlay-optimized {
    backface-visibility: hidden;
    transform: translate3d(0,0,0);
}

/* Performance optimizations pour les transitions */
.transition-optimized {
    backface-visibility: hidden;
    transform: translate3d(0,0,0);
    will-change: auto;
}

.transition-optimized:hover {
    will-change: transform;
}

/* Optimisations spécifiques pour les sliders */
.slider-item {
    backface-visibility: hidden;
    transform: translate3d(0,0,0);
}

.slider-item img {
    backface-visibility: hidden;
    transform: translate3d(0,0,0);
}

/* Optimisations pour les éléments avec box-shadow */
.shadow-optimized {
    backface-visibility: hidden;
    transform: translate3d(0,0,0);
}

/* Désactiver les animations sur smartphones pour économiser le CPU */
@media (max-width: 768px) {
    .youtube-play-overlay,
    .youtube-mega-hover-optimized,
    .hover-scale {
        animation: none !important;
        transition: none !important;
    }
}

/* Désactiver les animations sur les appareils lents */
@media (prefers-reduced-motion: reduce) {
    .youtube-play-overlay,
    .youtube-mega-hover-optimized,
    .hover-scale {
        animation: none !important;
        transition: none !important;
    }
}

/* Désactiver les animations si CPU élevé (petits écrans) */
@media (max-width: 480px) {
    .youtube-play-overlay,
    .youtube-mega-hover-optimized,
    .hover-scale {
        animation: none !important;
        transition: none !important;
    }
}

/* Optimisations pour les écrans haute résolution */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .youtube-play-overlay,
    .hover-scale {
        transform: translate3d(0,0,0) scale(0.5);
        transform-origin: center;
    }
}
*/