/**
 * Performance Optimization CSS
 * Critical CSS improvements for smooth scrolling and animations
 * 
 * @package Trekking_Theme
 */

/* ==========================================================================
   CRITICAL PERFORMANCE OVERRIDES
   ========================================================================== */

/* 
 * IMPORTANT: Override expensive "transition: all" from style.css
 * Using "all" transitions is a major performance killer
 */

/* Override global "all" transitions with specific properties only */
a,
.btn,
.tour-card,
.testimonial-card,
.blog-card,
.moment-card,
.gallery-item,
.feature-box,
.private-feature {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                opacity 0.3s ease !important;
}

/* Optimize header transitions */
.site-header {
    transition: background-color 0.3s ease, 
                box-shadow 0.3s ease !important;
    contain: layout style;
}

.site-header.scrolled {
    transform: translateZ(0);
}

/* ==========================================================================
   Hardware Acceleration & Performance
   ========================================================================== */

/* Enable hardware acceleration for frequently animated elements */
.site-header,
.scroll-progress,
.tour-card,
.testimonial-card,
.moment-card,
.blog-card,
.mobile-menu-toggle,
.primary-navigation,
[data-parallax] {
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* Optimize scroll progress bar */
.scroll-progress {
    contain: strict;
}

/* ==========================================================================
   Smooth Scrolling Optimizations
   ========================================================================== */

/* Smooth scrolling behavior */
html {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

/* Global anchor offset variable (updated via JS) */
:root {
    --anchor-offset: 0px;
}

/* Ensure in-page anchors account for sticky headers/navs */
[id],
.elementor-section[id] {
    scroll-margin-top: var(--anchor-offset);
}

/* Optimize scrolling containers */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* ==========================================================================
   Animation Performance
   ========================================================================== */

/* Optimize image hover transforms - use will-change hint */
.tour-card-image,
.blog-card-image,
.about-image img,
.gallery-item img,
.moment-card img,
.outreach-img img,
.family-img img {
    will-change: transform;
}

/* Optimize hover states - prevent reflows */
.tour-card:hover,
.blog-card:hover,
.moment-card:hover,
.testimonial-card:hover {
    transform: translateY(-5px) translateZ(0) !important;
    will-change: transform;
}

/* Optimize card image zoom on hover */
.tour-card:hover .tour-card-image,
.blog-card:hover .blog-card-image {
    transform: scale(1.05) translateZ(0) !important;
}

/* Remove will-change when not hovering */
.tour-card,
.blog-card,
.moment-card {
    will-change: auto;
}

/* ==========================================================================
   Image Loading Optimizations
   ========================================================================== */

/* Prevent layout shift during image loading */
img {
    height: auto;
    max-width: 100%;
}

/* Lazy loading works natively - no additional styling needed */

/* ==========================================================================
   Reduce Animation Overhead
   ========================================================================== */

/* Faster fade-up animations - override 0.8s from style.css */
.fade-up {
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
                transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.fade-up.visible {
    opacity: 1;
    transform: translateY(0) translateZ(0);
}

/* ==========================================================================
   Reduce Paint Operations
   ========================================================================== */

/* Contain paint operations */
.tour-card,
.testimonial-card,
.blog-card,
.moment-card,
.tour-search-widget {
    contain: layout paint;
}

/* ==========================================================================
   Optimize Typography
   ========================================================================== */

/* Font rendering optimization */
body,
h1, h2, h3, h4, h5, h6,
p, a, span, div {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ==========================================================================
   Box Shadow Optimization
   ========================================================================== */

/* Prevent box-shadow transitions (very expensive) - use opacity instead */
.tour-card,
.blog-card,
.testimonial-card,
.moment-card,
.feature-box,
.private-feature,
.gallery-item {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08) !important;
    transition: transform 0.3s ease, opacity 0.3s ease !important;
}

.tour-card:hover,
.blog-card:hover,
.testimonial-card:hover,
.moment-card:hover {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08) !important;
}

/* ==========================================================================
   Mobile Performance
   ========================================================================== */

@media (max-width: 768px) {
    /* Disable expensive effects on mobile */
    [data-parallax] {
        transform: none !important;
        will-change: auto !important;
    }
    
    /* Disable hover effects on mobile (prevent lag on touch) */
    .tour-card:hover,
    .blog-card:hover,
    .moment-card:hover,
    .testimonial-card:hover {
        transform: none !important;
    }
    
    .tour-card:hover .tour-card-image,
    .blog-card:hover .blog-card-image {
        transform: none !important;
    }
    
    /* Faster animations on mobile */
    .fade-up,
    .fade-in {
        transition-duration: 0.2s !important;
    }
    
    /* Optimize touch scrolling */
    body {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;
    }
    
    /* Simplify mobile nav transitions */
    .primary-navigation {
        transition: left 0.3s ease !important;
    }
}

/* ==========================================================================
   Reduce Motion Preference
   ========================================================================== */

@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;
    }
    
    [data-parallax] {
        transform: none !important;
    }
}

