/* =====================================================================
   Cinematic Hero Video Integration
   ---------------------------------------------------------------------
   Full-screen hero video background with a refined, subtle warm dark
   vignette overlay to preserve the luxury typography aesthetic and
   guarantee maximum readability. Video plays on ALL screen sizes.
   ===================================================================== */

.hero-video-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
    opacity: 0;
    transition: opacity 1.1s cubic-bezier(0.165, 0.84, 0.44, 1);
    pointer-events: none;
}

/* Sophisticated soft dark/warm vignette overlay — delivers maximum
   contrast for luxury typography without obscuring the natural video */
.hero-video-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.52) 0%,
        rgba(0, 0, 0, 0.32) 42%,
        rgba(0, 0, 0, 0.65) 100%
    );
    opacity: 0;
    transition: opacity 1.1s cubic-bezier(0.165, 0.84, 0.44, 1);
    pointer-events: none;
}

/* Applied by hero-video.js once the video has playable data */
.anti-gravity-hero.hero-video-active .hero-video-bg,
.anti-gravity-hero.hero-video-active .hero-video-overlay {
    opacity: 1;
}

/* Make container background transparent so video is fully visible */
.anti-gravity-hero.hero-video-active {
    background: transparent;
}

/* Hero text styling on active video: crisp contrast and luxury depth */
.anti-gravity-hero.hero-video-active .hero-title {
    color: #FFFFFF;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.65);
}

.anti-gravity-hero.hero-video-active .hero-subtitle {
    color: #EFE9DE;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
}

.anti-gravity-hero.hero-video-active .hero-badge {
    background: rgba(20, 16, 13, 0.6);
    border-color: rgba(200, 161, 101, 0.6);
    color: #FAF8F5;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.anti-gravity-hero.hero-video-active .hero-cta .btn-gold-solid {
    background: var(--gold-primary);
    border-color: var(--gold-primary);
    color: #FFFFFF;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}

.anti-gravity-hero.hero-video-active .hero-cta .btn-gold-solid:hover {
    background: #FFFFFF;
    border-color: #FFFFFF;
    color: #1A1613;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(255, 255, 255, 0.3);
}

.anti-gravity-hero.hero-video-active .hero-cta .btn-gold-outline {
    border-color: rgba(255, 255, 255, 0.65);
    color: #FAF8F5;
    background: rgba(20, 16, 13, 0.3);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.anti-gravity-hero.hero-video-active .hero-cta .btn-gold-outline:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: #FFFFFF;
    color: #FFFFFF;
    transform: translateY(-2px);
}

/* Keep hero copy above the video + overlay */
.anti-gravity-hero .hero-badge,
.anti-gravity-hero .hero-title,
.anti-gravity-hero .hero-subtitle,
.anti-gravity-hero .hero-cta {
    position: relative;
    z-index: 5;
}

/* ---- Responsive ---- */
@media (max-width: 992px) {
    .hero-video-bg {
        object-position: center;
    }
}

@media (max-width: 650px) {
    .hero-video-bg {
        object-position: center center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-video-bg {
        display: none;
    }
}