/* =========================================================
   FOND ANIMÉ GLOBAL SBI
   - glow bas de page attaché au document
   - brume de profondeur
   - poussière / particules
   - terrain de football vertical, fin, premium
   - terrain en parallaxe lente indépendante
   - lasers en parallaxe plus douce
   - grain vidéo hero
   ========================================================= */

/* SBI 8.0P.31 - deux halos de bas de page, attachés au document.
   Source unique des lumières principales bas gauche / bas droite.
   Pas de layer fixed, pas d’animation, pas de nouveau blur fullscreen. */
body::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(
            ellipse min(82vw, 1180px) min(132vh, 1380px) at 0% 100%,
            rgba(96, 162, 255, 0.255) 0%,
            rgba(42, 87, 255, 0.155) 16%,
            rgba(42, 87, 255, 0.072) 34%,
            rgba(42, 87, 255, 0.028) 52%,
            rgba(42, 87, 255, 0.008) 66%,
            rgba(42, 87, 255, 0) 78%
        ),
        radial-gradient(
            ellipse min(80vw, 1140px) min(126vh, 1320px) at 100% 100%,
            rgba(0, 81, 255, 0.22) 0%,
            rgba(0, 81, 255, 0.14) 16%,
            rgba(0, 81, 255, 0.066) 35%,
            rgba(0, 81, 255, 0.025) 53%,
            rgba(226, 0, 26, 0.010) 66%,
            rgba(0, 81, 255, 0) 78%
        );
}

body::after {
    content: none !important;
    display: none !important;
}

.sbi-background-root {
    position: relative;
    z-index: 0;
    pointer-events: none;
}

.fixed-bg-glow {
    display: none;
}

/* ---------------------------------------------------------
   CALQUES FIXES : ambiance générale
   --------------------------------------------------------- */
.sbi-bg-fixed {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

/* Brumes */
.sbi-fog {
    position: absolute;
    width: 112vw;
    height: 112vh;
    border-radius: 50%;
    opacity: 0.205;
    pointer-events: none;
}

.sbi-fog-1 {
    top: -42%;
    left: -48%;
    background: radial-gradient(circle, rgba(0, 81, 255, 0.042) 0%, rgba(0, 81, 255, 0) 62%);
    animation: fogDrift 55s infinite alternate ease-in-out;
}

.sbi-fog-2 {
    bottom: -52%;
    right: -50%;
    background: radial-gradient(circle, rgba(0, 81, 255, 0.026) 0%, rgba(0, 81, 255, 0) 58%);
    animation: fogDrift 65s infinite alternate-reverse ease-in-out;
}

@keyframes fogDrift {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(4vw, 4vh) scale(1.08); }
}

/* Particules / poussière */
.sbi-particle {
    position: absolute;
    background-color: rgba(255, 255, 255, 0.13);
    box-shadow: 0 0 10px 1px rgba(0, 162, 255, 0.38);
    opacity: 0;
    will-change: transform, opacity;
}

.sbi-particle:nth-child(3n) {
    width: 5px;
    height: 5px;
    border-radius: 40% 60% 70% 30%;
}

.sbi-particle:nth-child(3n + 1) {
    width: 4px;
    height: 4px;
    border-radius: 60% 40% 30% 70%;
}

.sbi-particle:nth-child(3n + 2) {
    width: 14px;
    height: 12px;
    border-radius: 50% 30% 60% 40%;
    background-color: rgba(255, 255, 255, 0.05);
    box-shadow: 0 0 14px 4px rgba(0, 81, 255, 0.16);
    filter: blur(3px);
}

