/**
 * Fichier  : /pages/homepage/header/assets/css/video.css
 * Fonction : style de la vidéo d'arrière-plan de l'en-tête
 */


/* ==================================================
   VIDEO BACKGROUND
================================================== */

.welcome .video-background {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.welcome .video-background {
    overflow: hidden;
    pointer-events: none;
}


/* ==================================================
   VIDEO
================================================== */

.welcome .video-background video {
    width: 100%;
    height: 100%;
}

.welcome .video-background video {
    display: block;
}

.welcome .video-background video {
    object-fit: cover;
    object-position: center center;
}


/* ==================================================
   OVERLAY
================================================== */

.welcome .video-background::before {
    content: "";
}

.welcome .video-background::before {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.welcome .video-background::before {
    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, .96) 0%,
            rgba(0, 0, 0, .84) 30%,
            rgba(0, 0, 0, .64) 52%,
            rgba(0, 0, 0, .46) 74%,
            rgba(0, 0, 0, .34) 100%
        ),
        linear-gradient(
            0deg,
            rgba(0, 0, 0, .72) 0%,
            rgba(0, 0, 0, .28) 42%,
            transparent 68%
        );
}


/* ==================================================
   GRID
================================================== */

.welcome .video-background::after {
    content: "";
}

.welcome .video-background::after {
    position: absolute;
    inset: 0;
    z-index: 2;
}

.welcome .video-background::after {
    pointer-events: none;
}

.welcome .video-background::after {
    background-image:
        linear-gradient(
            rgba(255, 255, 255, .055) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, .055) 1px,
            transparent 1px
        );
}

.welcome .video-background::after {
    background-size:
        60px 60px;
}

.welcome .video-background::after {
    opacity: .65;
}


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

@media screen and (max-width: 1024px) {

    .welcome .video-background video {
        object-position: 62% center;
    }

    .welcome .video-background::before {
        background:
            linear-gradient(
                0deg,
                rgba(0, 0, 0, .94) 0%,
                rgba(0, 0, 0, .72) 50%,
                rgba(0, 0, 0, .30) 100%
            );
    }

    .welcome .video-background::after {
        background-size:
            40px 40px;
    }

    .welcome .video-background::after {
        opacity: .50;
    }

}


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

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

    .welcome .video-background video {
        display: none;
    }

    .welcome .video-background {
        background:
            var(--main-background);
    }

}