/* =========================================================
   ACCUEIL CINÉMATIQUE V2
   Ciblage des véritables classes de la page.
========================================================= */

body.cdv-targeted-home {
    --cdv-mouse-x: 50%;
    --cdv-mouse-y: 42%;
    --cdv-scroll: 0;

    overflow-x: hidden;
}


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

body.cdv-targeted-home
.world-hero {
    isolation: isolate;
    overflow: hidden;
}

body.cdv-targeted-home
.world-hero-content {
    position: relative;
    z-index: 10;
}

body.cdv-targeted-home
.world-hero::before {
    content: "";

    position: absolute;
    z-index: 2;

    inset: -15%;

    pointer-events: none;

    background:
        radial-gradient(
            720px circle
            at
            var(--cdv-mouse-x)
            var(--cdv-mouse-y),

            rgba(104, 127, 255, .15),
            rgba(105, 69, 216, .065) 30%,
            transparent 66%
        );

    mix-blend-mode: screen;

    opacity: .82;

    transition:
        background-position .7s ease;

    animation:
        cdvHeroAuraBreathing
        7s
        ease-in-out
        infinite;
}

body.cdv-targeted-home
.world-hero::after {
    content: "";

    position: absolute;
    z-index: 3;

    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            108deg,
            transparent 15%,
            rgba(99, 92, 255, .02) 31%,
            rgba(118, 185, 255, .065) 48%,
            transparent 61%,
            transparent 100%
        );

    background-size:
        240% 100%;

    mix-blend-mode: screen;

    opacity: .62;

    animation:
        cdvHeroLightTravel
        12s
        cubic-bezier(.45, 0, .2, 1)
        infinite;
}

@keyframes cdvHeroAuraBreathing {
    0%,
    100% {
        opacity: .56;
        filter: blur(4px);
    }

    50% {
        opacity: .95;
        filter: blur(10px);
    }
}

@keyframes cdvHeroLightTravel {
    0%,
    22% {
        background-position:
            135% 0;
        opacity: 0;
    }

    34% {
        opacity: .68;
    }

    58% {
        background-position:
            -35% 0;
        opacity: .25;
    }

    70%,
    100% {
        background-position:
            -35% 0;
        opacity: 0;
    }
}


/* =========================================================
   ÉTOILES LUMINEUSES
========================================================= */

.cdv-targeted-stars {
    position: absolute;
    z-index: 4;

    inset: 0;

    overflow: hidden;
    pointer-events: none;
}

.cdv-targeted-star {
    position: absolute;

    left:
        var(--star-x);

    top:
        var(--star-y);

    width:
        var(--star-size);

    height:
        var(--star-size);

    border-radius: 50%;

    background:
        rgba(
            171,
            213,
            255,
            var(--star-alpha)
        );

    box-shadow:
        0 0 8px
        rgba(128, 172, 255, .75),

        0 0 20px
        rgba(108, 99, 255, .34);

    opacity: 0;

    animation:
        cdvTargetedStarPulse
        var(--star-duration)
        ease-in-out
        var(--star-delay)
        infinite;
}

@keyframes cdvTargetedStarPulse {
    0%,
    100% {
        opacity: 0;
        transform:
            scale(.45);
    }

    28% {
        opacity:
            var(--star-alpha);
    }

    50% {
        opacity:
            calc(
                var(--star-alpha)
                * .58
            );

        transform:
            scale(1.25);
    }

    75% {
        opacity:
            calc(
                var(--star-alpha)
                * .22
            );
    }
}


/* =========================================================
   PANNEAU TEXTE
========================================================= */

body.cdv-targeted-home
.world-hero-copy-panel {
    position: relative;
    z-index: 20;

    transform-origin:
        left center;

    animation:
        cdvTargetedPanelEntry
        1.2s
        cubic-bezier(.16, 1, .3, 1)
        both;
}

body.cdv-targeted-home
.world-hero-copy-panel::before {
    content: "";

    position: absolute;

    left: -28px;
    top: 3px;
    bottom: 3px;

    width: 1px;

    pointer-events: none;

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(121, 118, 255, .7) 25%,
            rgba(93, 201, 255, .72) 54%,
            transparent 100%
        );

    transform-origin:
        top;

    animation:
        cdvTargetedLinePulse
        4.8s
        ease-in-out
        infinite;
}

@keyframes cdvTargetedPanelEntry {
    from {
        opacity: 0;
        transform:
            translate3d(
                -34px,
                22px,
                0
            );
        filter:
            blur(9px);
    }

    to {
        opacity: 1;
        transform:
            translate3d(
                0,
                0,
                0
            );
        filter:
            blur(0);
    }
}

@keyframes cdvTargetedLinePulse {
    0%,
    100% {
        opacity: .26;
        transform:
            scaleY(.62);
    }

    50% {
        opacity: .9;
        transform:
            scaleY(1);
    }
}


/* =========================================================
   TITRE CUSTOM DU VERSE
========================================================= */

