/* =========================================================
   LACASE - TRANSITIONS LATERALES ENTRE LES MENUS
========================================================= */

body.page-is-leaving {
    cursor: wait;
}

body.page-is-leaving a,
body.page-is-leaving button {
    pointer-events: none !important;
}

/*
   Cache la page suivante avant son premier affichage afin qu'aucun
   rechargement ne puisse apparaitre entre les deux animations.
*/
html.menu-arrival-pending::after {
    content: "";
    position: fixed;
    inset: -8vw;
    z-index: 2147483646;
    background-color: #050505;
    background-image:
        url("../assets/star-esterk-transparent.png"),
        url("../assets/star-esterk-transparent.png"),
        url("../assets/star-esterk-transparent.png"),
        url("../assets/star-esterk-transparent.png"),
        url("../assets/star-esterk-transparent.png"),
        url("../assets/star-esterk-transparent.png");
    background-repeat: no-repeat;
    background-size:
        clamp(210px, 26vw, 500px),
        clamp(80px, 9vw, 170px),
        clamp(135px, 16vw, 300px),
        clamp(48px, 5vw, 95px),
        clamp(170px, 20vw, 390px),
        clamp(62px, 7vw, 130px);
    animation: menuLoadingBridge 1.9s linear infinite;
    pointer-events: none;
    will-change: background-position;
}

html.menu-arrival-backward::after {
    transform: scaleX(-1);
}

@keyframes menuLoadingBridge {
    0% {
        background-position:
            122vw 3vh,
            106vw 71vh,
            144vw 37vh,
            92vw 18vh,
            167vw 59vh,
            128vw 86vh;
    }

    100% {
        background-position:
            -48vw 16vh,
            -31vw 60vh,
            -61vw 29vh,
            -23vw 27vh,
            -77vw 70vh,
            -39vw 78vh;
    }
}

/*
   Profondeurs de la page :
   - le fond se deplace lentement ;
   - le contenu se deplace davantage ;
   - les controles proches de la camera partent plus vite.
*/
body.menu-transition-forward {
    --menu-shift-back: -18vw;
    --menu-shift-middle: -34vw;
    --menu-shift-front: -52vw;
}

body.menu-transition-backward {
    --menu-shift-back: 18vw;
    --menu-shift-middle: 34vw;
    --menu-shift-front: 52vw;
}

body.menu-transition-active > .page-background,
body.menu-transition-active > .background-blur,
body.menu-transition-active > .home-media,
body.menu-transition-active > .home-video-overlay,
body.menu-transition-active > .player-container {
    transition:
        translate 0.96s cubic-bezier(0.18, 0.78, 0.24, 1),
        scale 0.96s ease,
        opacity 0.72s ease !important;
    translate: var(--menu-shift-back) 0 !important;
    scale: 1.035;
    opacity: 0.3;
}

body.menu-transition-active > .page-content,
body.menu-transition-active > .home-stars,
body.menu-transition-active > .home-youtube-section,
body.menu-transition-active > .clip-overlay {
    transition:
        translate 0.82s cubic-bezier(0.18, 0.78, 0.24, 1),
        scale 0.82s ease,
        opacity 0.55s ease !important;
    translate: var(--menu-shift-middle) 0 !important;
    scale: 1.06;
    opacity: 0;
}

body.menu-transition-active > .site-header,
body.menu-transition-active > .controls,
body.menu-transition-active > .video-arrow,
body.menu-transition-active > .video-picker,
body.menu-transition-active > .video-picker-toggle,
body.menu-transition-active > .mobile-menu-toggle {
    transition:
        translate 0.7s cubic-bezier(0.18, 0.78, 0.24, 1),
        opacity 0.42s ease !important;
    translate: var(--menu-shift-front) 0 !important;
    opacity: 0;
}

.menu-parallax-transition {
    position: fixed;
    inset: 0;
    z-index: 2147483645;
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    perspective: 900px;
}

/*
   La version "backward" est le miroir exact de "forward".
   Les boules et le fond partent donc automatiquement dans l'autre sens.
*/
.menu-parallax-transition.is-backward {
    transform: scaleX(-1);
}

