/* CDV CINEMATIC HOME V2 START */

.world-hero {

    --cdv-depth-x:
        0px;

    --cdv-depth-y:
        0px;

    position:
        relative !important;

    overflow:
        hidden !important;

    isolation:
        isolate !important;

}


/* Wallpaper vivant. */

.world-hero-bg {

    transform-origin:
        50% 45% !important;

    will-change:
        transform;

    animation:
        cdvWallpaperAlive
        24s
        cubic-bezier(.42, 0, .25, 1)
        infinite alternate !important;

}


/* Profondeur du bloc titre. */

.world-hero-copy-panel {

    translate:

        var(--cdv-depth-x)
        var(--cdv-depth-y);

    transition:
        translate
        .55s
        cubic-bezier(.2, .8, .2, 1);

    will-change:
        translate;

}


/*
La vignette elle-même n'est pas redessinée.
Seule sa position globale bouge de quelques pixels.
*/

.world-champion-card {

    translate:

        calc(
            var(--cdv-depth-x)
            * -.32
        )

        calc(
            var(--cdv-depth-y)
            * -.32
        );

    transition:

        translate
        .7s
        cubic-bezier(.2, .8, .2, 1),

        box-shadow
        .45s ease;

    will-change:
        translate;

}


/* =========================================================
   ORBITE CENTRALE
========================================================= */

.cdv-cinema-orbit {

    position:
        absolute;

    z-index:
        3;

    left:
        50%;

    top:
        40%;

    width:
        min(
            43vw,
            700px
        );

    aspect-ratio:
        1.68 / 1;

    border:
        1px solid
        rgba(146, 190, 255, .09);

    border-radius:
        50%;

    box-shadow:

        0 0 38px
        rgba(91, 151, 255, .035),

        inset 0 0 32px
        rgba(152, 108, 255, .025);

    opacity:
        .52;

    transform:
        translate(-50%, -50%)
        rotate(-9deg);

    animation:
        cdvCinemaOrbit
        26s
        linear
        infinite;

    pointer-events:
        none;

}

.cdv-cinema-orbit::before,
.cdv-cinema-orbit::after {

    content:
        "";

    position:
        absolute;

    border-radius:
        50%;

}

.cdv-cinema-orbit::before {

    left:
        8%;

    top:
        18%;

    width:
        5px;

    height:
        5px;

    background:
        rgba(165, 213, 255, .82);

    box-shadow:

        0 0 9px
        rgba(107, 184, 255, .58),

        0 0 18px
        rgba(143, 104, 255, .34);

}

.cdv-cinema-orbit::after {

    right:
        13%;

    bottom:
        18%;

    width:
        3px;

    height:
        3px;

    background:
        rgba(255, 215, 141, .76);

    box-shadow:
        0 0 12px
        rgba(255, 193, 89, .44);

}


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

.cdv-cinema-particles {

    position:
        absolute;

    z-index:
        6;

    inset:
        0;

    overflow:
        hidden;

    pointer-events:
        none;

}

.cdv-cinema-particle {

    position:
        absolute;

    bottom:
        -16px;

    width:
        var(--size);

    height:
        var(--size);

    border-radius:
        50%;

    background:
        rgba(171, 215, 255, .76);

    box-shadow:
        0 0 9px
        rgba(103, 188, 255, .48);

    opacity:
        0;

    animation:
        cdvCinemaParticle
        var(--duration)
        linear
        var(--delay)
        infinite;

}

.cdv-cinema-particle.gold {

    background:
        rgba(255, 217, 144, .76);

    box-shadow:
        0 0 10px
        rgba(255, 192, 84, .35);

}


/* =========================================================
   ENTRÉE CINÉMATIQUE
========================================================= */

html.cdv-cinema-loading
.world-hero-copy-panel,

html.cdv-cinema-loading
.world-champion-card,

html.cdv-cinema-loading
.world-hero-footer {

    opacity:
        0;

}

html.cdv-cinema-ready
.world-hero-copy-panel {

    animation:
        cdvCopyEnter
        1.15s
        cubic-bezier(.16, 1, .3, 1)
        both;

}

html.cdv-cinema-ready
.world-champion-card {

    animation:
        cdvCardEnter
        1.25s
        cubic-bezier(.16, 1, .3, 1)
        .24s
        both;

}

html.cdv-cinema-ready
.world-hero-footer {

    animation:
        cdvFooterEnter
        .9s
        ease
        .65s
        both;

}


/* Respiration très légère du titre. */

