/* ========================================
   BLAZOR RECONNECT ANIMATIONS - GPU OPTIMIZED
   Fix pour animations non composées
   ======================================== */

/* Container de reconnexion Blazor */
.components-reconnect-overlay {
    /* GPU-acceleration pour l'overlay */
    will-change: opacity;
    transform: translateZ(0);
}

.components-reconnect-dialog {
    /* GPU-acceleration pour le dialog */
    will-change: transform, opacity;
    transform: translateZ(0);
}

/* Animation de reconnexion optimisée */
.components-rejoining-animation {
    /* Force GPU-acceleration pour éviter les animations non composées */
    will-change: transform, opacity;
    transform: translateZ(0);
}

.components-rejoining-animation > div {
    /* GPU-acceleration pour les éléments enfants de l'animation */
    will-change: transform, opacity;
    transform: translateZ(0);
    /* Évite les animations de left, top, width, height qui ne sont pas GPU-accelerated */
    /* Ces propriétés seront animées via transform pour de meilleures performances */
}

/* Fix pour les animations CSS de Blazor */
@keyframes blazor-reconnect-pulse {
    0%, 100% {
        /* Utilise transform au lieu de dimensions pour GPU-acceleration */
        transform: scale(1) translateZ(0);
        opacity: 1;
    }
    50% {
        transform: scale(1.1) translateZ(0);
        opacity: 0.8;
    }
}

/* Override des animations Blazor par défaut si nécessaire */
.components-reconnect-show {
    animation: blazor-reconnect-show 0.3s ease-out;
}

@keyframes blazor-reconnect-show {
    from {
        opacity: 0;
        transform: translateY(10px) translateZ(0);
    }
    to {
        opacity: 1;
        transform: translateY(0) translateZ(0);
    }
}

.components-reconnect-hide {
    animation: blazor-reconnect-hide 0.3s ease-out;
}

@keyframes blazor-reconnect-hide {
    from {
        opacity: 1;
        transform: translateY(0) translateZ(0);
    }
    to {
        opacity: 0;
        transform: translateY(10px) translateZ(0);
    }
}

/* Optimisation pour reduced motion */
@media (prefers-reduced-motion: reduce) {
    .components-rejoining-animation,
    .components-rejoining-animation > div,
    .components-reconnect-dialog {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* ========================================
   FALLBACK STYLES
   Pour navigateurs ne supportant pas will-change
   ======================================== */

@supports not (will-change: transform) {
    .components-reconnect-overlay,
    .components-reconnect-dialog,
    .components-rejoining-animation,
    .components-rejoining-animation > div {
        /* Fallback: Force GPU layer avec transform 3D */
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

/* ========================================
   PERFORMANCE HINTS
   ======================================== */

/* Force la création de layers GPU pour les éléments Blazor critiques */
.components-reconnect-overlay,
.components-reconnect-dialog,
.components-reconnect-modal-background {
    /* Isole sur sa propre layer GPU */
    isolation: isolate;
    /* Optimise le rendu */
    contain: layout style paint;
}

/* ========================================
   DOCUMENTATION
   ======================================== */

/*
 * Ce fichier corrige les problèmes d'animations non composées
 * détectés par Chrome DevTools sur les composants Blazor.
 *
 * Problèmes résolus:
 * - Animations de left, top, width, height (non GPU-accelerated)
 * - Layout shifts pendant la reconnexion
 * - Repaints coûteux
 *
 * Solution:
 * - Utilisation de transform et opacity (GPU-accelerated)
 * - will-change pour forcer la création de layers GPU
 * - translateZ(0) pour activer l'accélération matérielle
 *
 * Référence: https://web.dev/non-composited-animations/
 */