/* ===================================
   120fps Scroll Optimization
   Ultra-Smooth Mobile Performance
   =================================== */

/* ===== High Refresh Rate Support ===== */
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: auto; /* Let browser handle for 120fps */
    }
}

/* ===== Performance Optimizations ===== */

/* Enable GPU acceleration on all animated elements */
* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Optimize text rendering for performance */
body {
    text-rendering: optimizeSpeed;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Hardware acceleration for smooth scrolling */
html {
    -webkit-overflow-scrolling: touch; /* iOS momentum scrolling */
    scroll-behavior: smooth;
}

@supports (scroll-behavior: smooth) {
    html {
        scroll-behavior: smooth;
    }
}

/* ===== 120fps Scroll Optimizations ===== */

/* Optimize all scrollable containers */
body,
.nav-menu,
.modal,
.section {
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
}

/* GPU acceleration for transforms */
.hero,
.section,
.card,
.service-card,
.destination-card,
.nav-menu,
.navbar {
    will-change: transform;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Optimize images for scroll performance */
img {
    will-change: auto;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

/* ===== Mobile-Specific Optimizations ===== */
@media (max-width: 968px) {
    
    /* Optimize touch scrolling */
    * {
        -webkit-tap-highlight-color: transparent;
        tap-highlight-color: transparent;
    }
    
    /* Fast momentum scrolling */
    body {
        -webkit-overflow-scrolling: touch;
        overflow-scrolling: touch;
        scroll-behavior: smooth;
    }
    
    /* Reduce repaints on scroll */
    .hero-background,
    .page-header {
        will-change: transform;
        transform: translateZ(0);
    }
    
    /* Optimize animations during scroll */
    .fade-in,
    .slide-in,
    .scale-in {
        will-change: opacity, transform;
        backface-visibility: hidden;
    }
}

/* ===== 120Hz Display Support ===== */
@media screen and (min-resolution: 120dpi),
       screen and (-webkit-min-device-pixel-ratio: 1.5) {
    
    /* Optimize for high refresh rate displays */
    * {
        will-change: auto;
    }
    
    body {
        -webkit-font-smoothing: subpixel-antialiased;
    }
    
    /* Smooth animations at 120fps */
    .animate {
        animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);
    }
}

/* ===== Intersection Observer Optimizations ===== */

/* Optimize elements before they enter viewport */
[data-animate]:not(.animated) {
    will-change: opacity, transform;
}

/* Remove will-change after animation completes */
[data-animate].animated {
    will-change: auto;
}

/* ===== Scroll Performance Hints ===== */

/* Fixed elements optimization */
.navbar,
.mobile-menu-btn,
.back-to-top {
    will-change: transform;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

/* Parallax optimization */
.parallax {
    will-change: transform;
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
}

/* ===== Reduce Jank ===== */

/* Prevent layout shifts */
img,
video {
    content-visibility: auto;
    contain-intrinsic-size: 500px;
}

/* Optimize rendering */
.section {
    contain: layout style paint;
}

/* ===== Smooth Scroll Polyfill for iOS ===== */
@supports (-webkit-overflow-scrolling: touch) {
    html {
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
    }
    
    body {
        -webkit-overflow-scrolling: touch;
    }
}

/* ===== Touch Gesture Optimizations ===== */
@media (hover: none) and (pointer: coarse) {
    /* Optimize for touch devices */
    
    * {
        /* Remove 300ms tap delay */
        touch-action: manipulation;
        -ms-touch-action: manipulation;
    }
    
    a,
    button,
    .btn {
        /* Fast touch response */
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }
    
    /* Optimize scroll containers */
    body,
    .nav-menu,
    .modal {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;
    }
}

/* ===== 120fps Animation Support ===== */
@media (prefers-reduced-motion: no-preference) {
    
    /* Optimize for 120fps capable devices */
    @supports (animation-timeline: scroll()) {
        .parallax {
            animation-timing-function: linear;
        }
    }
    
    /* Smooth transitions at high refresh rates */
    * {
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    }
}

/* ===== Compositor Layer Hints ===== */

/* Force GPU layers for smooth scrolling */
.hero-image,
.destination-card img,
.service-card,
.testimonial-card {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    will-change: transform;
}

/* Optimize fixed elements */
.navbar.scrolled {
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
}

/* ===== Content Visibility ===== */

/* Optimize off-screen rendering */
.section {
    content-visibility: auto;
    contain-intrinsic-size: auto 500px;
}

.destination-card,
.service-card,
.testimonial-card {
    content-visibility: auto;
    contain-intrinsic-size: auto 300px;
}

/* ===== Passive Event Listeners ===== */
/* These are handled in JavaScript for better performance */

/* ===== iOS Safari Specific ===== */
@supports (-webkit-touch-callout: none) {
    /* iOS-specific optimizations */
    
    body {
        /* Momentum scrolling on iOS */
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: none;
    }
    
    /* Prevent rubber banding */
    html {
        overscroll-behavior: none;
    }
    
    /* Smooth text rendering */
    * {
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeSpeed;
    }
}

/* ===== Android Chrome Specific ===== */
@supports (overscroll-behavior: contain) {
    body {
        overscroll-behavior: contain;
        overscroll-behavior-y: contain;
    }
}

/* ===== Reduce Motion for Accessibility ===== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ===== Performance Monitoring Hints ===== */

/* Mark critical rendering path elements */
.hero,
.navbar,
.hero-content {
    contain: layout style;
}

/* Non-critical elements */
.footer,
.testimonial-section {
    contain: layout style paint;
}

/* ===== Browser-Specific Optimizations ===== */

/* Safari */
@supports (-webkit-backdrop-filter: blur(10px)) {
    .navbar {
        -webkit-backface-visibility: hidden;
        -webkit-perspective: 1000;
    }
}

/* Chrome/Edge */
@supports (backdrop-filter: blur(10px)) {
    .navbar {
        backface-visibility: hidden;
        perspective: 1000px;
    }
}

/* ===== Scroll Snap for Better UX ===== */
/* Optional: Enable if you want section snapping */
/*
@media (max-width: 968px) {
    .main-content {
        scroll-snap-type: y proximity;
    }
    
    .section {
        scroll-snap-align: start;
        scroll-snap-stop: normal;
    }
}
*/

/* ===== Final Performance Boost ===== */

/* Optimize all transitions for 120fps */
* {
    transition-duration: 0.3s;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Fast animations */
.fast-animate {
    transition-duration: 0.15s;
}

/* Smooth animations */
.smooth-animate {
    transition-duration: 0.5s;
    transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ===== Debug Mode (Remove in Production) ===== */
/*
* {
    outline: 1px solid rgba(255, 0, 0, 0.1);
}
*/