/* Performance Optimization CSS - Mobile First */

/* 1. Prevent Layout Shifts with explicit sizing */

/* Reserve space for images before they load */
img {
    max-width: 100%;
    height: auto;
}

img[width][height] {
    height: auto;
}

/* Prevent cumulative layout shift (CLS) for lazy loaded images */
img:not([src]) {
    visibility: hidden;
}

/* YouTube embed placeholder */
.youtube-lazy {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
}

.youtube-lazy iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* 2. Optimize Animations - Reduce forced reflows */

/* Use transform instead of position changes */
.wow {
    backface-visibility: hidden;
    perspective: 1000px;
}

/* GPU acceleration for smooth animations */
.fadeInUp,
.fadeIn,
.zoomIn,
.fadeInLeft,
.fadeInRight {
    transform: translateZ(0);
    will-change: transform, opacity;
}

/* Remove will-change after animation */
.animated {
    will-change: auto !important;
}

/* 3. CSS Containment - Isolate sections to reduce reflow impact */

.feature-item,
.testimonial-item,
.pricing-item {
    contain: layout style paint;
}

/* Container level containment */
.container-fluid.feature,
.container-fluid.py-5 {
    contain: layout style;
}

/* 4. Optimize scrolling performance */

/* Use passive event listeners hint */
* {
    touch-action: manipulation;
}

/* Smooth scrolling with GPU acceleration */
html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

/* 5. Navbar optimization */

.nav-bar {
    will-change: auto;
    contain: layout style;
}

.nav-bar.sticky-top {
    transform: translateZ(0);
}

/* 6. Back to top button optimization */

.back-to-top {
    transform: translateZ(0);
    will-change: opacity;
}

/* 7. Modal performance */

.modal {
    contain: layout style;
}

.modal.show {
    transform: translateZ(0);
}

/* 8. Spinner optimization */

#spinner {
    contain: strict;
    transform: translateZ(0);
}

/* 9. Critical rendering path optimization */

/* Font display is handled in HTML via Google Fonts with display=swap parameter */

/* 10. Reduce paint areas */

/* Avoid expensive CSS properties on scroll */
.nav-bar,
.back-to-top {
    pointer-events: auto;
}

/* 11. Mobile specific optimizations */

@media (max-width: 768px) {
    /* Disable animations on mobile to prevent layout shifts */
    .wow {
        animation: none !important;
        visibility: visible !important;
    }
    
    /* Reduce complexity on mobile */
    .feature-item,
    .testimonial-item {
        contain: layout;
    }
    
    /* Optimize touch targets */
    a, button {
        min-height: 44px;
        min-width: 44px;
    }
}

/* 12. Intersection Observer optimizations */

/* Elements that will be lazy loaded */
[data-lazy] {
    min-height: 200px; /* Prevent layout shift */
}

/* 13. Grid layout stability */

.row {
    contain: layout;
}

/* 14. Carousel optimization */

.owl-carousel {
    contain: layout style;
}

.owl-carousel .owl-stage {
    transform: translateZ(0);
}

/* 15. Form optimization */

input, select, textarea {
    contain: layout style;
}

/* 16. Table optimization for large datasets */

table {
    contain: layout style;
}

/* 17. Reduce repaints during scroll */

.feature-icon,
.contact-icon {
    will-change: auto;
    transform: translateZ(0);
}

/* 18. Optimize background images */

.hero-section,
.testimonial-section {
    background-attachment: scroll; /* Avoid fixed backgrounds on mobile */
}

@media (min-width: 992px) {
    .hero-section {
        background-attachment: fixed;
    }
}

/* 19. Defer non-critical rendering */

/* Hide elements below the fold initially */
.footer {
    content-visibility: auto;
    contain-intrinsic-size: 500px;
}

/* 20. Print optimization */

@media print {
    .wow {
        animation: none !important;
        visibility: visible !important;
    }
    
    .back-to-top,
    .navbar-toggler,
    #spinner {
        display: none !important;
    }
}

/* 21. Accessibility - respect user preferences */

@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;
    }
}

/* 22. Focus optimization */

:focus-visible {
    outline: 2px solid #0A4D68;
    outline-offset: 2px;
}

/* 23. Loading states to prevent layout shift */

.loading {
    min-height: 100px;
    position: relative;
}

.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #0A4D68;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}