/* * Synexta Banner FX - Global Styles
 * Version: 1.0
 */

/* 1. CONTENEUR CIBLE (.mainbanner) */
.mainbanner {
    /* Création d'un contexte d'empilement étanche (Isolation)
       Cela empêche les z-index internes de passer devant/derrière le reste du site */
    isolation: isolate;
    position: relative !important;
    overflow: hidden !important;
    
    /* Variables CSS par défaut (injectées par JS, fallback ici) */
    --sbfx-img: none;
    --sbfx-overlay-rgb: 30, 41, 59;
}

/* Sécurité : On force tous les enfants directs existants (le contenu texte/boutons)
   à être positionnés et au-dessus des couches FX */
.mainbanner > *:not(.sbfx-layer) {
    position: relative;
    z-index: 10;
}

/* 2. CLASSES GENERIQUES DES COUCHES (LAYERS) */
.sbfx-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Click-through : laisse passer les clics vers le fond */
}

/* 3. LAYER A : IMAGE DE FOND (KEN BURNS) */
.sbfx-bg {
    z-index: 1;
    background-image: var(--sbfx-img);
    background-size: cover;
    background-position: center 20%; /* Focus visage */
    will-change: transform; /* Optimisation GPU */
    animation: sbfxKenBurns 25s ease-in-out infinite alternate;
}

@keyframes sbfxKenBurns {
    from { transform: scale(1); }
    to { transform: scale(1.15); }
}

/* 4. LAYER B : VOILE (OVERLAY) */
.sbfx-overlay {
    z-index: 2;
    /* Utilisation de la variable RGB injectée pour recréer le dégradé exact validé */
    background: linear-gradient(90deg, 
        rgba(var(--sbfx-overlay-rgb), 0.95) 0%, 
        rgba(var(--sbfx-overlay-rgb), 0.85) 35%, 
        rgba(var(--sbfx-overlay-rgb), 0.4) 60%, 
        rgba(var(--sbfx-overlay-rgb), 0.1) 100%);
}

/* 5. LAYER C : CANVAS (POUSSIERE) */
.sbfx-canvas {
    z-index: 3;
}

/* 6. RESPONSIF */
@media (max-width: 768px) {
    /* Sur mobile, on peut ajuster le dégradé si nécessaire via CSS pur
       sans avoir besoin de toucher au JS. 
       Exemple : passer en vertical pour plus de lisibilité */
    
    .sbfx-overlay {
        background: linear-gradient(0deg, 
            rgba(var(--sbfx-overlay-rgb), 1) 0%, 
            rgba(var(--sbfx-overlay-rgb), 0.5) 100%);
    }
    
    /* Ajustement focus image mobile */
    .sbfx-bg {
        background-position: center center;
    }
}