/* Homepage-only presentation layer. The video is intentionally self-hosted. */
.home-page {
    background: #020611;
    color: #e7f6ff;
    /* `vh` can include mobile browser chrome; `dvh` follows the visible viewport. */
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: hidden;
}

.home-page .container {
    isolation: isolate;
    position: relative;
    z-index: 1;
}

.home-page .footer,
.home-page .footer__content {
    color: rgba(231, 246, 255, .78);
    text-shadow: 0 2px 14px rgba(0, 0, 0, .95);
}

.home-page .content-center,
.home-page .footer {
    position: relative;
    z-index: 1;
}

/* The mobile menu expands over the homepage content, so its header must sit
   in a higher stacking layer than the centered logo and links. */
.home-page .header {
    position: relative;
    z-index: 2;
}

.home-page main {
    max-width: min(78vw, 768px);
}

.home-page main img {
    filter: drop-shadow(0 10px 44px rgba(0, 0, 0, .72));
    height: auto;
    width: 100%;
}

.home-video,
.home-video__player {
    inset: 0;
    position: fixed;
}

.home-video {
    background: #020611;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.home-video__color-wash,
.home-video__grain,
.home-video__scanlines,
.home-video__vignette {
    inset: 0;
    pointer-events: none;
    position: absolute;
}

.home-video__color-wash {
    background: linear-gradient(
        to right,
        rgba(190, 75, 228, .095),
        transparent 43%,
        rgba(35, 201, 235, .09)
    );
    z-index: 3;
}

.home-video__scanlines {
    background: repeating-linear-gradient(
        to bottom,
        rgba(224, 240, 255, .1) 0,
        rgba(224, 240, 255, .1) 1px,
        transparent 1px,
        transparent 4px
    );
    opacity: .28;
    z-index: 2;
}

.home-video__vignette {
    background: radial-gradient(
        ellipse at center,
        transparent 10%,
        rgba(2, 6, 17, .4) 42%,
        rgba(2, 6, 17, 1) 100%
    );
    z-index: 4;
}

.home-video__player {
    height: 100%;
    object-fit: cover;
    width: 100%;
    z-index: 0;
}

.home-video__grain {
    background-image: url("/images/film-grain.svg");
    background-repeat: repeat;
    background-size: 128px 128px;
    opacity: .2;
    z-index: 1;
}

@media (max-width: 684px) {
    .home-page main {
        max-width: 90vw;
    }

    .home-page .header {
        padding: 16px 20px;
    }
}