/* ============================================================================
   PREMIUM HERO SCROLL EFFECTS
   Cinematic parallax, zoom, and 3D effects - No color change
   ============================================================================ */

/* ============================================================================
   HERO PARALLAX & CINEMATIC EFFECTS
   ============================================================================ */

/* Base Hero Setup for Effects */
.hero-section.hero-with-curtain {
    overflow: hidden;
    /* Prevent horizontal scroll from parallax */
}

/* ENSURE CONTENT IS VISIBLE BY DEFAULT - Base state */
.hero-section .hero-content,
.hero-section .container,
.hero-section h1,
.hero-section p,
.hero-section .lead,
.hero-section .btn,
.hero-section .badge,
.hero-section .text-white {
    opacity: 1;
    visibility: visible;
    color: #ffffff;
}

/* Smooth transitions for parallax effect */
.hero-section .hero-content,
.hero-section .container {
    will-change: transform, opacity;
    transition: none;
    /* Disable CSS transitions - JS handles animation */
}

.hero-section .particle-container {
    will-change: transform, opacity;
    transition: none;
}

/* Hero cards inverse parallax */
.hero-section .hero-card,
.hero-section .col-lg-5 .position-relative {
    will-change: transform;
    transition: none;
}

/* ============================================================================
   CURTAIN CINEMATIC EFFECTS (Applied via JS classes)
   ============================================================================ */

/* Stage 1: Starting to scroll (0-30% progress) - Subtle float up */
.hero-with-curtain.scroll-stage-1 .hero-content {
    transform: translateY(-8px) scale(0.995);
    opacity: 0.95;
}

.hero-with-curtain.scroll-stage-1 .container {
    transform: translateZ(10px);
}

/* Stage 2: Mid-scroll (30-60% progress) - Zoom out with blur starting */
.hero-with-curtain.scroll-stage-2 .hero-content {
    transform: translateY(-20px) scale(0.97) rotateX(2deg);
    opacity: 0.8;
    filter: blur(1px);
}

.hero-with-curtain.scroll-stage-2 .container {
    transform: translateZ(30px) translateY(-15px);
}

.hero-with-curtain.scroll-stage-2 .particle-container {
    opacity: 0.5;
    transform: scale(1.1) translateY(-30px);
}

/* Stage 3: Almost complete (60-90% progress) - Heavy cinematic blur */
.hero-with-curtain.scroll-stage-3 .hero-content {
    transform: translateY(-40px) scale(0.92) rotateX(4deg);
    opacity: 0.5;
    filter: blur(3px);
}

.hero-with-curtain.scroll-stage-3 .container {
    transform: translateZ(60px) translateY(-30px);
}

.hero-with-curtain.scroll-stage-3 .particle-container {
    opacity: 0.2;
    transform: scale(1.2) translateY(-60px);
}

/* Stage 4: Complete (90-100% progress) - Full fade out */
.hero-with-curtain.scroll-stage-4 .hero-content {
    transform: translateY(-60px) scale(0.85) rotateX(6deg);
    opacity: 0.2;
    filter: blur(6px);
}

.hero-with-curtain.scroll-stage-4 .container {
    transform: translateZ(100px) translateY(-50px);
}

.hero-with-curtain.scroll-stage-4 .particle-container {
    opacity: 0;
    transform: scale(1.4) translateY(-100px);
}

/* ============================================================================
   FLOATING ORBS - Parallax Movement
   ============================================================================ */

.hero-section .position-absolute.blur-3xl,
.hero-section [style*="filter: blur"] {
    transition: transform 0.3s ease-out, opacity 0.3s ease-out !important;
    will-change: transform, opacity;
}

.hero-with-curtain.scroll-stage-2 .position-absolute.blur-3xl,
.hero-with-curtain.scroll-stage-2 [style*="filter: blur"] {
    transform: scale(1.15) translateY(-30px) !important;
    opacity: 0.15 !important;
}

.hero-with-curtain.scroll-stage-3 .position-absolute.blur-3xl,
.hero-with-curtain.scroll-stage-3 [style*="filter: blur"] {
    transform: scale(1.3) translateY(-80px) !important;
    opacity: 0.08 !important;
}

.hero-with-curtain.scroll-stage-4 .position-absolute.blur-3xl,
.hero-with-curtain.scroll-stage-4 [style*="filter: blur"] {
    transform: scale(1.5) translateY(-150px) !important;
    opacity: 0 !important;
}

/* ============================================================================
   BADGE & TEXT ELEMENTS - Staggered Parallax
   ============================================================================ */

.hero-section .badge,
.hero-section .d-inline-flex.align-items-center {
    transition: transform 0.2s ease-out, opacity 0.2s ease-out !important;
}

