/* ============================================================
   BCAUB — hero-fx.css
   Effets de fond animés : reflets lumineux, volants, dégradés
   ============================================================ */

/* ---------- Couche FX hero (entre overlay et contenu texte) ---------- */
.hero-fx-canvas {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

/* ---------- Barres de lumière diagonal sweep — hero ---------- */
.hero-fx-light {
    position: absolute;
    top: -50%;
    left: -160%;
    width: 60%;
    height: 200%;
    transform: skewX(-20deg);
    pointer-events: none;
    will-change: left, opacity;
    animation: hero-light-sweep var(--sweep-dur, 7s) ease-in-out var(--sweep-delay, 0.5s) infinite;
}

.hero-fx-light--b {
    --sweep-dur:   11s;
    --sweep-delay: 3.5s;
    width: 40%;
    transform: skewX(-13deg);
}

/* ---- Reflets sur fond sombre (hero image / vidéo) ---- */
.block-hero--image .hero-fx-light,
.block-hero--video .hero-fx-light {
    background: linear-gradient(
        90deg,
        transparent   0%,
        rgba(255, 255, 255, .10) 25%,
        rgba(255, 255, 255, .28) 50%,
        rgba(255, 255, 255, .10) 75%,
        transparent 100%
    );
}

.block-hero--image .hero-fx-light--b,
.block-hero--video .hero-fx-light--b {
    background: linear-gradient(
        90deg,
        transparent   0%,
        rgba(160, 200, 255, .08) 30%,
        rgba(255, 255, 255, .18) 50%,
        rgba(160, 200, 255, .08) 70%,
        transparent 100%
    );
}

/* ---- Reflets sur fond clair (hero sans image ni vidéo) ---- */
.block-hero:not(.block-hero--image):not(.block-hero--video) .hero-fx-light {
    background: linear-gradient(
        90deg,
        transparent  0%,
        rgba(11, 44, 141, .06) 25%,
        rgba(11, 44, 141, .16) 50%,
        rgba(11, 44, 141, .06) 75%,
        transparent 100%
    );
}

.block-hero:not(.block-hero--image):not(.block-hero--video) .hero-fx-light--b {
    background: linear-gradient(
        90deg,
        transparent  0%,
        rgba(11, 44, 141, .04) 30%,
        rgba(11, 44, 141, .11) 50%,
        rgba(11, 44, 141, .04) 70%,
        transparent 100%
    );
}

@keyframes hero-light-sweep {
    0%   { left: -160%; opacity: 0; }
    6%   { opacity: 1; }
    60%  { left: 220%;  opacity: 1; }
    75%  { opacity: 0; }
    100% { left: -160%; opacity: 0; }
}

/* ---- Halo lumineux pulsant en arrière-plan (hero image/vidéo) ---- */
.block-hero--image .hero-fx-canvas::after,
.block-hero--video .hero-fx-canvas::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
        ellipse 70% 60% at 50% 50%,
        rgba(100, 150, 255, .12) 0%,
        transparent 70%
    );
    animation: hero-halo-pulse 6s ease-in-out infinite alternate;
    pointer-events: none;
}

@keyframes hero-halo-pulse {
    0%   { opacity: 0.4; transform: scale(1); }
    100% { opacity: 1;   transform: scale(1.08); }
}

/* ---------- Gradient animé — héro sans image ni vidéo (accueil uniquement, pas les sous-pages) ---------- */
.block-hero:not(.block-hero--image):not(.block-hero--video):not(.block-hero--subpage) {
    background:
        linear-gradient(
            135deg,
            #eef2ff 0%,
            var(--bcaub-blue-lt) 28%,
            #dce8ff 55%,
            #eef3fb 78%,
            var(--bcaub-gray-50) 100%
        );
    background-size: 380% 380%;
    animation: hero-gradient-drift 18s ease infinite;
}

@keyframes hero-gradient-drift {
    0%   { background-position:   0% 50%; }
    33%  { background-position: 100% 30%; }
    66%  { background-position:  55% 90%; }
    100% { background-position:   0% 50%; }
}

/* ================================================================
   SECTION CRÉNEAUX — reflets et animations de fond
   ================================================================ */

