/* ============================================
   Advanced Hero Slider - 2026 Edition
   ============================================ */

.hero-slider-container {
    position: relative;
    height: 100vh;
    overflow: hidden;
}

.hero-slider {
    position: relative;
    height: 100%;
    width: 100%;
}

.hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1.5s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

.hero-slide.active {
    opacity: 1;
    pointer-events: auto;
    z-index: 2;
}

.hero-slide.prev {
    opacity: 0;
    z-index: 1;
}

/* Parallax Background */
.slide-background {
    position: absolute;
    top: -10%;
    left: -10%;
    width: 120%;
    height: 120%;
    background-size: cover;
    background-position: center;
    transition: transform 8s ease-out;
}

.hero-slide.active .slide-background {
    transform: scale(1.1);
}

/* Ken Burns Effect */
@keyframes kenburns {
    0% {
        transform: scale(1) translate(0, 0);
    }

    100% {
        transform: scale(1.15) translate(-5%, -5%);
    }
}

.slide-background.kenburns {
    animation: kenburns 20s ease-in-out infinite alternate;
}

/* Gradient Overlay */
.slide-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(0, 56, 117, 0.85) 0%, rgba(0, 82, 165, 0.75) 50%, rgba(30, 107, 191, 0.85) 100%);
    z-index: 1;
}

/* Slide Content */
.slide-content {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    align-items: center;
    padding-top: 80px;
}

.slide-text {
    max-width: 800px;
    color: white;
}

/* Text Animations */
.slide-title {
    font-size: clamp(2.5rem, 6vw, 5rem);
    margin-bottom: var(--space-md);
    opacity: 0;
    transform: translateY(50px);
    transition: all 1s cubic-bezier(0.4, 0, 0.2, 1) 0.3s;
}

.slide-subtitle {
    font-size: clamp(1.2rem, 3vw, 1.8rem);
    margin-bottom: var(--space-xl);
    font-weight: 300;
    opacity: 0;
    transform: translateY(50px);
    transition: all 1s cubic-bezier(0.4, 0, 0.2, 1) 0.6s;
}

.slide-cta {
    display: flex;
    gap: var(--space-md);
    flex-wrap: wrap;
    opacity: 0;
    transform: translateY(50px);
    transition: all 1s cubic-bezier(0.4, 0, 0.2, 1) 0.9s;
}

.hero-slide.active .slide-title,
.hero-slide.active .slide-subtitle,
.hero-slide.active .slide-cta {
    opacity: 1;
    transform: translateY(0);
}

/* Navigation Arrows */
.slider-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    color: white;
    font-size: 1.5rem;
}

.slider-nav:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-50%) scale(1.1);
}

.slider-nav-prev {
    left: var(--space-lg);
}

.slider-nav-next {
    right: var(--space-lg);
}

/* Progress Dots */
.slider-pagination {
    position: absolute;
    bottom: var(--space-xl);
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    gap: var(--space-md);
}

.slider-dot {
    width: 50px;
    height: 4px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.slider-dot:hover {
    background: rgba(255, 255, 255, 0.5);
}

.slider-dot.active {
    background: rgba(255, 255, 255, 0.4);
}

.slider-dot.active::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    background: white;
    animation: progress 7s linear;
}

@keyframes progress {
    to {
        width: 100%;
    }
}

/* Slide Number */
.slide-number {
    position: absolute;
    top: 100px;
    right: var(--space-xl);
    z-index: 10;
    color: white;
    font-size: 1.2rem;
    font-weight: 300;
    opacity: 0.7;
}

/* Pause/Play Button */
.slider-control {
    position: absolute;
    bottom: var(--space-xl);
    right: var(--space-xl);
    z-index: 10;
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    color: white;
    font-size: 1.2rem;
}

.slider-control:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

/* Responsive */
@media (max-width: 768px) {
    .slider-nav {
        width: 45px;
        height: 45px;
        font-size: 1.2rem;
    }

    .slider-nav-prev {
        left: var(--space-sm);
    }

    .slider-nav-next {
        right: var(--space-sm);
    }

    .slide-number {
        top: 90px;
        right: var(--space-md);
        font-size: 1rem;
    }

    .slider-pagination {
        bottom: var(--space-lg);
    }

    .slider-dot {
        width: 30px;
        height: 3px;
    }

    .slider-control {
        bottom: var(--space-lg);
        right: var(--space-md);
        width: 40px;
        height: 40px;
    }

    .slide-cta {
        flex-direction: column;
    }
}