.hero-with-curtain.scroll-stage-2 .badge,
.hero-with-curtain.scroll-stage-2 .hero-content .d-inline-flex {
    transform: translateY(-10px) !important;
    opacity: 0.7 !important;
}

.hero-with-curtain.scroll-stage-3 .badge,
.hero-with-curtain.scroll-stage-3 .hero-content .d-inline-flex {
    transform: translateY(-25px) scale(0.95) !important;
    opacity: 0.3 !important;
}

.hero-with-curtain.scroll-stage-4 .badge,
.hero-with-curtain.scroll-stage-4 .hero-content .d-inline-flex {
    transform: translateY(-40px) scale(0.9) !important;
    opacity: 0 !important;
}

/* Headings - Slower parallax for depth */
.hero-section h1,
.hero-section .display-3 {
    transition: transform 0.25s ease-out, opacity 0.25s ease-out, filter 0.25s ease-out !important;
}

.hero-with-curtain.scroll-stage-2 h1,
.hero-with-curtain.scroll-stage-2 .display-3 {
    transform: translateY(-5px) !important;
}

.hero-with-curtain.scroll-stage-3 h1,
.hero-with-curtain.scroll-stage-3 .display-3 {
    transform: translateY(-15px) !important;
    filter: blur(1px) !important;
}

.hero-with-curtain.scroll-stage-4 h1,
.hero-with-curtain.scroll-stage-4 .display-3 {
    transform: translateY(-30px) !important;
    filter: blur(3px) !important;
    opacity: 0.3 !important;
}

/* ============================================================================
   HERO BUTTONS - Fast exit parallax
   ============================================================================ */

.hero-section .btn {
    transition: transform 0.15s ease-out, opacity 0.15s ease-out !important;
}

.hero-with-curtain.scroll-stage-1 .hero-content .btn {
    transform: translateY(-5px) !important;
}

.hero-with-curtain.scroll-stage-2 .hero-content .btn {
    transform: translateY(-15px) scale(0.98) !important;
    opacity: 0.7 !important;
}

.hero-with-curtain.scroll-stage-3 .hero-content .btn {
    transform: translateY(-30px) scale(0.95) !important;
    opacity: 0.3 !important;
}

.hero-with-curtain.scroll-stage-4 .hero-content .btn {
    transform: translateY(-50px) scale(0.9) !important;
    opacity: 0 !important;
}

/* ============================================================================
   HERO CARD/IMAGE - Inverse parallax (moves slower)
   ============================================================================ */

.hero-section .hero-card,
.hero-section .col-lg-5 .position-relative {
    transition: transform 0.35s ease-out, opacity 0.35s ease-out !important;
}

.hero-with-curtain.scroll-stage-2 .hero-card,
.hero-with-curtain.scroll-stage-2 .col-lg-5 .position-relative {
    transform: translateY(10px) scale(1.02) !important;
    opacity: 0.85 !important;
}

.hero-with-curtain.scroll-stage-3 .hero-card,
.hero-with-curtain.scroll-stage-3 .col-lg-5 .position-relative {
    transform: translateY(25px) scale(1.05) rotateY(-5deg) !important;
    opacity: 0.5 !important;
}

.hero-with-curtain.scroll-stage-4 .hero-card,
.hero-with-curtain.scroll-stage-4 .col-lg-5 .position-relative {
    transform: translateY(50px) scale(1.08) rotateY(-10deg) !important;
    opacity: 0.1 !important;
}

/* ============================================================================
   WAVE BOTTOM - Expanding morphing effect
   ============================================================================ */

.hero-section .position-absolute.bottom-0 svg,
.hero-section svg[viewBox="0 0 1200 120"] {
    transition: transform 0.3s ease-out !important;
    transform-origin: bottom center !important;
}

.hero-with-curtain.scroll-stage-2 .position-absolute.bottom-0 svg {
    transform: scaleY(1.3) scaleX(1.05) rotate(180deg) !important;
}

.hero-with-curtain.scroll-stage-3 .position-absolute.bottom-0 svg {
    transform: scaleY(1.8) scaleX(1.1) rotate(180deg) !important;
}

.hero-with-curtain.scroll-stage-4 .position-absolute.bottom-0 svg {
    transform: scaleY(2.5) scaleX(1.15) rotate(180deg) !important;
}

/* ============================================================================
   CURTAIN OVERLAY - Sleek fade instead of slide
   ============================================================================ */

