.hero {
    position: relative;
    padding: clamp(6rem, 14vh, 8.5rem) 0 clamp(3rem, 6vh, 5rem);
    overflow: hidden;
    isolation: isolate;
    height: 100vh;
    display: flex;
    align-items: center;
}

.hero-atmosphere {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to bottom,
            black 0%,
            black 48%,
            rgba(0, 0, 0, 0.5) 80%,
            transparent 96%);
    mask-image: linear-gradient(to bottom,
            black 0%,
            black 48%,
            rgba(0, 0, 0, 0.5) 80%,
            transparent 96%);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-repeat: no-repeat;
    mask-size: 100% 100%;
}

.hero-atmosphere-video {
    position: absolute;
    inset: -6%;
    width: 112%;
    height: 112%;
    object-fit: cover;
    object-position: center top;
    transform: translateZ(0) scale(1.04);
}

.hero-atmosphere-sheen {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 4%, rgba(255, 255, 255, 0.18), transparent 46%),
        linear-gradient(116deg, transparent 18%, rgba(255, 255, 255, 0.06) 37%, transparent 51%);
    mix-blend-mode: soft-light;
    opacity: 0.8;
    animation: hero-sheen 16s ease-in-out infinite alternate;
}

.hero-atmosphere-vignette {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 15%, rgba(0, 0, 0, 0.15) 55%, rgba(0, 0, 0, 0.95) 100%),
        radial-gradient(ellipse at center, transparent 40%, rgba(0, 0, 0, 0.2) 100%);
}

#hero-byte-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.9;
    mix-blend-mode: screen;
    pointer-events: none;
}

@keyframes hero-sheen {
    0% {
        transform: translate3d(-4%, 0, 0) scale(1.04);
    }

    to {
        transform: translate3d(5%, 1%, 0) scale(1.1);
    }
}

@media (max-width: 768px) {
    #hero-byte-overlay {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-atmosphere-sheen {
        animation: none;
    }

    .hero-atmosphere-video,
    #hero-byte-overlay {
        display: none;
    }
}

@media (max-width: 480px) {
    .hero {
        padding-top: 8rem;
    }
}

@media (orientation: landscape) and (max-height: 600px) {
    .hero {
        height: auto;
        min-height: 100svh;
        padding-top: 5rem;
    }
}