/* animations-optimized.css - GPU-Accelerated Animations */

/* ============================================
   🎯 PERFORMANCE OPTIMIZATIONS
   ============================================
   - Transform au lieu de left/top/margin
   - will-change pour animations critiques
   - GPU acceleration (translateZ, translate3d)
   - Composite layers pour smoother animations
   ============================================ */

/* --- GPU Acceleration Base --- */
.gpu-accelerate {
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
}

/* --- Will-change hints pour animations critiques --- */
.will-animate-transform {
    will-change: transform;
}

.will-animate-opacity {
    will-change: opacity;
}

.will-animate-all {
    will-change: transform, opacity;
}

/* Remove will-change après animation (via JS ou animation-fill-mode) */
.animation-complete {
    will-change: auto;
}

/* --- Fade In Optimisé (GPU) --- */
@keyframes fadeInOptimized {
    from {
        opacity: 0;
        transform: translate3d(0, 10px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.fade-in-optimized {
    animation: fadeInOptimized 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    will-change: transform, opacity;
}

.fade-in-optimized.animation-complete {
    will-change: auto;
}

/* --- Card Fade In Optimisé --- */
@keyframes cardFadeInOptimized {
    from {
        opacity: 0;
        transform: translate3d(0, 20px, 0) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}

.card-fade-in-optimized {
    animation: cardFadeInOptimized 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    will-change: transform, opacity;
}

/* --- Slide In/Out Optimisés (transform au lieu de left) --- */
@keyframes slideInFromRight {
    from {
        transform: translate3d(100%, 0, 0);
        opacity: 0;
    }
    to {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}

@keyframes slideInFromLeft {
    from {
        transform: translate3d(-100%, 0, 0);
        opacity: 0;
    }
    to {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}

@keyframes slideOutToRight {
    from {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
    to {
        transform: translate3d(100%, 0, 0);
        opacity: 0;
    }
}

@keyframes slideOutToLeft {
    from {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
    to {
        transform: translate3d(-100%, 0, 0);
        opacity: 0;
    }
}

/* --- Modal Animations Optimisées --- */
@keyframes modalFadeIn {
    from {
        opacity: 0;
        transform: translate3d(0, 0, 0) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}

@keyframes modalFadeOut {
    from {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
    to {
        opacity: 0;
        transform: translate3d(0, 0, 0) scale(0.95);
    }
}

.modal-fade-in {
    animation: modalFadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    will-change: transform, opacity;
}

.modal-fade-out {
    animation: modalFadeOut 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    will-change: transform, opacity;
}

/* --- Shimmer/Shine Optimisé (transform au lieu de left) --- */
@keyframes shimmerOptimized {
    0% {
        transform: translate3d(-100%, 0, 0);
    }
    100% {
        transform: translate3d(100%, 0, 0);
    }
}

.shimmer-optimized::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent
    );
    animation: shimmerOptimized 2s infinite;
    will-change: transform;
    pointer-events: none;
    overflow: hidden;
}

/* --- Pulse Optimisé (scale au lieu de width/height) --- */
@keyframes pulseOptimized {
    0%, 100% {
        transform: scale3d(1, 1, 1);
        opacity: 1;
    }
    50% {
        transform: scale3d(1.05, 1.05, 1);
        opacity: 0.8;
    }
}

.pulse-optimized {
    animation: pulseOptimized 1.5s ease-in-out infinite;
    will-change: transform, opacity;
}

/* --- Spin Optimisé (rotate3d) --- */
@keyframes spinOptimized {
    from {
        transform: rotate3d(0, 0, 1, 0deg);
    }
    to {
        transform: rotate3d(0, 0, 1, 360deg);
    }
}

.spin-optimized {
    animation: spinOptimized 1s linear infinite;
    will-change: transform;
}

/* --- Bounce Optimisé --- */
@keyframes bounceOptimized {
    0%, 100% {
        transform: translate3d(0, 0, 0);
    }
    25% {
        transform: translate3d(0, -10px, 0);
    }
    50% {
        transform: translate3d(0, 0, 0);
    }
    75% {
        transform: translate3d(0, -5px, 0);
    }
}

.bounce-optimized {
    animation: bounceOptimized 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

/* --- Shake Optimisé --- */
@keyframes shakeOptimized {
    0%, 100% {
        transform: translate3d(0, 0, 0);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translate3d(-5px, 0, 0);
    }
    20%, 40%, 60%, 80% {
        transform: translate3d(5px, 0, 0);
    }
}

.shake-optimized {
    animation: shakeOptimized 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

/* --- Transitions Optimisées (Remplace transition: all) --- */

/* Opacity seule */
.transition-opacity {
    transition: opacity var(--transition-speed) var(--transition-timing);
    will-change: opacity;
}

.transition-opacity-slow {
    transition: opacity var(--transition-speed-slow) var(--transition-timing);
    will-change: opacity;
}

/* Transform seul */
.transition-transform {
    transition: transform var(--transition-speed) var(--transition-timing);
    will-change: transform;
}

.transition-transform-slow {
    transition: transform var(--transition-speed-slow) var(--transition-timing-smooth);
    will-change: transform;
}

/* Transform + Opacity (combo le plus courant) */
.transition-transform-opacity {
    transition: transform var(--transition-speed) var(--transition-timing),
                opacity var(--transition-speed) var(--transition-timing);
    will-change: transform, opacity;
}

/* Colors (pas de GPU mais performant) */
.transition-colors {
    transition: color var(--transition-speed) var(--transition-timing),
                background-color var(--transition-speed) var(--transition-timing),
                border-color var(--transition-speed) var(--transition-timing);
}

/* Box-shadow seul (éviter avec transform pour perfs) */
.transition-shadow {
    transition: box-shadow var(--transition-speed) var(--transition-timing);
}

/* --- Hover Effects Optimisés --- */

/* Scale hover (au lieu de width/height) */
.hover-scale {
    transform: scale(1);
    transition: transform var(--transition-speed) var(--transition-timing);
    will-change: transform;
}

.hover-scale:hover {
    transform: scale(1.05);
}

.hover-scale:active {
    transform: scale(0.98);
}

/* Lift hover (au lieu de top/bottom) */
.hover-lift {
    transform: translateY(0);
    transition: transform var(--transition-speed) var(--transition-timing),
                box-shadow var(--transition-speed) var(--transition-timing);
    will-change: transform;
}

.hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

/* Brightness hover (évite filter: brightness si possible) */
.hover-brightness {
    transition: opacity var(--transition-speed) var(--transition-timing);
}

.hover-brightness:hover {
    opacity: 0.9;
}

/* --- Loading States Optimisés --- */

/* Skeleton shimmer (déjà optimisé dans skeleton.css mais référence ici) */
.skeleton-shimmer-optimized {
    background: linear-gradient(
        90deg,
        var(--glass-bg-light) 0%,
        var(--glass-bg-lighter) 50%,
        var(--glass-bg-light) 100%
    );
    background-size: 200% 100%;
    animation: skeletonShimmer 2s linear infinite;
    transform: translateZ(0);
}

@keyframes skeletonShimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

/* Spinner optimisé */
.spinner-optimized {
    width: 40px;
    height: 40px;
    border: 4px solid var(--glass-border);
    border-top-color: var(--accent-color);
    border-radius: 50%;
    animation: spinOptimized 0.8s linear infinite;
    transform: translateZ(0);
    will-change: transform;
}

/* --- Reduced Motion Support --- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    
    .will-animate-transform,
    .will-animate-opacity,
    .will-animate-all {
        will-change: auto;
    }
}

/* --- Performance Hints --- */

/*
  RÈGLES D'OR POUR ANIMATIONS 60FPS:
  
  1. ✅ Utiliser SEULEMENT transform et opacity
     - transform: translate, scale, rotate
     - opacity: 0 to 1
  
  2. ❌ ÉVITER ces propriétés:
     - width, height, top, left, right, bottom
     - margin, padding
     - border-width
     - font-size
     → Provoquent reflow/layout (lent!)
  
  3. ✅ will-change pour animations critiques
     - Mais enlever après animation
     - Max 3-4 éléments simultanés
  
  4. ✅ translate3d() au lieu de translate()
     - Force GPU layer
     - Meilleure performance
  
  5. ✅ Éviter transition: all
     - Spécifier propriétés exactes
     - Moins de calculs
  
  6. ✅ backface-visibility: hidden
     - Évite flickering
     - Smoother animations
  
  7. ⚠️ Box-shadow + transform
     - Éviter si possible ensemble
     - Utiliser plutôt drop-shadow ou outline
*/

/* --- Utility Classes --- */

/* Isoler sur son propre composite layer */
.isolate-layer {
    isolation: isolate;
    transform: translateZ(0);
}

/* Forcer hardware acceleration */
.force-gpu {
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    perspective: 1000px;
}

/* Optimiser text rendering pendant animation */
.optimize-text {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeSpeed;
}

/* Conteneur pour animations (contient les layers) */
.animation-container {
    position: relative;
    isolation: isolate;
    transform: translateZ(0);
}

/* --- Debug Helpers (dev seulement) --- */
.debug-layer {
    outline: 2px dashed red !important;
}

.debug-gpu {
    outline: 2px dashed blue !important;
}

/* En dev, ajouter ceci pour voir les composite layers:
   Chrome DevTools > More tools > Rendering > Layer borders
*/