/* =========================================================
   HERO HOLOGRAPHIQUE
========================================================= */

.ranking-v2-hero.cdv-future-hero {

    --hero-pointer-x: 50%;
    --hero-pointer-y: 50%;
    --hero-energy-angle: 0deg;

    isolation: isolate;

    overflow: hidden;

    border-color:
        transparent !important;

    background:

        radial-gradient(
            600px circle
            at
            var(--hero-pointer-x)
            var(--hero-pointer-y),

            rgba(
                137,
                103,
                255,
                .115
            ),

            transparent 58%
        ),

        radial-gradient(
            470px circle
            at
            90% 55%,

            rgba(
                83,
                211,
                255,
                .085
            ),

            transparent 67%
        ),

        linear-gradient(
            128deg,

            rgba(
                15,
                17,
                39,
                .95
            ),

            rgba(
                8,
                10,
                26,
                .94
            )
            53%,

            rgba(
                5,
                8,
                21,
                .97
            )
        ) !important;

    box-shadow:

        inset
        0 1px 0
        rgba(
            255,
            255,
            255,
            .055
        ),

        inset
        0 -1px 0
        rgba(
            0,
            0,
            0,
            .65
        ),

        0 34px 82px
        rgba(
            0,
            0,
            0,
            .36
        ),

        0 0 55px
        rgba(
            111,
            82,
            255,
            .055
        ) !important;

    transition:
        background-position .15s linear;
}


/* Masque les anciens pseudos décoratifs du Hero.
   Les nouvelles couches les remplacent. */

.ranking-v2-hero.cdv-future-hero::before,
.ranking-v2-hero.cdv-future-hero::after {

    display: none !important;
}


/* Tout le véritable contenu reste devant les animations. */

.ranking-v2-hero.cdv-future-hero
.ranking-v2-hero-copy,

.ranking-v2-hero.cdv-future-hero
.ranking-v2-hero-stats {

    position: relative;

    z-index: 12;
}


/* =========================================================
   BORDURE ÉNERGÉTIQUE
========================================================= */

.cdv-future-border {

    position: absolute;

    inset: 0;

    z-index: 20;

    pointer-events: none;

    border-radius: inherit;

    padding: 1px;

    background:
        conic-gradient(
            from
            var(--hero-energy-angle),

            transparent 0deg,

            transparent 45deg,

            rgba(
                92,
                211,
                255,
                .80
            )
            72deg,

            rgba(
                163,
                111,
                255,
                .92
            )
            100deg,

            rgba(
                244,
                198,
                104,
                .60
            )
            128deg,

            transparent 164deg,

            transparent 270deg,

            rgba(
                105,
                82,
                255,
                .55
            )
            310deg,

            transparent 345deg
        );

    -webkit-mask:

        linear-gradient(
            #000 0 0
        )
        content-box,

        linear-gradient(
            #000 0 0
        );

    -webkit-mask-composite:
        xor;

    mask-composite:
        exclude;

    animation:
        cdvEnergyBorder
        8s
        linear
        infinite;
}


@keyframes cdvEnergyBorder {

    from {

        --hero-energy-angle:
            0deg;
    }

    to {

        --hero-energy-angle:
            360deg;
    }
}


/* Fallback lorsque @property n’est pas pris en charge. */

@supports not (
    background:
    conic-gradient(
        from 1deg,
        red,
        blue
    )
) {

    .cdv-future-border {

        border:
            1px solid
            rgba(
                142,
                110,
                255,
                .35
            );

        background: none;

        -webkit-mask: none;

        mask: none;

        animation: none;
    }

}


/* =========================================================
   COINS TECHNIQUES
========================================================= */

.cdv-future-corner {

    position: absolute;

    z-index: 17;

    width: 37px;
    height: 37px;

    pointer-events: none;

    opacity: .70;
}


.cdv-future-corner::before,
.cdv-future-corner::after {

    content: "";

    position: absolute;

    background:
        linear-gradient(
            90deg,

            rgba(
                92,
                211,
                255,
                .88
            ),

            rgba(
                156,
                111,
                255,
                .35
            )
        );

    box-shadow:
        0 0 12px
        rgba(
            92,
            211,
            255,
            .20
        );
}


.cdv-future-corner::before {

    width: 26px;
    height: 1px;
}


.cdv-future-corner::after {

    width: 1px;
    height: 26px;
}


.cdv-future-corner.top-left {

    left: 15px;
    top: 15px;
}


