/**
 * KHS TRAVELS - Cinematic Hero Styling
 */

/* Hero Container Height & Canvas Layering */
#hero-section {
    position: relative;
    background-color: #0B0B0B;
}

#hero-viewport {
    height: 100svh;
    min-height: 520px;
}

#hero-canvas {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-color: #0B0B0B;
}

/* Vignette Darkening Overlay */
.hero-vignette {
    background: radial-gradient(
        circle at 50% 50%,
        rgba(11, 11, 11, 0.15) 0%,
        rgba(11, 11, 11, 0.45) 60%,
        rgba(11, 11, 11, 0.85) 100%
    );
}

/* Typography Gradient Accent */
.text-gradient-orange {
    background: linear-gradient(135deg, #FF6B00 0%, #FFA800 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Smooth Navigation Transition Class */
.nav-hero-active {
    background-color: rgba(11, 11, 11, 0.85) !important;
    backdrop-filter: blur(12px) !important;
    border-bottom: 1px solid rgba(255, 107, 0, 0.2) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}

/* Responsive Mobile Fine-Tuning */
@media (max-width: 640px) {
    #hero-headline {
        font-size: 2.25rem;
        line-height: 1.1;
    }
    #hero-subtitle {
        font-size: 0.9rem;
    }
}

@media (min-width: 641px) and (max-width: 1024px) {
    #hero-headline {
        font-size: 3.5rem;
    }
}

/* Pre-loader Hide state */
.hero-loaded #hero-loader {
    opacity: 0;
    pointer-events: none;
}