/**
 * Smooth Scroll Fix for Invictus Safaris
 * Optimizes sticky header behavior and improves scrolling performance
 */

/* Improve scroll behavior */
html {
    scroll-behavior: smooth;
}

body {
    overflow-x: hidden; /* Prevent horizontal scroll issues */
}

/* Optimize sticky header transitions */
.will-sticky .sticky-active {
    position: fixed;
    top: -100%;
    right: 0;
    left: 0;
    background-color: var(--white-color);
    /* Use transform for smoother transitions */
    transform: translateY(-100%);
    transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
    /* Use GPU acceleration */
    will-change: transform;
    z-index: 1000;
    /* Prevent blinking */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.will-sticky .sticky-active.active {
    top: 0;
    /* Use transform instead of changing top property */
    transform: translateY(0);
}

/* Additional stability improvements */
.sticky-wrapper {
    /* Prevent layout shifts */
    position: relative;
    transition: min-height 0.1s ease;
}

/* Optimize scroll performance by reducing repaints */
.sticky-wrapper {
    /* Create a new stacking context to optimize repaints */
    position: relative;
    z-index: 1;
}

/* Improve scrolling on mobile devices */
@media (max-width: 768px) {
    body {
        /* Enable momentum scrolling on iOS */
        -webkit-overflow-scrolling: touch;
    }
    
    .will-sticky .sticky-active {
        /* Reduce animation complexity on mobile */
        transition: transform 0.25s ease;
    }
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    
    .will-sticky .sticky-active {
        transition: none;
    }
}

/* Fix for floating elements that might cause scroll issues */
.floating, .modern-cta {
    /* Ensure floating elements don't interfere with scroll */
    will-change: auto;
    backface-visibility: hidden;
}

/* Optimize animations during scroll */
.tour-package-card,
.destination-card,
.modern-blog-card {
    /* Reduce repaints during scroll */
    will-change: auto;
}

/* Only apply will-change during actual animations */
.tour-package-card:hover,
.destination-card:hover,
.modern-blog-card:hover {
    will-change: transform;
}

/* Ensure z-index hierarchy doesn't cause issues */
.shape-mockup {
    /* Reduce z-index conflicts */
    z-index: -1 !important;
}

.hero-layout2 {
    /* Ensure hero section doesn't interfere with scroll */
    position: relative;
    z-index: 1;
}

/* Smooth scrolling for anchor links */
a[href^="#"]:not([href="#"]) {
    scroll-behavior: smooth;
}

/* Improve scroll performance on sections with many elements */
.modern-tour-packages-grid,
.modern-destination-grid,
.modern-blog-grid {
    /* Use CSS containment to optimize performance */
    contain: layout style;
}

/* Fix for any remaining scroll indicators or progress bars */
.scroll-indicator,
.progress-indicator,
.back-to-top {
    /* Ensure these don't interfere with smooth scrolling */
    pointer-events: auto;
    will-change: auto;
    backface-visibility: hidden;
}

/* Performance optimization for image loading */
img {
    /* Prevent layout shifts during image loading */
    height: auto;
    max-width: 100%;
    vertical-align: middle;
}

/* Optimize carousel/slider performance */
.vs-carousel,
.slick-slider {
    /* Improve slider performance */
    will-change: auto;
}

.vs-carousel.slick-initialized,
.slick-slider.slick-initialized {
    will-change: transform;
}