.cdv-future-corner.top-left::before,
.cdv-future-corner.top-left::after {

    left: 0;
    top: 0;
}


.cdv-future-corner.top-right {

    right: 15px;
    top: 15px;

    transform:
        rotate(90deg);
}


.cdv-future-corner.bottom-right {

    right: 15px;
    bottom: 15px;

    transform:
        rotate(180deg);
}


.cdv-future-corner.bottom-left {

    left: 15px;
    bottom: 15px;

    transform:
        rotate(270deg);
}


/* =========================================================
   GRILLE HOLOGRAPHIQUE
========================================================= */

.cdv-future-grid {

    position: absolute;

    left: -12%;
    right: -12%;
    bottom: -79%;

    z-index: 1;

    height: 130%;

    pointer-events: none;

    opacity: .20;

    background-image:

        linear-gradient(
            rgba(
                113,
                91,
                255,
                .17
            )
            1px,

            transparent 1px
        ),

        linear-gradient(
            90deg,

            rgba(
                92,
                211,
                255,
                .13
            )
            1px,

            transparent 1px
        );

    background-size:
        42px 42px;

    transform-origin:
        center top;

    transform:
        perspective(400px)
        rotateX(64deg);

    animation:
        cdvFutureGridMove
        5.5s
        linear
        infinite;

    -webkit-mask-image:
        linear-gradient(
            180deg,

            transparent,

            black 18%,

            transparent 76%
        );

    mask-image:
        linear-gradient(
            180deg,

            transparent,

            black 18%,

            transparent 76%
        );
}


@keyframes cdvFutureGridMove {

    from {

        background-position:
            0 0;
    }

    to {

        background-position:
            0 42px;
    }
}


/* =========================================================
   FAISCEAU DE BALAYAGE
========================================================= */

.cdv-future-scan {

    position: absolute;

    left: -45%;
    top: -40%;

    z-index: 4;

    width: 30%;
    height: 190%;

    pointer-events: none;

    opacity: 0;

    background:
        linear-gradient(
            90deg,

            transparent,

            rgba(
                125,
                100,
                255,
                .025
            ),

            rgba(
                113,
                216,
                255,
                .12
            ),

            rgba(
                255,
                255,
                255,
                .055
            ),

            transparent
        );

    filter:
        blur(1px);

    transform:
        skewX(-18deg);

    animation:
        cdvFutureScan
        8.5s
        ease-in-out
        infinite;
}


@keyframes cdvFutureScan {

    0%,
    15% {

        left: -45%;

        opacity: 0;
    }

    22% {

        opacity: .78;
    }

    48% {

        left: 120%;

        opacity: 0;
    }

    100% {

        left: 120%;

        opacity: 0;
    }
}


/* =========================================================
   ORBE CENTRAL
========================================================= */

.cdv-future-orb {

    position: absolute;

    left:
        var(--hero-pointer-x);

    top:
        var(--hero-pointer-y);

    z-index: 2;

    width: 420px;
    height: 420px;

    pointer-events: none;

    border-radius: 50%;

    opacity: .52;

    background:
        radial-gradient(
            circle,

            rgba(
                138,
                103,
                255,
                .09
            ),

            rgba(
                83,
                212,
                255,
                .035
            )
            35%,

            transparent 68%
        );

    filter:
        blur(14px);

    transform:
        translate(
            -50%,
            -50%
        );

    transition:

        left .22s ease-out,

        top .22s ease-out;
}


/* =========================================================
   PARTICULES
========================================================= */

.cdv-future-particles {

    position: absolute;

    inset: 0;

    z-index: 3;

    overflow: hidden;

    pointer-events: none;
}


.cdv-future-particle {

    position: absolute;

    left:
        var(--particle-x);

    bottom: -12px;

    width:
        var(--particle-size);

    height:
        var(--particle-size);

    border-radius: 50%;

    opacity: 0;

    background:
        rgba(
            var(--particle-color),
            .90
        );

    box-shadow:
        0 0 12px
        rgba(
            var(--particle-color),
            .55
        );

    animation:
        cdvParticleRise
        var(--particle-duration)
        linear
        var(--particle-delay)
        infinite;
}


@keyframes cdvParticleRise {

    0% {

        bottom: -12px;

        opacity: 0;

        transform:
            translateX(0)
            scale(.6);
    }

    16% {

        opacity: .75;
    }

    70% {

        opacity: .28;
    }

    100% {

        bottom: 112%;

        opacity: 0;

        transform:
            translateX(
                var(--particle-drift)
            )
            scale(1.15);
    }
}