.hero-theme-curtain {
    position: absolute !important;
    inset: 0 !important;
    z-index: 50 !important;
    pointer-events: none !important;
    /* Replaced curtain with vignette effect */
    background: radial-gradient(ellipse at center,
            transparent 0%,
            transparent 40%,
            rgba(0, 0, 0, 0.1) 70%,
            rgba(0, 0, 0, 0.3) 100%) !important;
    opacity: 0 !important;
    transition: opacity 0.4s ease-out !important;
}

.hero-with-curtain.scroll-stage-2 .hero-theme-curtain {
    opacity: 0.3 !important;
}

.hero-with-curtain.scroll-stage-3 .hero-theme-curtain {
    opacity: 0.6 !important;
    background: radial-gradient(ellipse at center,
            transparent 0%,
            transparent 30%,
            rgba(0, 0, 0, 0.2) 60%,
            rgba(0, 0, 0, 0.5) 100%) !important;
}

.hero-with-curtain.scroll-stage-4 .hero-theme-curtain {
    opacity: 0.9 !important;
    background: radial-gradient(ellipse at center,
            transparent 0%,
            transparent 20%,
            rgba(0, 0, 0, 0.4) 50%,
            rgba(0, 0, 0, 0.8) 100%) !important;
}

/* Hide curtain content text */
.curtain-content {
    display: none !important;
}

/* ============================================================================
   SCROLL INDICATOR - Animated bounce arrow
   ============================================================================ */

