.home-bg-container {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    isolation: isolate;
}

.home-bg-video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: auto;
    height: 100%;
    min-width: 100%;
    min-height: 100%;
    transform: translate(-50%, -50%);
    object-fit: cover;
    z-index: 0;
    opacity: 1;
}

/* Планшеты и ниже */
@media (max-width: 1024px) {
    .home-bg-video {
        width: 100%;
        height: auto;
        min-width: 100%;
        min-height: 100%;
        object-fit: cover;
    }
}

/* Очень узкие экраны */
@media (max-width: 480px) {
    .home-bg-video {
        width: 120%;
        height: auto;
        min-height: 100%;
    }
}

/* Широкие десктопы */
@media (min-width: 1440px) and (max-width: 1920px) {
    .home-bg-video {
        transform: translate(-50%, -50%) scale(1.05);
    }
}

@media (min-width: 1921px) {
    .home-bg-video {
        transform: translate(-50%, -50%) scale(1.12);
    }
}

/* Это overlayRef из React (fade out при старте) */
.home-intro-overlay {
    position: absolute;
    inset: 0;
    background: #000;
    z-index: 1;
    pointer-events: auto;
    opacity: 1;
}

.home-bg-overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(
            circle at center,
            rgba(0, 0, 0, 0.74) 40%,
            rgb(0, 0, 0) 100%
    );
    pointer-events: none;
    z-index: 2;
}

.home-bg-overlay2 {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
    margin-bottom: -20px;
    background: radial-gradient(
            ellipse 120% 60% at bottom center,
            rgba(0, 0, 0, 1) 0%,
            rgba(0, 0, 0, 0.8) 30%,
            rgba(0, 0, 0, 0) 70%
    );
}

.home-main-wrapper {
    position: relative;
    z-index: 4;
}