/* (reflets supprimés sur créneaux fond dégradé/image — conservés sur hero uniquement) */

@keyframes section-sweep {
    0%   { left: -165%; opacity: 0; }
    7%   { opacity: 1; }
    62%  { left: 220%;  opacity: 1; }
    76%  { opacity: 0; }
    100% { left: -165%; opacity: 0; }
}

/* Gradient animé sur créneaux fond blanc/neutre */
.block-creneaux--bg-none {
    background: linear-gradient(135deg, #f4f7ff 0%, var(--bcaub-blue-lt) 40%, #dde8ff 65%, #f4f7ff 100%);
    background-size: 320% 320%;
    animation: section-gradient-drift 22s ease infinite;
}

/* ================================================================
   SECTIONS BLANCHES ET GRISES — fond animé subtil
   ================================================================ */

/* Position relative + overflow nécessaires pour les pseudo-éléments */
.block-evenements,
.block-equipes,
.block-partenaires,
.block-instagram,
.block-image-texte {
    position: relative;
    overflow: hidden;
}

/* Fond animé : sections blanches pures */
.block-evenements,
.block-instagram,
.block-image-texte {
    background: linear-gradient(150deg, #ffffff 0%, #f6f9ff 38%, #edf2ff 62%, #ffffff 100%);
    background-size: 350% 350%;
    animation: section-gradient-drift 28s ease infinite;
}
.block-instagram {
    background: linear-gradient(135deg, var(--bcaub-blue) 0%, var(--bcaub-blue-dk) 20%, var(--bcaub-red-dk) 100%);
    color: var(--bcaub-white);
}

/* Fond animé : sections gris clair (section--alt) */
.block-equipes,
.block-partenaires {
    background: linear-gradient(150deg, #f8fafc 0%, #eef2ff 40%, #f2f6ff 68%, #f8fafc 100%);
    background-size: 350% 350%;
    animation: section-gradient-drift 32s ease infinite;
}
.block-partenaires {
    background: linear-gradient(135deg, var(--bcaub-blue) 0%, var(--bcaub-blue-dk) 25%, var(--bcaub-red-dk) 100%);
    color:white;
}
.block-partenaires *{
    color:white;
}
@keyframes section-gradient-drift {
    0%   { background-position:  0%  50%; }
    33%  { background-position: 100% 30%; }
    66%  { background-position:  55% 90%; }
    100% { background-position:  0%  50%; }
}

/* Reflet diagonal sur sections fond clair — opacité augmentée */
.block-evenements::before,
.block-equipes::before,
.block-instagram::before,
.block-image-texte::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -160%;
    width: 55%;
    height: 200%;
    transform: skewX(-16deg);
    pointer-events: none;
    z-index: 0;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(11, 44, 141, .06) 20%,
        rgba(11, 44, 141, .16) 45%,
        rgba(11, 44, 141, .20) 50%,
        rgba(11, 44, 141, .16) 55%,
        rgba(11, 44, 141, .06) 80%,
        transparent 100%);
    animation: section-sweep 10s ease-in-out 2s infinite;
}

/* Assure que le contenu des sections reste au-dessus des effets de fond */
.block-evenements > .container,
.block-equipes > .container,
.block-partenaires > .container,
.block-instagram > .container,
.block-image-texte > .container,
.block-image-texte > .block-image-texte__inner {
    position: relative;
    z-index: 1;
}

/* ---------- Volants de badminton (injectés par JS) ---------- */
.hero-shuttle {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    will-change: transform, opacity;
}

/* ================================================================
   REDUCED MOTION
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
    .hero-fx-light,
    .hero-fx-canvas::after,
    .block-evenements::before,
    .block-equipes::before,
    .block-instagram::before,
    .block-image-texte::before { animation: none; opacity: 0; }

    .hero-shuttle { display: none; }

    .block-hero:not(.block-hero--image):not(.block-hero--video),
    .block-creneaux--bg-none,
    .block-evenements,
    .block-instagram,
    .block-image-texte,
    .block-equipes,
    .block-partenaires { animation: none; background-size: 100% 100%; }
}