.hero-scroll-indicator {
    position: absolute;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 60;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    opacity: 1;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.hero-scroll-indicator .scroll-arrow {
    width: 24px;
    height: 24px;
    border-right: 2px solid rgba(255, 255, 255, 0.6);
    border-bottom: 2px solid rgba(255, 255, 255, 0.6);
    transform: rotate(45deg);
    animation: scrollBounce 2s ease-in-out infinite;
}

.hero-scroll-indicator .scroll-text {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 600;
}

@keyframes scrollBounce {

    0%,
    100% {
        transform: translateY(0) rotate(45deg);
        opacity: 0.6;
    }

    50% {
        transform: translateY(10px) rotate(45deg);
        opacity: 1;
    }
}

/* Hide scroll indicator when scrolling */
.hero-with-curtain.scroll-stage-2 .hero-scroll-indicator,
.hero-with-curtain.scroll-stage-3 .hero-scroll-indicator,
.hero-with-curtain.scroll-stage-4 .hero-scroll-indicator {
    opacity: 0;
    transform: translateX(-50%) translateY(20px);
}

/* ============================================================================
   DISABLE OLD THEME COLOR CHANGES
   ============================================================================ */

/* Override any color changes from theme-active */
.hero-with-curtain.theme-active,
body.hero-theme-active .hero-section {
    /* Keep original dark theme - cinematic effects only, no color changes */
    background: transparent;
}

.hero-with-curtain.theme-active .text-white,
.hero-with-curtain.theme-active .text-white-90,
.hero-with-curtain.theme-active .text-white-75,
.hero-with-curtain.theme-active h1,
.hero-with-curtain.theme-active .lead,
.hero-with-curtain.theme-active p {
    color: inherit !important;
}

/* Keep buttons unchanged - no color transformation */
.hero-with-curtain.theme-active .btn,
.hero-with-curtain.theme-active .shimmer-btn {
    background: inherit;
    color: inherit;
}

/* ============================================================================
   MOBILE OPTIMIZATIONS - Simpler effects
   ============================================================================ */

@media (max-width: 768px) {
    .hero-section.hero-with-curtain {
        perspective: none;
    }

    .hero-with-curtain.scroll-stage-2 .hero-content,
    .hero-with-curtain.scroll-stage-3 .hero-content,
    .hero-with-curtain.scroll-stage-4 .hero-content {
        transform: translateY(-20px) scale(0.98) !important;
        filter: blur(0) !important;
        /* No blur on mobile for performance */
    }

    .hero-with-curtain.scroll-stage-4 .hero-content {
        opacity: 0.3 !important;
    }
}

/* ============================================================================
   REDUCE MOTION PREFERENCE
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {

    .hero-section .hero-content,
    .hero-section .container,
    .hero-section .particle-container,
    .hero-section .btn,
    .hero-section h1,
    .hero-scroll-indicator .scroll-arrow {
        transition: opacity 0.3s ease !important;
        transform: none !important;
        filter: none !important;
        animation: none !important;
    }
}

/* ============================================================================
   AGGRESSIVE OVERRIDES - Disable old light-colored curtain completely
   These must be at the end to override wow_animations.css styles
   ============================================================================ */

/* COMPLETELY DISABLE THE OLD CURTAIN OVERLAY */
.hero-theme-curtain,
.hero-theme-curtain::before,
.hero-theme-curtain::after,
.hero-with-curtain .hero-theme-curtain,
.hero-with-curtain .hero-theme-curtain::before,
.hero-with-curtain .hero-theme-curtain::after {
    /* Make it completely invisible by default */
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    transform: none !important;
    clip-path: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    display: none !important;
}

/* When NOT hidden, show only subtle dark vignette - NO light colors */
.hero-theme-curtain:not(.curtain-hidden),
.hero-with-curtain .hero-theme-curtain:not(.curtain-hidden) {
    display: block !important;
    visibility: visible !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    opacity: 0 !important;
}

/* During scroll stages, add only a subtle dark vignette */
.hero-with-curtain.scroll-stage-1 .hero-theme-curtain,
.hero-with-curtain.scroll-stage-2 .hero-theme-curtain,
.hero-with-curtain.scroll-stage-3 .hero-theme-curtain,
.hero-with-curtain.scroll-stage-4 .hero-theme-curtain {
    display: block !important;
    visibility: visible !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 5 !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: radial-gradient(ellipse at center,
            transparent 0%,
            transparent 50%,
            rgba(0, 0, 0, 0.05) 80%,
            rgba(0, 0, 0, 0.15) 100%) !important;
    pointer-events: none !important;
}

.hero-with-curtain.scroll-stage-1 .hero-theme-curtain {
    opacity: 0.2 !important;
}

.hero-with-curtain.scroll-stage-2 .hero-theme-curtain {
    opacity: 0.4 !important;
    background-image: radial-gradient(ellipse at center,
            transparent 0%,
            transparent 40%,
            rgba(0, 0, 0, 0.1) 70%,
            rgba(0, 0, 0, 0.25) 100%) !important;
}

.hero-with-curtain.scroll-stage-3 .hero-theme-curtain {
    opacity: 0.6 !important;
    background-image: radial-gradient(ellipse at center,
            transparent 0%,
            transparent 30%,
            rgba(0, 0, 0, 0.15) 60%,
            rgba(0, 0, 0, 0.4) 100%) !important;
}

.hero-with-curtain.scroll-stage-4 .hero-theme-curtain {
    opacity: 0.85 !important;
    background-image: radial-gradient(ellipse at center,
            transparent 0%,
            transparent 20%,
            rgba(0, 0, 0, 0.3) 50%,
            rgba(0, 0, 0, 0.6) 100%) !important;
}

/* Disable ALL pseudo-elements of curtain */
.hero-theme-curtain::before,
.hero-theme-curtain::after,
.hero-theme-curtain:not(.curtain-hidden)::before,
.hero-theme-curtain:not(.curtain-hidden)::after,
.hero-with-curtain .hero-theme-curtain::before,
.hero-with-curtain .hero-theme-curtain::after {
    content: none !important;
    display: none !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Override any transform-based sliding */
.hero-theme-curtain[style*="transform"],
.hero-theme-curtain[style*="translateY"] {
    transform: none !important;
}

/* Disable content inside curtain */
.curtain-content,
.hero-theme-curtain .curtain-content,
.curtain-icon,
.curtain-text {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* NO COLOR CHANGES ON THEME-ACTIVE - Keep dark theme */
body.hero-theme-active,
body.hero-theme-active .hero-section,
.hero-with-curtain.theme-active {
    background-color: transparent !important;
}

/* Keep all text white in hero on theme-active */
body.hero-theme-active .hero-section .text-white,
body.hero-theme-active .hero-section .text-white-90,
body.hero-theme-active .hero-section .text-white-75,
body.hero-theme-active .hero-section h1,
body.hero-theme-active .hero-section .lead,
body.hero-theme-active .hero-section p,
.hero-with-curtain.theme-active .text-white,
.hero-with-curtain.theme-active h1,
.hero-with-curtain.theme-active p {
    color: #ffffff !important;
}

/* Keep icons their original colors */
body.hero-theme-active .hero-section i.fas,
.hero-with-curtain.theme-active i.fas {
    color: inherit !important;
}

/* Keep shimmer button blue gradient */
body.hero-theme-active .shimmer-btn,
.hero-with-curtain.theme-active .shimmer-btn {
    background: linear-gradient(135deg, #003875 0%, #0096c7 100%) !important;
    color: #ffffff !important;
}

/* Keep outline button style */
body.hero-theme-active .btn-outline-light,
.hero-with-curtain.theme-active .btn-outline-light {
    border-color: rgba(255, 255, 255, 0.8) !important;
    color: #ffffff !important;
    background: transparent !important;
}

body.hero-theme-active .btn-outline-light:hover,
.hero-with-curtain.theme-active .btn-outline-light:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: #ffffff !important;
}