/* ╔═══════════════════════════════════════════════════════════╗
   ║ LTC ANIMATED BACKGROUND v5                                ║
   ║ S'intègre dans les conteneurs/flexbox Elementor.          ║
   ║ Le wrapper .ltc-ab est injecté en JS dans les conteneurs  ║
   ║ ayant data-ltc-ab-enabled="yes".                          ║
   ╚═══════════════════════════════════════════════════════════╝ */

.ltc-ab{
    --ltc-ab-c1:#1679BE;
    --ltc-ab-c2:#ffffff;
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    overflow:hidden;
    pointer-events:none;
    background:transparent;
}

/* Z-index */
.ltc-ab--back  {z-index:1;}
.ltc-ab--front {z-index:50;}


/* ──────────────── PARTICULES ──────────────── */
.ltc-ab__p{
    position:absolute;
    border-radius:50%;
    pointer-events:none;
    will-change:transform;
}


/* ╔══════════════════════════════════════════════════════════╗
   ║ 1 — DUST                                                  ║
   ╚══════════════════════════════════════════════════════════╝ */
.ltc-ab--dust .ltc-ab__p{
    background:radial-gradient(circle, var(--ltc-ab-c2) 0%, var(--ltc-ab-c1) 60%, transparent 100%);
    box-shadow:0 0 8px var(--ltc-ab-c1);
    bottom:-10px;
    animation:ltcAbDust 12s linear infinite;
}
@keyframes ltcAbDust{
    0%  {transform:translate3d(0,0,0); opacity:0;}
    10% {opacity:1;}
    50% {transform:translate3d(calc(var(--drift)/2), -200px, 0);}
    90% {opacity:1;}
    100%{transform:translate3d(var(--drift), -120vh, 0); opacity:0;}
}


/* ╔══════════════════════════════════════════════════════════╗
   ║ 2 — EMBERS                                                ║
   ╚══════════════════════════════════════════════════════════╝ */