body.cdv-targeted-home
.world-hero-title {
    position: relative;

    color: transparent !important;

    background:
        linear-gradient(
            102deg,
            #ffffff 0%,
            #ffffff 30%,
            #e8e3ff 43%,
            #bfb0ff 60%,
            #79ccff 78%,
            #ffffff 100%
        );

    background-size:
        220% 100%;

    -webkit-background-clip:
        text;

    background-clip:
        text;

    text-shadow:
        0 18px 55px
        rgba(37, 27, 108, .28);

    animation:
        cdvTargetedTitleGradient
        9s
        ease-in-out
        infinite;
}

body.cdv-targeted-home
.world-hero-title::before {
    content: "";

    position: absolute;

    left: -12px;
    top: -10px;

    width: 54px;
    height: 2px;

    border-radius: 99px;

    background:
        linear-gradient(
            90deg,
            #8975ff,
            #5dd8ff
        );

    box-shadow:
        0 0 18px
        rgba(100, 146, 255, .62);

    animation:
        cdvTargetedTitleAccent
        3.8s
        ease-in-out
        infinite;
}

body.cdv-targeted-home
.world-hero-title::after {
    content: "";

    position: absolute;

    inset: -8% -5%;

    pointer-events: none;

    background:
        linear-gradient(
            108deg,
            transparent 28%,
            rgba(255, 255, 255, 0) 41%,
            rgba(255, 255, 255, .36) 49%,
            rgba(112, 194, 255, .2) 54%,
            rgba(255, 255, 255, 0) 62%,
            transparent 75%
        );

    background-size:
        260% 100%;

    mix-blend-mode: screen;

    opacity: 0;

    animation:
        cdvTargetedTitleSweep
        7.5s
        cubic-bezier(.4, 0, .2, 1)
        infinite;
}

@keyframes cdvTargetedTitleGradient {
    0%,
    100% {
        background-position:
            0% 50%;
    }

    50% {
        background-position:
            100% 50%;
    }
}

@keyframes cdvTargetedTitleAccent {
    0%,
    100% {
        width: 42px;
        opacity: .42;
    }

    50% {
        width: 76px;
        opacity: 1;
    }
}

@keyframes cdvTargetedTitleSweep {
    0%,
    58%,
    100% {
        opacity: 0;
        background-position:
            130% 0;
    }

    64% {
        opacity: .2;
    }

    76% {
        opacity: .82;
    }

    88% {
        opacity: 0;
        background-position:
            -45% 0;
    }
}


/* =========================================================
   BOUTON D’ACCÈS
========================================================= */

body.cdv-targeted-home
.world-hero-action {
    position: relative;

    isolation: isolate;
    overflow: hidden;

    border:
        1px solid
        rgba(
            134,
            159,
            255,
            .24
        ) !important;

    background:
        linear-gradient(
            112deg,
            rgba(9, 12, 32, .86),
            rgba(15, 19, 49, .75) 56%,
            rgba(8, 24, 42, .85)
        ) !important;

    box-shadow:
        inset
        0 1px 0
        rgba(255, 255, 255, .075),

        0 16px 42px
        rgba(0, 0, 0, .22),

        0 0 0
        rgba(100, 110, 255, 0);

    animation:
        cdvTargetedButtonAura
        3.6s
        ease-in-out
        infinite;

    transition:
        transform .35s
        cubic-bezier(.16, 1, .3, 1),

        border-color .35s ease,

        box-shadow .35s ease !important;
}

body.cdv-targeted-home
.world-hero-action::before {
    content: "";

    position: absolute;
    z-index: -1;

    inset: 0;

    background:
        linear-gradient(
            105deg,
            rgba(105, 74, 225, .2),
            rgba(73, 158, 255, .16),
            rgba(139, 80, 231, .2)
        );

    background-size:
        210% 100%;

    animation:
        cdvTargetedButtonFill
        5.5s
        ease-in-out
        infinite;
}

body.cdv-targeted-home
.world-hero-action::after {
    content: "";

    position: absolute;
    z-index: 4;

    top: -45%;
    left: -130px;

    width: 76px;
    height: 190%;

    pointer-events: none;

    transform:
        skewX(-18deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, .25),
            transparent
        );

    animation:
        cdvTargetedButtonSweep
        5.8s
        ease-in-out
        infinite;
}

body.cdv-targeted-home
.world-hero-action:hover {
    transform:
        translate3d(
            0,
            -4px,
            0
        );

    border-color:
        rgba(123, 189, 255, .7)
        !important;

    box-shadow:
        inset
        0 1px 0
        rgba(255, 255, 255, .14),

        0 18px 46px
        rgba(0, 0, 0, .3),

        0 0 30px
        rgba(97, 103, 255, .2)
        !important;
}