.world-hero-copy-panel h1,
.world-hero-title {

    animation:
        cdvTitleBreath
        7s
        ease-in-out
        infinite;

}


/* =========================================================
   BOUTON MAGNÉTIQUE
========================================================= */

.cdv-magnetic {

    --magnetic-x:
        0px;

    --magnetic-y:
        0px;

    translate:

        var(--magnetic-x)
        var(--magnetic-y);

    transition:

        translate
        .2s
        cubic-bezier(.2, .8, .2, 1),

        box-shadow
        .35s ease;

    will-change:
        translate;

}

.cdv-magnetic:hover {

    box-shadow:

        0 13px 34px
        rgba(83, 95, 255, .24),

        0 0 24px
        rgba(112, 194, 255, .13);

}


/* =========================================================
   EXPLORER
========================================================= */

.cdv-explorer {

    cursor:
        pointer !important;

    animation:
        cdvExplorer
        2.7s
        ease-in-out
        infinite;

}


/* =========================================================
   NAVIGATION
========================================================= */

body.cdv-scrolled nav {

    background:
        rgba(5, 7, 21, .68) !important;

    -webkit-backdrop-filter:
        blur(18px)
        saturate(125%);

    backdrop-filter:
        blur(18px)
        saturate(125%);

    box-shadow:

        0 1px 0
        rgba(196, 211, 255, .08),

        0 12px 36px
        rgba(1, 3, 12, .18);

}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes cdvWallpaperAlive {

    0% {

        transform:
            scale(1.005)
            translate3d(0, 0, 0);

    }

    50% {

        transform:
            scale(1.026)
            translate3d(0, -.4%, 0);

    }

    100% {

        transform:
            scale(1.013)
            translate3d(0, .25%, 0);

    }

}

@keyframes cdvCinemaOrbit {

    from {

        transform:
            translate(-50%, -50%)
            rotate(-9deg)
            rotateZ(0deg);

    }

    to {

        transform:
            translate(-50%, -50%)
            rotate(-9deg)
            rotateZ(360deg);

    }

}

@keyframes cdvCinemaParticle {

    0% {

        opacity:
            0;

        transform:
            translate3d(0, 0, 0)
            scale(.6);

    }

    16% {

        opacity:
            .52;

    }

    72% {

        opacity:
            .22;

    }

    100% {

        opacity:
            0;

        transform:
            translate3d(
                var(--drift),
                -105vh,
                0
            )
            scale(1.06);

    }

}

@keyframes cdvCopyEnter {

    from {

        opacity:
            0;

        transform:
            translate3d(-42px, 17px, 0);

        filter:
            blur(8px);

    }

    to {

        opacity:
            1;

        transform:
            translate3d(0, 0, 0);

        filter:
            blur(0);

    }

}

@keyframes cdvCardEnter {

    from {

        opacity:
            0;

        transform:
            translate3d(38px, 22px, 0)
            scale(.97);

        filter:
            blur(7px);

    }

    to {

        opacity:
            1;

        transform:
            translate3d(0, 0, 0)
            scale(1);

        filter:
            blur(0);

    }

}

@keyframes cdvFooterEnter {

    from {

        opacity:
            0;

        transform:
            translateY(13px);

    }

    to {

        opacity:
            1;

        transform:
            translateY(0);

    }

}

@keyframes cdvTitleBreath {

    0%,
    100% {

        filter:
            brightness(1);

    }

    50% {

        filter:
            brightness(1.075);

    }

}

@keyframes cdvExplorer {

    0%,
    100% {

        opacity:
            .46;

        transform:
            translateY(0);

    }

    50% {

        opacity:
            .90;

        transform:
            translateY(4px);

    }

}


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

@media (max-width: 900px) {

    .cdv-cinema-orbit {

        width:
            74vw;

        opacity:
            .28;

    }

    .world-hero-copy-panel,
    .world-champion-card {

        translate:
            0 0 !important;

    }

}


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

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

    .world-hero-bg,
    .cdv-cinema-orbit,
    .cdv-cinema-particle,
    .world-hero-copy-panel,
    .world-champion-card,
    .world-hero-footer,
    .world-hero-copy-panel h1,
    .world-hero-title,
    .cdv-explorer {

        animation:
            none !important;

    }

    .world-hero-copy-panel,
    .world-champion-card,
    .world-hero-footer {

        opacity:
            1 !important;

        filter:
            none !important;

        transform:
            none !important;

    }

}

/* CDV CINEMATIC HOME V2 END */