.ltc-ab--embers .ltc-ab__p{
    background:radial-gradient(circle, #ffaa00 0%, var(--ltc-ab-c1) 50%, transparent 100%);
    box-shadow:0 0 12px #ff6b00;
    bottom:-20px;
    animation:ltcAbEmbers 10s ease-out infinite;
}
@keyframes ltcAbEmbers{
    0%  {transform:translate3d(0,0,0) scale(0.6); opacity:0;}
    10% {opacity:1; transform:translate3d(0,-30px,0) scale(1);}
    50% {transform:translate3d(calc(var(--drift)*1.5), -50%, 0) scale(1.1);}
    90% {opacity:0.5;}
    100%{transform:translate3d(calc(var(--drift)*2), -120vh, 0) scale(0.4); opacity:0;}
}


/* ╔══════════════════════════════════════════════════════════╗
   ║ 3 — SNOW                                                  ║
   ╚══════════════════════════════════════════════════════════╝ */
.ltc-ab--snow .ltc-ab__p{
    background:radial-gradient(circle, #fff 0%, rgba(255,255,255,0.6) 100%);
    box-shadow:0 0 6px rgba(255,255,255,0.8);
    top:-10px;
    animation:ltcAbSnow 14s linear infinite;
}
@keyframes ltcAbSnow{
    0%  {transform:translate3d(0,0,0); opacity:0;}
    10% {opacity:1;}
    90% {opacity:1;}
    100%{transform:translate3d(var(--drift), 120vh, 0); opacity:0;}
}


/* ╔══════════════════════════════════════════════════════════╗
   ║ 4 — RAIN                                                  ║
   ╚══════════════════════════════════════════════════════════╝ */
.ltc-ab--rain .ltc-ab__p{
    background:linear-gradient(180deg, transparent 0%, var(--ltc-ab-c1) 100%);
    border-radius:0 0 2px 2px;
    width:1.5px !important;
    height:18px !important;
    top:-30px;
    box-shadow:none;
    animation:ltcAbRain 1.5s linear infinite;
}
@keyframes ltcAbRain{
    0%  {transform:translate3d(0,0,0); opacity:0;}
    10% {opacity:0.8;}
    100%{transform:translate3d(-40px, 110vh, 0); opacity:0;}
}


/* ╔══════════════════════════════════════════════════════════╗
   ║ 5 — TILES                                                 ║
   ╚══════════════════════════════════════════════════════════╝ */
.ltc-ab--tiles .ltc-ab__pattern{
    position:absolute;
    inset:-20px;
    background-image:
        radial-gradient(circle at 20px 0px, transparent 18px, var(--ltc-ab-c1) 19px, var(--ltc-ab-c1) 20px, transparent 21px),
        radial-gradient(circle at 60px 0px, transparent 18px, var(--ltc-ab-c1) 19px, var(--ltc-ab-c1) 20px, transparent 21px);
    background-size:80px 40px;
    background-repeat:repeat;
    opacity:0.5;
    animation:ltcAbTilesScroll 40s linear infinite;
}
@keyframes ltcAbTilesScroll{
    from{background-position:0 0, 0 0;}
    to  {background-position:80px 40px, 80px 40px;}
}


/* ╔══════════════════════════════════════════════════════════╗
   ║ 6 — BRICKS                                                ║
   ╚══════════════════════════════════════════════════════════╝ */
.ltc-ab--bricks .ltc-ab__pattern{
    position:absolute;
    inset:-20px;
    background:
        linear-gradient(var(--ltc-ab-c1) 1px, transparent 1px) 0 0 / 100px 50px,
        linear-gradient(90deg, var(--ltc-ab-c1) 1px, transparent 1px) 0 0 / 50px 25px,
        linear-gradient(90deg, transparent 24px, var(--ltc-ab-c1) 24px, var(--ltc-ab-c1) 25px, transparent 25px) 25px 25px / 50px 50px;
    opacity:0.5;
    animation:ltcAbBricksScroll 60s linear infinite;
}
@keyframes ltcAbBricksScroll{
    from{background-position:0 0, 0 0, 25px 25px;}
    to  {background-position:100px 0, 50px 0, 75px 25px;}
}


/* ╔══════════════════════════════════════════════════════════╗
   ║ 7 — LINES                                                 ║
   ╚══════════════════════════════════════════════════════════╝ */
.ltc-ab--lines .ltc-ab__pattern{
    position:absolute;
    inset:-50px;
    background-image:repeating-linear-gradient(
        45deg,
        transparent 0,
        transparent 30px,
        var(--ltc-ab-c1) 30px,
        var(--ltc-ab-c1) 31px,
        transparent 31px,
        transparent 60px
    );
    opacity:0.5;
    animation:ltcAbLinesScroll 15s linear infinite;
}
@keyframes ltcAbLinesScroll{
    from{background-position:0 0;}
    to  {background-position:60px 60px;}
}


/* ╔══════════════════════════════════════════════════════════╗
   ║ 8 — GRID                                                  ║
   ╚══════════════════════════════════════════════════════════╝ */
.ltc-ab--grid .ltc-ab__pattern{
    position:absolute;
    inset:0;
    background-image:
        linear-gradient(var(--ltc-ab-c1) 1px, transparent 1px),
        linear-gradient(90deg, var(--ltc-ab-c1) 1px, transparent 1px);
    background-size:50px 50px;
    opacity:0.5;
    animation:ltcAbGridPulse 6s ease-in-out infinite;
}
@keyframes ltcAbGridPulse{
    0%,100%{opacity:0.3;}
    50%    {opacity:0.7;}
}


/* ╔══════════════════════════════════════════════════════════╗
   ║ 9 — WAVES                                                 ║
   ╚══════════════════════════════════════════════════════════╝ */
.ltc-ab__waves{
    position:absolute;
    bottom:0; left:0;
    width:200%;
    height:50%;
    min-height:120px;
}
.ltc-ab__wave1{animation:ltcAbWaveMove 12s ease-in-out infinite alternate;}
.ltc-ab__wave2{animation:ltcAbWaveMove 16s ease-in-out infinite alternate-reverse;}
@keyframes ltcAbWaveMove{
    from{transform:translateX(0);}
    to  {transform:translateX(-50px);}
}


/* ╔══════════════════════════════════════════════════════════╗
   ║ 10 — ORBS                                                 ║
   ╚══════════════════════════════════════════════════════════╝ */
.ltc-ab__orb{
    position:absolute;
    border-radius:50%;
    pointer-events:none;
    filter:blur(40px);
    will-change:transform;
    animation:ltcAbOrbFloat 18s ease-in-out infinite alternate;
}
@keyframes ltcAbOrbFloat{
    0%  {transform:translate(0,0) scale(1);}
    33% {transform:translate(40px,-30px) scale(1.1);}
    66% {transform:translate(-30px,40px) scale(0.9);}
    100%{transform:translate(20px,20px) scale(1.05);}
}


/* ╔══════════════════════════════════════════════════════════╗
   ║ 11 — CIRCUIT                                              ║
   ╚══════════════════════════════════════════════════════════╝ */
.ltc-ab--circuit .ltc-ab__pattern{
    position:absolute;
    inset:0;
    background:
        linear-gradient(var(--ltc-ab-c1), var(--ltc-ab-c1)) 50px 0 / 1px 100% no-repeat,
        linear-gradient(var(--ltc-ab-c1), var(--ltc-ab-c1)) 150px 0 / 1px 100% no-repeat,
        linear-gradient(90deg, var(--ltc-ab-c1), var(--ltc-ab-c1)) 0 50px / 100% 1px no-repeat,
        linear-gradient(90deg, var(--ltc-ab-c1), var(--ltc-ab-c1)) 0 150px / 100% 1px no-repeat,
        radial-gradient(circle at 50px 50px, var(--ltc-ab-c1) 0 4px, transparent 5px),
        radial-gradient(circle at 150px 150px, var(--ltc-ab-c1) 0 4px, transparent 5px),
        radial-gradient(circle at 50px 150px, var(--ltc-ab-c1) 0 4px, transparent 5px),
        radial-gradient(circle at 150px 50px, var(--ltc-ab-c1) 0 4px, transparent 5px);
    background-size:200px 200px;
    background-repeat:repeat;
    opacity:0.5;
    animation:ltcAbCircuitPulse 4s ease-in-out infinite;
}
@keyframes ltcAbCircuitPulse{
    0%,100%{opacity:0.3;}
    50%    {opacity:0.7;}
}


/* ╔══════════════════════════════════════════════════════════╗
   ║ 12 — TOPO                                                 ║
   ╚══════════════════════════════════════════════════════════╝ */
.ltc-ab--topo .ltc-ab__pattern{
    position:absolute;
    inset:-30px;
    background:
        radial-gradient(circle at 200px 200px, transparent 38px, var(--ltc-ab-c1) 39px, transparent 40px),
        radial-gradient(circle at 200px 200px, transparent 78px, var(--ltc-ab-c1) 79px, transparent 80px),
        radial-gradient(circle at 200px 200px, transparent 118px, var(--ltc-ab-c1) 119px, transparent 120px),
        radial-gradient(circle at 200px 200px, transparent 158px, var(--ltc-ab-c1) 159px, transparent 160px);
    background-size:400px 400px;
    background-repeat:repeat;
    opacity:0.5;
    animation:ltcAbTopoScroll 60s linear infinite;
}
@keyframes ltcAbTopoScroll{
    from{background-position:0 0;}
    to  {background-position:400px 400px;}
}


/* ╔══════════════════════════════════════════════════════════╗
   ║ 13 — GRADIENT                                             ║
   ╚══════════════════════════════════════════════════════════╝ */
.ltc-ab__gradient{
    position:absolute;
    inset:-50%;
    background:conic-gradient(from 0deg, var(--ltc-ab-c1), var(--ltc-ab-c2), var(--ltc-ab-c1));
    filter:blur(60px);
    opacity:0.6;
    animation:ltcAbGradRotate 20s linear infinite;
}
@keyframes ltcAbGradRotate{
    from{transform:rotate(0deg);}
    to  {transform:rotate(360deg);}
}


/* ╔══════════════════════════════════════════════════════════╗
   ║ 14 — STARS                                                ║
   ╚══════════════════════════════════════════════════════════╝ */
.ltc-ab--stars .ltc-ab__p{
    background:#fff;
    box-shadow:0 0 8px #fff, 0 0 16px var(--ltc-ab-c2);
    animation:ltcAbStarsTwinkle 3s ease-in-out infinite;
}
@keyframes ltcAbStarsTwinkle{
    0%,100%{opacity:0.3; transform:scale(0.7);}
    50%    {opacity:1; transform:scale(1.3);}
}


/* ╔══════════════════════════════════════════════════════════╗
   ║ VITESSES                                                  ║
   ╚══════════════════════════════════════════════════════════╝ */
.ltc-ab--speed-slow .ltc-ab__p,
.ltc-ab--speed-slow .ltc-ab__orb,
.ltc-ab--speed-slow .ltc-ab__pattern,
.ltc-ab--speed-slow .ltc-ab__wave1,
.ltc-ab--speed-slow .ltc-ab__wave2,
.ltc-ab--speed-slow .ltc-ab__gradient{animation-duration:24s !important;}
.ltc-ab--speed-fast .ltc-ab__p,
.ltc-ab--speed-fast .ltc-ab__orb,
.ltc-ab--speed-fast .ltc-ab__pattern,
.ltc-ab--speed-fast .ltc-ab__wave1,
.ltc-ab--speed-fast .ltc-ab__wave2,
.ltc-ab--speed-fast .ltc-ab__gradient{animation-duration:6s !important;}
.ltc-ab--speed-slow.ltc-ab--rain .ltc-ab__p{animation-duration:3s !important;}
.ltc-ab--speed-fast.ltc-ab--rain .ltc-ab__p{animation-duration:0.7s !important;}


/* ╔══════════════════════════════════════════════════════════╗
   ║ ACCESSIBILITÉ                                             ║
   ╚══════════════════════════════════════════════════════════╝ */
@media (prefers-reduced-motion: reduce){
    .ltc-ab__p,
    .ltc-ab__orb,
    .ltc-ab__pattern,
    .ltc-ab__wave1,
    .ltc-ab__wave2,
    .ltc-ab__gradient{
        animation-duration:0.001ms !important;
        animation-iteration-count:1 !important;
    }
}