@keyframes cdvTargetedButtonAura {
    0%,
    100% {
        box-shadow:
            inset
            0 1px 0
            rgba(255, 255, 255, .075),

            0 16px 42px
            rgba(0, 0, 0, .22),

            0 0 0
            rgba(100, 110, 255, 0);
    }

    50% {
        box-shadow:
            inset
            0 1px 0
            rgba(255, 255, 255, .11),

            0 16px 42px
            rgba(0, 0, 0, .25),

            0 0 26px
            rgba(100, 110, 255, .14);
    }
}

@keyframes cdvTargetedButtonFill {
    0%,
    100% {
        background-position:
            0% 50%;
    }

    50% {
        background-position:
            100% 50%;
    }
}

@keyframes cdvTargetedButtonSweep {
    0%,
    62% {
        left: -130px;
        opacity: 0;
    }

    68% {
        opacity: .8;
    }

    84% {
        left:
            calc(
                100%
                + 80px
            );
        opacity: 0;
    }

    100% {
        left:
            calc(
                100%
                + 80px
            );
        opacity: 0;
    }
}


/* =========================================================
   HEADER LIQUID GLASS — HEADER COMPLET
========================================================= */

body.cdv-targeted-home
.world-nav {
    z-index: 500 !important;

    transition:
        width .45s
        cubic-bezier(.16, 1, .3, 1),

        top .45s
        cubic-bezier(.16, 1, .3, 1),

        padding .45s ease,

        border-radius .45s ease,

        background-color .45s ease,

        border-color .45s ease,

        box-shadow .45s ease,

        backdrop-filter .45s ease,

        transform .45s
        cubic-bezier(.16, 1, .3, 1)
        !important;
}

body.cdv-targeted-home
.world-nav.cdv-targeted-nav-scrolled {
    position: fixed !important;

    top: 14px !important;
    left: 50% !important;

    width:
        min(
            1380px,
            calc(100% - 34px)
        ) !important;

    padding:
        0 26px !important;

    border:
        1px solid
        rgba(
            141,
            164,
            255,
            .13
        ) !important;

    border-radius:
        18px !important;

    background:
        linear-gradient(
            135deg,
            rgba(6, 9, 27, .78),
            rgba(14, 16, 45, .64)
        ) !important;

    -webkit-backdrop-filter:
        blur(24px)
        saturate(145%);

    backdrop-filter:
        blur(24px)
        saturate(145%);

    box-shadow:
        0 22px 62px
        rgba(0, 0, 0, .28),

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

    transform:
        translateX(-50%)
        translateY(0)
        !important;
}

body.cdv-targeted-home
.world-nav.cdv-targeted-nav-hidden {
    transform:
        translateX(-50%)
        translateY(-135%)
        !important;
}

body.cdv-targeted-home
.world-menu a {
    position: relative;
}

body.cdv-targeted-home
.world-menu a::after {
    content: "";

    position: absolute;

    left: 50%;
    bottom: -12px;

    width: 0;
    height: 1px;

    border-radius: 99px;

    background:
        linear-gradient(
            90deg,
            #8f74ff,
            #5edaff
        );

    box-shadow:
        0 0 12px
        rgba(99, 168, 255, .72);

    transform:
        translateX(-50%);

    transition:
        width .32s
        cubic-bezier(.16, 1, .3, 1);
}

body.cdv-targeted-home
.world-menu a:hover::after,
body.cdv-targeted-home
.world-menu a.active::after {
    width: 72%;
}


/* =========================================================
   INDICATEUR DE SCROLL
========================================================= */

.cdv-targeted-scroll-line {
    position: fixed;
    z-index: 999;

    left: 0;
    top: 0;

    width:
        calc(
            var(--cdv-scroll)
            * 100%
        );

    height: 2px;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            #765eff,
            #55d8ff,
            #b887ff
        );

    box-shadow:
        0 0 14px
        rgba(86, 169, 255, .6);

    transition:
        width .08s linear;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 760px) {
    body.cdv-targeted-home
    .world-hero-copy-panel::before {
        left: -13px;
    }

    body.cdv-targeted-home
    .world-nav.cdv-targeted-nav-scrolled {
        top: 8px !important;

        width:
            calc(100% - 16px)
            !important;

        padding:
            0 14px !important;

        border-radius:
            14px !important;
    }

    .cdv-targeted-star:nth-child(n + 9) {
        display: none;
    }
}


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

@media (prefers-reduced-motion: reduce) {
    body.cdv-targeted-home
    .world-hero::before,

    body.cdv-targeted-home
    .world-hero::after,

    body.cdv-targeted-home
    .world-hero-copy-panel,

    body.cdv-targeted-home
    .world-hero-copy-panel::before,

    body.cdv-targeted-home
    .world-hero-title,

    body.cdv-targeted-home
    .world-hero-title::before,

    body.cdv-targeted-home
    .world-hero-title::after,

    body.cdv-targeted-home
    .world-hero-action,

    body.cdv-targeted-home
    .world-hero-action::before,

    body.cdv-targeted-home
    .world-hero-action::after,

    .cdv-targeted-star {
        animation: none !important;
    }

    body.cdv-targeted-home
    .world-nav {
        transition-duration:
            .01ms !important;
    }
}