/* =========================================================
   TITRE IRISÉ
========================================================= */

.ranking-v2-hero.cdv-future-hero
.ranking-v2-title span {

    background:

        linear-gradient(
            105deg,

            #ffffff 0%,

            #dcd3ff 24%,

            #9f87ff 44%,

            #63d8ff 54%,

            #e4d8ff 65%,

            #a889ff 85%,

            #ffffff 100%
        ) !important;

    background-size:
        240% 100% !important;

    -webkit-background-clip:
        text !important;

    background-clip:
        text !important;

    animation:
        cdvTitleEnergy
        6s
        ease-in-out
        infinite;
}


@keyframes cdvTitleEnergy {

    0%,
    100% {

        background-position:
            0% 50%;
    }

    50% {

        background-position:
            100% 50%;
    }
}


/* Petite ligne énergétique de l’eyebrow. */

.ranking-v2-hero.cdv-future-hero
.ranking-v2-eyebrow::before {

    width: 40px;

    background:
        linear-gradient(
            90deg,

            #7c67ff,

            #5ed9ff,

            transparent
        );

    box-shadow:
        0 0 12px
        rgba(
            94,
            217,
            255,
            .25
        );

    animation:
        cdvEyebrowEnergy
        2.8s
        ease-in-out
        infinite;
}


@keyframes cdvEyebrowEnergy {

    0%,
    100% {

        opacity: .55;
    }

    50% {

        opacity: 1;
    }
}


/* =========================================================
   MODULES DE STATISTIQUES
========================================================= */

.ranking-v2-hero.cdv-future-hero
.ranking-v2-hero-stat {

    position: relative;

    overflow: hidden;

    border-color:
        rgba(
            131,
            107,
            225,
            .13
        );

    background:

        linear-gradient(
            145deg,

            rgba(
                17,
                19,
                39,
                .66
            ),

            rgba(
                6,
                8,
                22,
                .62
            )
        );

    transition:

        border-color .26s ease,

        box-shadow .26s ease,

        background-color .26s ease;
}


.ranking-v2-hero.cdv-future-hero
.ranking-v2-hero-stat::before {

    content: "";

    position: absolute;

    left: 10%;
    right: 10%;
    top: 0;

    height: 1px;

    opacity: .45;

    background:
        linear-gradient(
            90deg,

            transparent,

            rgba(
                92,
                211,
                255,
                .68
            ),

            transparent
        );
}


.ranking-v2-hero.cdv-future-hero
.ranking-v2-hero-stat:hover {

    border-color:
        rgba(
            103,
            204,
            255,
            .25
        );

    box-shadow:

        inset
        0 1px 0
        rgba(
            255,
            255,
            255,
            .04
        ),

        0 0 27px
        rgba(
            104,
            96,
            255,
            .075
        );
}


/* =========================================================
   SIGNATURE SYSTÈME
========================================================= */

.cdv-future-system {

    position: absolute;

    right: 31px;
    bottom: 20px;

    z-index: 11;

    display: flex;

    align-items: center;

    gap: 7px;

    color:
        rgba(
            203,
            197,
            222,
            .24
        );

    font-size: 6px;
    font-weight: 950;
    letter-spacing: .16em;

    text-transform: uppercase;
}


.cdv-future-system::before {

    content: "";

    width: 4px;
    height: 4px;

    border-radius: 50%;

    background: #5ee6aa;

    box-shadow:
        0 0 9px
        rgba(
            94,
            230,
            170,
            .55
        );
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 900px) {

    .cdv-future-grid {

        bottom: -85%;
    }


    .cdv-future-system {

        right: 24px;
        bottom: 15px;
    }

}


@media (max-width: 650px) {

    .cdv-future-corner {

        width: 28px;
        height: 28px;
    }


    .cdv-future-grid {

        opacity: .14;
    }


    .cdv-future-system {

        display: none;
    }


    .cdv-future-orb {

        width: 280px;
        height: 280px;
    }

}


/* =========================================================
   ACCESSIBILITÉ
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .cdv-future-border,

    .cdv-future-grid,

    .cdv-future-scan,

    .cdv-future-particle,

    .ranking-v2-hero.cdv-future-hero
    .ranking-v2-title span,

    .ranking-v2-hero.cdv-future-hero
    .ranking-v2-eyebrow::before {

        animation: none !important;
    }


    .cdv-future-scan,
    .cdv-future-particles {

        display: none !important;
    }

}