/* ==========================================================================
   Page Load Animation
   ========================================================================== */

body {
    opacity: 0;
    transition: opacity 0.2s ease-in;
}

body.loaded {
    opacity: 1;
}

/* Optimize typewriter animation - reduce steps for better performance */
.hero-title,
.typewriter {
    animation-duration: 1.5s !important;
}

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

/* Reduce paint complexity for frequently changing elements */
.site-header,
.hero-section,
.tour-card,
.blog-card {
    isolation: isolate;
}

/* Optimize filter and backdrop effects */
.private-feature-icon svg,
.private-feature-icon i {
    filter: none !important;
}

/* Prevent excessive repaints on link hovers */
a::after {
    will-change: width;
}

/* Optimize button ripple effect */
.btn::before {
    transition: width 0.3s, height 0.3s !important;
}

/* ==========================================================================
   Optimize Carousel/Slider
   ========================================================================== */

.moments-track,
.carousel-track {
    will-change: transform;
    transform: translateZ(0);
}

.moment-card,
.carousel-item {
    contain: layout style paint;
}

/* ==========================================================================
   Optimize Dropdown/Modals
   ========================================================================== */

.tour-search-results,
.dropdown-menu,
.modal {
    will-change: transform, opacity;
    transform: translateZ(0);
}

/* Remove will-change when hidden */
.tour-search-results[style*="display: none"],
.dropdown-menu:not(.active),
.modal:not(.active) {
    will-change: auto;
}

/* ==========================================================================
   Grid & Flexbox Optimizations
   ========================================================================== */

.tours-grid,
.blog-grid,
.gallery-grid {
    contain: layout;
}

/* ==========================================================================
   Form Performance
   ========================================================================== */

input,
textarea,
select,
button {
    touch-action: manipulation;
}

/* ==========================================================================
   Critical CSS for Immediate Rendering
   ========================================================================== */

/* Images render immediately - no opacity manipulation */

/* ==========================================================================
   Shadow & Border Optimizations
   ========================================================================== */

/* Use transform for shadows instead of box-shadow when animating */
.tour-card:hover,
.blog-card:hover {
    transform: translateY(-5px) translateZ(0);
}

/* ==========================================================================
   Z-Index Management
   ========================================================================== */

/* Organize z-index to prevent excessive layer creation */
.site-header { z-index: 1000; }
.mobile-menu-toggle { z-index: 1001; }
.primary-navigation { z-index: 999; }
.scroll-progress { z-index: 10000; }
.tour-search-results { z-index: 1050; }

/* ==========================================================================
   Composite Layers
   ========================================================================== */

/* Force composite layer for elements that frequently change */
.animated,
[class*="fade-"],
[class*="slide-"] {
    transform: translateZ(0);
}