.sbi-particle:nth-child(8)  { top: 10%; left: 80%; animation: dustDrift1 24s infinite linear -2s; }
.sbi-particle:nth-child(9)  { top: 40%; left: 90%; animation: dustDrift2 30s infinite linear -7s; }
.sbi-particle:nth-child(10) { top: 30%; left: 40%; animation: dustDriftBig 36s infinite linear -11s; }
.sbi-particle:nth-child(11) { top: 75%; left: 70%; animation: dustDrift3 28s infinite linear -4s; }
.sbi-particle:nth-child(12) { top: 15%; left: 25%; animation: dustDrift1 30s infinite linear -9s; }
.sbi-particle:nth-child(13) { top: 55%; left: 15%; animation: dustDriftBig 40s infinite linear -15s; }
.sbi-particle:nth-child(14) { top: 85%; left: 20%; animation: dustDrift2 27s infinite linear -1s; }
.sbi-particle:nth-child(15) { top: 45%; left: 60%; animation: dustDrift3 33s infinite linear -13s; }
.sbi-particle:nth-child(16) { top: 65%; left: 50%; animation: dustDriftBig 39s infinite linear -6s; }
.sbi-particle:nth-child(17) { top: 20%; left: 55%; animation: dustDrift1 29s infinite linear -18s; }
.sbi-particle:nth-child(18) { top: 90%; left: 85%; animation: dustDrift2 34s infinite linear -3s; }
.sbi-particle:nth-child(19) { top: 25%; left: 10%; animation: dustDriftBig 38s infinite linear -10s; }
.sbi-particle:nth-child(20) { top: 5%;  left: 45%; animation: dustDrift3 25s infinite linear -5s; }
.sbi-particle:nth-child(21) { top: 80%; left: 10%; animation: dustDrift1 31s infinite linear -12s; }
.sbi-particle:nth-child(22) { top: 35%; left: 85%; animation: dustDriftBig 44s infinite linear -20s; }
.sbi-particle:nth-child(23) { top: 60%; left: 30%; animation: dustDrift2 35s infinite linear -8s; }
.sbi-particle:nth-child(24) { top: 15%; left: 95%; animation: dustDrift3 30s infinite linear -14s; }
.sbi-particle:nth-child(25) { top: 95%; left: 40%; animation: dustDriftBig 41s infinite linear -2s; }
.sbi-particle:nth-child(26) { top: 50%; left: 75%; animation: dustDrift1 28s infinite linear -17s; }
.sbi-particle:nth-child(27) { top: 70%; left: 5%;  animation: dustDrift2 33s infinite linear -22s; }
.sbi-particle:nth-child(28) { top: 12%; left: 12%; animation: dustDrift1 27s infinite linear -6s; }
.sbi-particle:nth-child(29) { top: 22%; left: 72%; animation: dustDrift2 32s infinite linear -16s; }
.sbi-particle:nth-child(30) { top: 18%; left: 52%; animation: dustDriftBig 42s infinite linear -9s; }
.sbi-particle:nth-child(31) { top: 68%; left: 82%; animation: dustDrift3 29s infinite linear -19s; }
.sbi-particle:nth-child(32) { top: 38%; left: 22%; animation: dustDrift1 31s infinite linear -12s; }
.sbi-particle:nth-child(33) { top: 58%; left: 92%; animation: dustDriftBig 40s infinite linear -4s; }
.sbi-particle:nth-child(34) { top: 78%; left: 32%; animation: dustDrift2 34s infinite linear -15s; }
.sbi-particle:nth-child(35) { top: 8%;  left: 62%; animation: dustDrift3 26s infinite linear -20s; }
.sbi-particle:nth-child(36) { top: 88%; left: 62%; animation: dustDriftBig 45s infinite linear -10s; }
.sbi-particle:nth-child(37) { top: 28%; left: 78%; animation: dustDrift1 29s infinite linear -7s; }
.sbi-particle:nth-child(38) { top: 48%; left: 8%;  animation: dustDrift2 36s infinite linear -13s; }
.sbi-particle:nth-child(39) { top: 72%; left: 46%; animation: dustDriftBig 41s infinite linear -17s; }
.sbi-particle:nth-child(40) { top: 14%; left: 36%; animation: dustDrift3 30s infinite linear -3s; }
.sbi-particle:nth-child(41) { top: 62%; left: 58%; animation: dustDrift1 33s infinite linear -22s; }
.sbi-particle:nth-child(42) { top: 42%; left: 48%; animation: dustDrift2 31s infinite linear -18s; }
.sbi-particle:nth-child(43) { top: 82%; left: 74%; animation: dustDriftBig 43s infinite linear -12s; }
.sbi-particle:nth-child(44) { top: 26%; left: 88%; animation: dustDrift3 28s infinite linear -21s; }
.sbi-particle:nth-child(45) { top: 52%; left: 68%; animation: dustDrift1 30s infinite linear -25s; }
.sbi-particle:nth-child(46) { top: 92%; left: 18%; animation: dustDrift2 35s infinite linear -5s; }
.sbi-particle:nth-child(47) { top: 34%; left: 58%; animation: dustDriftBig 39s infinite linear -14s; }

