/* public/assets/css/pages/rankings.css */
/* VERSION: Parallaxe 3D - Layers Fixes (Safari Desktop OK) */

/* --- Conteneur Principal (Wrapper) --- */
.fog-war-badge-container {
    position: relative;
    /* IMPORTANT : Permet aux nuages de sortir visuellement du badge */
    overflow: visible !important; 
    /* Crée un contexte d'empilement propre */
    isolation: isolate;
    /* On retire le background ici, il est géré par .fog-badge-background */
    background: transparent !important; 
}

/* --- Calque 0 : Le Fond du Badge (La "Boîte") --- */
.fog-badge-background {
    position: absolute;
    inset: 0;
    /* Le dégradé sombre original */
    background: linear-gradient(to bottom right, rgba(30, 41, 59, 0.87), rgba(15, 23, 42, 0.86));
    border-radius: 0.5rem; /* rounded-lg équivalent */
    border: 1px solid rgba(71, 85, 105, 0.5); /* Bordure subtile */
    z-index: 0; /* Niveau zéro de référence */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
}

/* --- Calque 1 : Le Contenu Texte (Premier Plan) --- */
.fog-war-badge-container .fog-war-icon,
.fog-war-badge-container .fog-war-content {
    position: relative;
    z-index: 10; /* Au-dessus du fond, sous la brume avant */
    text-shadow: 0 2px 3px rgba(0,0,0,1); /* Ombre forte pour lisibilité max */
}

/* --- Calques Nuages (Images PNG) --- */
.fog-cloud-img {
    position: absolute;
    pointer-events: none; /* Le clic doit traverser */
    user-select: none;
    /* Départ invisible pour éviter le glitch "fixe" au chargement */
    opacity: 0; 
    /* Force le navigateur à gérer le délai sans afficher l'image statique */
    animation-fill-mode: both !important;
    /* Optimisation */
    will-change: transform, opacity; 
    max-width: none;
}

/* 
   ZONE ARRIÈRE (Derrière la boîte) 
   Visible uniquement si le nuage dépasse de la boîte
*/
.fog-cloud-img.back {
    z-index: -10; 
    height: 250%; /* Très grand pour bien déborder */
    width: auto;
    top: -75%; /* Centré verticalement par rapport à la hauteur exagérée */
    opacity: 0.8; /* Bien visible */
    filter: brightness(0.9); /* Légèrement plus sombre pour la profondeur */
}

/* 
   ZONE AVANT (Devant tout le monde) 
   Passe sur le texte et la boîte
*/
.fog-cloud-img.front {
    z-index: 20;
    height: 160%;
    width: auto;
    top: -30%;
    opacity: 0.95; /* Quasi opaque */
}

/* --- ANIMATION : Traversée (Translation) --- */

/* Vers la Droite (->) */
@keyframes cloud-pass-right {
    0% {
        transform: translateX(-150%) scale(0.8);
        opacity: 0;
    }
    5% {
        opacity: 1; /* Apparition rapide */
    }
    70% {
        transform: translateX(100%) scale(1);
        opacity: 1;
    }
    80% {
        transform: translateX(120%) scale(1.1);
        opacity: 0; /* Disparition */
    }
    100% {
        transform: translateX(120%) scale(1.1);
        opacity: 0; /* Reste caché (Pause) */
    }
}

/* Vers la Gauche (<-) */
@keyframes cloud-pass-left {
    0% {
        transform: translateX(150%) scale(1.1);
        opacity: 0;
    }
    5% {
        opacity: 1;
    }
    70% {
        transform: translateX(-100%) scale(1);
        opacity: 1;
    }
    80% {
        transform: translateX(-120%) scale(0.9);
        opacity: 0;
    }
    100% {
        transform: translateX(-120%);
        opacity: 0;
    }
}

/* --- Configuration des Instances --- */

/* Nuage 1 (Arrière) : Passe DERRIÈRE la boîte */
.cloud-instance-1 {
    left: 0;
    /* Cycle long : 12s d'anim + pause incluse */
    animation: cloud-pass-right 14s linear infinite;
}

/* Nuage 2 (Avant) : Passe DEVANT, sens inverse */
.cloud-instance-2 {
    right: 0;
    animation: cloud-pass-left 10s linear infinite;
    animation-delay: 0.5s; /* Décalage */
}

/* Nuage 3 (Avant) : Passe DEVANT, petit retard pour combler le vide */
.cloud-instance-3 {
    left: -10%;
    animation: cloud-pass-right 11s linear infinite;
    animation-delay: 5s; /* Arrive quand les autres ont fini */
}