.container-video-hero {
    height: 100vh;
    margin-top: -65px;
}

@media (min-width: 768px) {
    .container-video-hero {
        margin-top: -174px;
    }
}

.ratio {
    height: 100%;
}

video {
    object-fit: cover;
}

.video-preloader {
    position: absolute;
    inset: 0; /* shorthand di top/left/right/bottom:0 */
    background: rgba(0,0,0,0.6);
    z-index: 5;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.6s ease, visibility 0.6s ease;
}

    .video-preloader.hidden {
        opacity: 0;
        visibility: hidden;
        pointer-events: none; /* evita di intercettare i tocchi anche se visualmente nascosto */
    }