@keyframes dustDrift1 {
    0%   { transform: translate(0, 0) rotate(0deg); opacity: 0; }
    20%  { opacity: 0.40; }
    80%  { opacity: 0.40; }
    100% { transform: translate(-8vw, -3vh) rotate(140deg); opacity: 0; }
}

@keyframes dustDrift2 {
    0%   { transform: translate(0, 0) rotate(0deg); opacity: 0; }
    25%  { opacity: 0.30; }
    75%  { opacity: 0.30; }
    100% { transform: translate(-12vw, 5vh) rotate(-90deg); opacity: 0; }
}

@keyframes dustDrift3 {
    0%   { transform: translate(0, 0) rotate(0deg); opacity: 0; }
    15%  { opacity: 0.42; }
    85%  { opacity: 0.42; }
    100% { transform: translate(-6vw, -2vh) rotate(70deg); opacity: 0; }
}

@keyframes dustDriftBig {
    0%   { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 0; }
    20%  { opacity: 0.12; }
    80%  { opacity: 0.12; }
    100% { transform: translate(-14vw, 3vh) rotate(45deg) scale(1.22); opacity: 0; }
}

/* ---------------------------------------------------------
   CALQUE TERRAIN : parallaxe lente indépendante
   --------------------------------------------------------- */
.sbi-field-parallax {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    will-change: transform;
    transform: translate3d(0, 0, 0);
}