.menu-parallax-transition::before {
    content: "";
    position: absolute;
    inset: -8vw;
    z-index: 0;
    background: #050505;
    opacity: 0;
    transition: opacity 0.72s ease;
    will-change: opacity;
}

.menu-parallax-transition.is-active {
    visibility: visible;
    opacity: 1;
}

.menu-parallax-transition.is-active::before {
    opacity: 1;
}

/*
   Sur la nouvelle page, le noir commence deja plein ecran puis poursuit
   sa course dans le meme sens pour reveler le nouveau contenu.
*/
.menu-parallax-transition.is-arrival::before {
    opacity: 1;
    transition: none;
}

.menu-parallax-transition.is-arrival.is-revealing::before {
    opacity: 0;
    transition: opacity 1.15s ease 0.08s;
}

.menu-parallax-transition__star {
    position: absolute;
    z-index: 1;
    left: 100%;
    top: var(--menu-star-y);
    width: var(--menu-star-size);
    height: var(--menu-star-size);
    opacity: 0;
    transform-origin: center;
    will-change: transform, opacity;
}

.menu-parallax-transition__star img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 0 24px rgba(255, 0, 0, 0.24));
    animation:
        menuStarRotation
        var(--menu-star-rotation-speed)
        linear
        infinite;
}

.menu-parallax-transition__star:nth-child(1) {
    --menu-star-y: 5%;
    --menu-star-size: clamp(180px, 22vw, 430px);
    --menu-star-duration: 1.05s;
    --menu-star-delay: 0s;
    --menu-star-travel: -192vw;
    --menu-star-drift-y: 15vh;
    --menu-star-zoom: 3.3;
    --menu-star-turn: 190deg;
    --menu-star-rotation-speed: 4s;
}

.menu-parallax-transition__star:nth-child(2) {
    --menu-star-y: 70%;
    --menu-star-size: clamp(86px, 10vw, 190px);
    --menu-star-duration: 1.42s;
    --menu-star-delay: 0.02s;
    --menu-star-travel: -150vw;
    --menu-star-drift-y: -11vh;
    --menu-star-zoom: 1.8;
    --menu-star-turn: -150deg;
    --menu-star-rotation-speed: 8s;
}

.menu-parallax-transition__star:nth-child(3) {
    --menu-star-y: 32%;
    --menu-star-size: clamp(230px, 29vw, 550px);
    --menu-star-duration: 0.96s;
    --menu-star-delay: 0.08s;
    --menu-star-travel: -205vw;
    --menu-star-drift-y: -7vh;
    --menu-star-zoom: 3.8;
    --menu-star-turn: 240deg;
    --menu-star-rotation-speed: 3s;
}

.menu-parallax-transition__star:nth-child(4) {
    --menu-star-y: 18%;
    --menu-star-size: clamp(52px, 6vw, 110px);
    --menu-star-duration: 1.55s;
    --menu-star-delay: 0.1s;
    --menu-star-travel: -138vw;
    --menu-star-drift-y: 8vh;
    --menu-star-zoom: 1.35;
    --menu-star-turn: -105deg;
    --menu-star-rotation-speed: 11s;
}

.menu-parallax-transition__star:nth-child(5) {
    --menu-star-y: 58%;
    --menu-star-size: clamp(120px, 15vw, 285px);
    --menu-star-duration: 1.18s;
    --menu-star-delay: 0.13s;
    --menu-star-travel: -178vw;
    --menu-star-drift-y: 10vh;
    --menu-star-zoom: 2.55;
    --menu-star-turn: 170deg;
    --menu-star-rotation-speed: 6s;
}

.menu-parallax-transition__star:nth-child(6) {
    --menu-star-y: 82%;
    --menu-star-size: clamp(42px, 5vw, 90px);
    --menu-star-duration: 1.62s;
    --menu-star-delay: 0s;
    --menu-star-travel: -132vw;
    --menu-star-drift-y: -5vh;
    --menu-star-zoom: 1.25;
    --menu-star-turn: -95deg;
    --menu-star-rotation-speed: 12s;
}