/* Touch Swipe Indicator */
.swipe-indicator {
    position: absolute;
    bottom: 120px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    color: white;
    opacity: 0.5;
    font-size: 0.9rem;
    animation: fade-pulse 3s infinite;
}

@keyframes fade-pulse {

    0%,
    100% {
        opacity: 0.3;
    }

    50% {
        opacity: 0.7;
    }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {

    .slide-background,
    .slide-title,
    .slide-subtitle,
    .slide-cta {
        transition-duration: 0.01ms !important;
    }
}

/* ============================================
   Split Layout Styles
   ============================================ */
.split-layout-container {
    display: flex;
    height: 100%;
    width: 100%;
    background-size: cover;
    background-position: center;
    position: relative;
}

.split-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 40, 90, 0.85);
}

.split-content {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 50px;
    position: relative;
    z-index: 2;
}

.split-image {
    flex: 1;
    background-size: cover;
    background-position: center;
    position: relative;
    z-index: 2;
}

.split-image-overlay-left {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(0, 40, 90, 0.85) 0%, transparent 20%);
}

.split-image-overlay-right {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to left, rgba(0, 40, 90, 0.85) 0%, transparent 20%);
}

/* Text alignment overrides for split layout */
.split-text-left .slide-title,
.split-text-left .slide-subtitle {
    text-align: left;
}

.split-cta-left {
    justify-content: flex-start;
}

/* Responsive Styles */
@media (max-width: 768px) {
    .split-layout-container {
        flex-direction: column-reverse;
        /* Content on top (visually, but DOM order usually Image then Content? Wait, usually we want Content first on mobile or Image? Let's assume standard stacking: Image top, Content bottom, OR Content top. Let's stick effectively to column) */
        /* Actually, in the HTML: 
           Split Right: Content (Left) - Image (Right) -> Mobile: Content Top, Image Bottom? Or Image Top?
           Usually Image Top is better for visuals.
           However, let's look at the HTML structure.
           Split Right: div.split-content, div.split-image.
           If we do flex-direction: column-reverse, Image will be top, Content bottom.
           
           Split Left: div.split-image, div.split-content.
           If we do flex-direction: column, Image top, Content bottom.
           
           So we need specific rules.
        */
        flex-direction: column;
    }

    /* Specific override for Split Right to put image on top */
    .hero-slide .split-layout-container:has(.split-content:first-child) {
        flex-direction: column-reverse;
    }

    .split-content {
        padding: 30px 20px;
        flex: 0 0 auto;
        /* Don't expand to fill height if image is there */
        width: 100%;
        background: rgba(0, 40, 90, 0.95);
        /* Darker background for readability on mobile if overlapping or separate */
    }

    .split-image {
        flex: 1;
        width: 100%;
        min-height: 250px;
    }

    .slide-title {
        font-size: 2rem;
        /* Smaller title on mobile */
        text-align: center !important;
        /* Force center on mobile usually looks better, or keep left? Let's try center for cohesive look, or stick to left if design demands. User said "not mobile responsive", so let's make it safe. Left align is fine if padding is good. Let's stick to left but ensure it fits. */
        margin-bottom: var(--space-sm);
    }

    .split-text-left .slide-title,
    .split-text-left .slide-subtitle {
        text-align: center !important;
        /* Force center on mobile for better balance */
    }

    .split-cta-left {
        justify-content: center !important;
    }

    .slide-subtitle {
        font-size: 1rem;
        margin-bottom: var(--space-md);
        text-align: center !important;
    }

    .slide-cta {
        justify-content: center;
        gap: var(--space-sm);
    }

    .slide-content {
        padding-top: 60px;
        /* Adjust for header if needed */
        align-items: center;
        /* Center content vertically */
    }

    .slide-text {
        text-align: center;
    }
}