.sbi-football-field {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(72vw, 940px);
    aspect-ratio: 680 / 1200;
    transform: translate(-50%, -50%);
    transform-origin: center;
    opacity: 0.138;
    mix-blend-mode: screen;
    filter: drop-shadow(0 0 11px rgba(0, 81, 255, 0.07));
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 680 1200'%3E%3Cg fill='none' stroke='white' stroke-opacity='.24' stroke-width='.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='34' y='34' width='612' height='1132'/%3E%3Cline x1='34' y1='600' x2='646' y2='600'/%3E%3Ccircle cx='340' cy='600' r='92'/%3E%3Crect x='190' y='34' width='300' height='165'/%3E%3Crect x='255' y='34' width='170' height='65'/%3E%3Cpath d='M259 199 A92 92 0 0 0 421 199'/%3E%3Crect x='190' y='1001' width='300' height='165'/%3E%3Crect x='255' y='1101' width='170' height='65'/%3E%3Cpath d='M259 1001 A92 92 0 0 1 421 1001'/%3E%3Cpath d='M34 72 A38 38 0 0 1 72 34'/%3E%3Cpath d='M608 34 A38 38 0 0 1 646 72'/%3E%3Cpath d='M34 1128 A38 38 0 0 0 72 1166'/%3E%3Cpath d='M608 1166 A38 38 0 0 0 646 1128'/%3E%3C/g%3E%3Cg fill='white' fill-opacity='.20'%3E%3Ccircle cx='340' cy='600' r='3'/%3E%3Ccircle cx='340' cy='150' r='3'/%3E%3Ccircle cx='340' cy='1050' r='3'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.sbi-football-field::after {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.60;
    mix-blend-mode: screen;
    background:
        radial-gradient(circle at 50% 50%, rgba(0, 81, 255, 0.50) 0 1.3px, rgba(0, 81, 255, 0.12) 3px, transparent 7px),
        radial-gradient(circle at 50% 12.5%, rgba(255, 255, 255, 0.34) 0 1px, rgba(0, 81, 255, 0.11) 3px, transparent 6px),
        radial-gradient(circle at 50% 87.5%, rgba(255, 255, 255, 0.34) 0 1px, rgba(0, 81, 255, 0.11) 3px, transparent 6px),
        radial-gradient(circle at 36% 28%, rgba(0, 81, 255, 0.34) 0 1px, transparent 4px),
        radial-gradient(circle at 64% 72%, rgba(0, 81, 255, 0.28) 0 1px, transparent 4px);
}

/* ---------------------------------------------------------
   CALQUE LASERS : parallaxe indépendante, ralentie
   --------------------------------------------------------- */
.sbi-bg-parallax {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    will-change: transform;
    transform: translate3d(0, 0, 0);
}

.sbi-line {
    position: absolute;
    top: -150%;
    height: 300vh;
    background: linear-gradient(
        to bottom,
        transparent 0%,
        transparent 42%,
        rgba(0, 162, 255, 0.105) 48%,
        rgba(255, 255, 255, 0.32) 50%,
        rgba(0, 162, 255, 0.105) 52%,
        transparent 58%,
        transparent 100%
    );
    will-change: transform, opacity;
    border-radius: 10px;
}

.sbi-line:nth-child(1),
.sbi-line:nth-child(3),
.sbi-line:nth-child(8),
.sbi-line:nth-child(11),
.sbi-line:nth-child(15),
.sbi-line:nth-child(18) {
    width: 2.4px;
    filter: drop-shadow(0 0 10px rgba(0, 162, 255, 0.42));
    z-index: 3;
}

.sbi-line:nth-child(1) { left: 15%; animation: sbiShootFront 42s infinite linear -2s; }
.sbi-line:nth-child(3) { left: 65%; animation: sbiShootFront 48s infinite linear -7s; }

.sbi-line:nth-child(5),
.sbi-line:nth-child(6),
.sbi-line:nth-child(9),
.sbi-line:nth-child(12),
.sbi-line:nth-child(16),
.sbi-line:nth-child(19) {
    width: 1.75px;
    filter: drop-shadow(0 0 5px rgba(0, 162, 255, 0.28)) blur(1.2px);
    z-index: 2;
}

.sbi-line:nth-child(5) { left: 40%; animation: sbiShootMid 70s infinite linear -12s; }
.sbi-line:nth-child(6) { left: 85%; animation: sbiShootMid 78s infinite linear -4s; }

.sbi-line:nth-child(2),
.sbi-line:nth-child(4),
.sbi-line:nth-child(7),
.sbi-line:nth-child(10),
.sbi-line:nth-child(13),
.sbi-line:nth-child(14),
.sbi-line:nth-child(17),
.sbi-line:nth-child(20) {
    width: 1.35px;
    filter: blur(3.5px);
    z-index: 1;
}

.sbi-line:nth-child(2) { left: 25%; animation: sbiShootBg 92s infinite linear -18s; }
.sbi-line:nth-child(4) { left: 55%; animation: sbiShootBg 104s infinite linear -9s; }
.sbi-line:nth-child(7) { left: 8%;  animation: sbiShootBg 98s infinite linear -25s; }
.sbi-line:nth-child(8)  { left: 32%; animation: sbiShootFront 46s infinite linear -15s; }
.sbi-line:nth-child(9)  { left: 73%; animation: sbiShootMid 74s infinite linear -21s; }
.sbi-line:nth-child(10) { left: 92%; animation: sbiShootBg 110s infinite linear -6s; }
.sbi-line:nth-child(11) { left: 48%; animation: sbiShootFront 52s infinite linear -27s; }
.sbi-line:nth-child(12) { left: 20%; animation: sbiShootMid 82s infinite linear -31s; }
.sbi-line:nth-child(13) { left: 60%; animation: sbiShootBg 96s infinite linear -14s; }
.sbi-line:nth-child(14) { left: 3%;  animation: sbiShootBg 108s infinite linear -35s; }
.sbi-line:nth-child(15) { left: 27%; animation: sbiShootFront 44s infinite linear -11s; }
.sbi-line:nth-child(16) { left: 37%; animation: sbiShootMid 76s infinite linear -24s; }
.sbi-line:nth-child(17) { left: 69%; animation: sbiShootBg 102s infinite linear -19s; }
.sbi-line:nth-child(18) { left: 80%; animation: sbiShootFront 50s infinite linear -29s; }
.sbi-line:nth-child(19) { left: 11%; animation: sbiShootMid 84s infinite linear -8s; }
.sbi-line:nth-child(20) { left: 95%; animation: sbiShootBg 112s infinite linear -27s; }

@keyframes sbiShootFront {
    0%   { transform: rotate(45deg) translateY(-300vh); opacity: 0; }
    28%  { opacity: 0; }
    42%  { opacity: 0.28; }
    58%  { opacity: 0.30; }
    72%  { opacity: 0; }
    100% { transform: rotate(45deg) translateY(300vh); opacity: 0; }
}

@keyframes sbiShootMid {
    0%   { transform: rotate(45deg) translateY(-300vh); opacity: 0; }
    30%  { opacity: 0; }
    46%  { opacity: 0.14; }
    60%  { opacity: 0.16; }
    74%  { opacity: 0; }
    100% { transform: rotate(45deg) translateY(300vh); opacity: 0; }
}

@keyframes sbiShootBg {
    0%   { transform: rotate(45deg) translateY(-300vh); opacity: 0; }
    32%  { opacity: 0; }
    48%  { opacity: 0.055; }
    62%  { opacity: 0.07; }
    76%  { opacity: 0; }
    100% { transform: rotate(45deg) translateY(300vh); opacity: 0; }
}

/* ---------------------------------------------------------
   GRAIN VIDÉO HERO
   --------------------------------------------------------- */
.hero-section::after {
    content: '';
    position: absolute;
    inset: -12%;
    z-index: 1;
    pointer-events: none;
    opacity: 0.024;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
    background-size: 160px 160px;
    animation: heroNoiseShift 1.4s steps(2, end) infinite;
}

@keyframes heroNoiseShift {
    0%   { transform: translate3d(0, 0, 0); }
    10%  { transform: translate3d(-1.0%, 0.5%, 0); }
    20%  { transform: translate3d(0.7%, -0.8%, 0); }
    30%  { transform: translate3d(-0.5%, -0.4%, 0); }
    40%  { transform: translate3d(1.0%, 0.7%, 0); }
    50%  { transform: translate3d(-0.8%, 0.9%, 0); }
    60%  { transform: translate3d(0.6%, -0.5%, 0); }
    70%  { transform: translate3d(-1.1%, -0.7%, 0); }
    80%  { transform: translate3d(0.8%, 0.5%, 0); }
    90%  { transform: translate3d(-0.4%, 0.8%, 0); }
    100% { transform: translate3d(0, 0, 0); }
}


@media (max-width: 900px) {
    body::before,
    body::after {
        width: 72vw;
        height: 48vh;
    }

    body::after {
        opacity: 0.82;
    }
}

@media (max-width: 640px) {
    body::before,
    body::after {
        width: 86vw;
        height: 42vh;
    }

    body::after {
        opacity: 0.74;
    }
}


@media (max-width: 900px) {
     .sbi-football-field {
        opacity: 0.145;
    }
}

@media (max-width: 640px) {
     .sbi-football-field {
        opacity: 0.152;
    }
     .sbi-football-field::after {
        opacity: 0.66;
    }
}

@media (max-width: 768px) {
    .sbi-background-root *,
    .sbi-background-root *::before,
    .sbi-background-root *::after {
        animation: none !important;
        transition-duration: 0.01ms !important;
        will-change: auto !important;
    }

    .sbi-bg-parallax,
    .sbi-field-parallax {
        transform: none !important;
    }

    .sbi-particle,
    .sbi-line {
        display: none !important;
    }

    .hero-section::after {
        animation: none !important;
    }
}