.menu-parallax-transition.is-active
    .menu-parallax-transition__star {
    animation:
        menuStarFlightSideways
        var(--menu-star-duration)
        cubic-bezier(0.18, 0.78, 0.24, 1)
        var(--menu-star-delay)
        both;
}

@keyframes menuStarFlightSideways {
    0% {
        opacity: 0;
        transform:
            translate3d(22vw, 0, -260px)
            scale(0.42)
            rotate(0deg);
    }

    10% {
        opacity: 0.92;
    }

    70% {
        opacity: 0.98;
    }

    100% {
        opacity: 0;
        transform:
            translate3d(
                var(--menu-star-travel),
                var(--menu-star-drift-y),
                300px
            )
            scale(var(--menu-star-zoom))
            rotate(var(--menu-star-turn));
    }
}

@keyframes menuStarRotation {
    to {
        transform: rotate(360deg);
    }
}

/* La nouvelle page arrive elle aussi avec trois profondeurs. */
body.menu-arrival-forward {
    --menu-arrival-back: 18vw;
    --menu-arrival-middle: 34vw;
    --menu-arrival-front: 52vw;
}

body.menu-arrival-backward {
    --menu-arrival-back: -18vw;
    --menu-arrival-middle: -34vw;
    --menu-arrival-front: -52vw;
}

body.menu-arrival-active > .page-background,
body.menu-arrival-active > .background-blur,
body.menu-arrival-active > .home-media,
body.menu-arrival-active > .home-video-overlay,
body.menu-arrival-active > .player-container {
    transition: none !important;
    translate: var(--menu-arrival-back) 0 !important;
    scale: 1.035;
    opacity: 0.3;
}

body.menu-arrival-active > .page-content,
body.menu-arrival-active > .home-stars,
body.menu-arrival-active > .home-youtube-section,
body.menu-arrival-active > .clip-overlay {
    transition: none !important;
    translate: var(--menu-arrival-middle) 0 !important;
    scale: 1.06;
    opacity: 0;
}

body.menu-arrival-active > .site-header,
body.menu-arrival-active > .controls,
body.menu-arrival-active > .video-arrow,
body.menu-arrival-active > .video-picker,
body.menu-arrival-active > .video-picker-toggle,
body.menu-arrival-active > .mobile-menu-toggle {
    transition: none !important;
    translate: var(--menu-arrival-front) 0 !important;
    opacity: 0;
}

body.menu-arrival-active.menu-arrival-visible > .page-background,
body.menu-arrival-active.menu-arrival-visible > .background-blur,
body.menu-arrival-active.menu-arrival-visible > .home-media,
body.menu-arrival-active.menu-arrival-visible > .home-video-overlay,
body.menu-arrival-active.menu-arrival-visible > .player-container {
    transition:
        translate 0.96s cubic-bezier(0.18, 0.78, 0.24, 1),
        scale 0.96s ease,
        opacity 0.72s ease !important;
    translate: 0 0 !important;
    scale: 1;
    opacity: 1;
}

body.menu-arrival-active.menu-arrival-visible > .page-content,
body.menu-arrival-active.menu-arrival-visible > .home-stars,
body.menu-arrival-active.menu-arrival-visible > .home-youtube-section,
body.menu-arrival-active.menu-arrival-visible > .clip-overlay {
    transition:
        translate 0.82s cubic-bezier(0.18, 0.78, 0.24, 1),
        scale 0.82s ease,
        opacity 0.55s ease !important;
    translate: 0 0 !important;
    scale: 1;
    opacity: 1;
}

body.menu-arrival-active.menu-arrival-visible > .site-header,
body.menu-arrival-active.menu-arrival-visible > .controls,
body.menu-arrival-active.menu-arrival-visible > .video-arrow,
body.menu-arrival-active.menu-arrival-visible > .video-picker,
body.menu-arrival-active.menu-arrival-visible > .video-picker-toggle,
body.menu-arrival-active.menu-arrival-visible > .mobile-menu-toggle {
    transition:
        translate 0.7s cubic-bezier(0.18, 0.78, 0.24, 1),
        opacity 0.42s ease !important;
    translate: 0 0 !important;
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .menu-parallax-transition {
        display: none;
    }
}