/**
 * Banner Effect Animation - Vanilla CSS
 * Animation interactive pour l'image d'effet de la bannière
 */

/* Keyframes pour le mouvement naturel continu */
@keyframes floatNatural {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }
    25% {
        transform: translate(10px, -15px) rotate(1deg);
    }
    50% {
        transform: translate(-5px, -25px) rotate(-0.5deg);
    }
    75% {
        transform: translate(-15px, -10px) rotate(0.5deg);
    }
}

/* Keyframes pour l'effet de lueur pulsante */
@keyframes glowPulse {
    0%, 100% {
        filter: drop-shadow(0 0 30px rgba(255, 255, 255, 0.5))
                drop-shadow(0 0 60px rgba(255, 255, 255, 0.4))
                drop-shadow(0 0 90px rgba(200, 220, 255, 0.3));
    }
    50% {
        filter: drop-shadow(0 0 50px rgba(255, 255, 255, 0.7))
                drop-shadow(0 0 80px rgba(255, 255, 255, 0.5))
                drop-shadow(0 0 120px rgba(200, 220, 255, 0.4));
    }
}

.x-banner-fullwidth-effect {
    position: relative;
    transition: transform 0.6s ease-out, filter 0.6s ease-out;
    will-change: transform, filter;
    /* Animation continue naturelle */
    animation: floatNatural 8s ease-in-out infinite, 
               glowPulse 6s ease-in-out infinite;
    /* Effet d'ombrage lumineux par défaut */
    filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.3));
}

.x-banner-fullwidth-effect.is-animating {
    /* L'animation sera contrôlée par JavaScript via transform et filter inline */
    /* Les animations CSS seront combinées avec les effets JS */
}

.x-banner-fullwidth {
    position: relative;
    overflow: visible;
}

.x-banner-fullwidth-content {
    position: relative;
    z-index: 2;
}