.hero-banner {
    /* Helps avoid any layout jump on load */
    will-change: transform;

    /* If you want a subtle darkening behind text when only an image is present */
    /* position: relative already on element */
}

.hero-bg-video {
    object-fit: cover;
    pointer-events: none; /* background only */
    z-index: 0;
    /* Prevents initial flash while metadata loads in some browsers */
    background: transparent;
}

.hero-bg-overlay {
    /* Optional readability layer only when video exists */
    z-index: 1;
    background: linear-gradient(to bottom, rgba(0,0,0,0.35), rgba(0,0,0,0.35));
}

.hero-content {
    z-index: 2; /* above video/overlay */
}

/* Respect user motion preferences */
@media (prefers-reduced-motion: reduce) {
    .hero-bg-video {
        display: none;
    }
}