/* ===================================
   PERFORMANCE OPTIMIZATION
   Lighthouse 100 Score Ready
   =================================== */

/* ===== Critical CSS - Above the Fold ===== */

/* Immediate paint - no layout shift */
html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    line-height: 1.6;
    min-height: 100vh;
}

/* Prevent layout shift for images */
img, video, iframe {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Aspect ratio boxes to prevent CLS */
.aspect-ratio-16-9 {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
    overflow: hidden;
}

.aspect-ratio-4-3 {
    position: relative;
    padding-bottom: 75%; /* 4:3 */
    height: 0;
    overflow: hidden;
}

.aspect-ratio-1-1 {
    position: relative;
    padding-bottom: 100%; /* 1:1 */
    height: 0;
    overflow: hidden;
}

.aspect-ratio-16-9 > *,
.aspect-ratio-4-3 > *,
.aspect-ratio-1-1 > * {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ===== Lazy Loading ===== */

/* Blur placeholder while loading */
img[loading="lazy"] {
    background: linear-gradient(to right, #f0f0f0 0%, #e0e0e0 50%, #f0f0f0 100%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* Remove shimmer when loaded */
img[loading="lazy"].loaded {
    animation: none;
    background: none;
}

/* Fade in when loaded */
img[loading="lazy"].loaded {
    animation: fadeIn 0.3s ease-in;
}

/* Native lazy loading support */
img[loading="lazy"]:not([src]) {
    visibility: hidden;
}

/* ===== Font Loading Optimization ===== */

/* FOUT prevention */
.fonts-loading body {
    visibility: hidden;
}

.fonts-loaded body {
    visibility: visible;
    animation: fadeIn 0.3s ease-in;
}

/* Font display swap for faster rendering */
@font-face {
    font-family: 'CustomFont';
    font-display: swap;
    /* Add your custom fonts here */
}

/* ===== Reduce Layout Shift ===== */

/* Reserve space for header */
body {
    padding-top: 80px; /* Height of fixed header */
}

.main-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 80px;
}

/* Reserve space for common elements */
.section {
    min-height: 400px; /* Prevent layout shift */
}

/* Skeleton screens for loading states */
.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s ease-in-out infinite;
    border-radius: 4px;
}

.skeleton-text {
    height: 1rem;
    margin-bottom: 0.5rem;
}

.skeleton-heading {
    height: 2rem;
    margin-bottom: 1rem;
    width: 60%;
}

.skeleton-card {
    height: 200px;
    border-radius: 12px;
}

/* ===== Performance Utilities ===== */

/* GPU acceleration for animations */
.gpu-accelerated {
    transform: translateZ(0);
    will-change: transform;
}

/* Contain layout reflows */
.contain-layout {
    contain: layout;
}

.contain-paint {
    contain: paint;
}

.contain-strict {
    contain: strict;
}

/* Content visibility for off-screen content */
.content-visibility-auto {
    content-visibility: auto;
    contain-intrinsic-size: 0 500px;
}

/* ===== Intersection Observer Optimization ===== */

/* Hide off-screen elements */
[data-lazy]:not(.loaded) {
    opacity: 0;
    transform: translateY(20px);
}

[data-lazy].loaded {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* ===== Critical Resource Hints ===== */

/* Preconnect to required origins */
link[rel="preconnect"] {
    /* Handled in HTML head */
}

/* DNS prefetch for third-party domains */
link[rel="dns-prefetch"] {
    /* Handled in HTML head */
}

/* ===== Reduce Paint Complexity ===== */

/* Simplify shadows for better performance */
@media (max-width: 768px) {
    .shadow,
    .card,
    .service-card {
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
    }
}

/* Disable expensive effects on low-end devices */
@media (hover: none) and (pointer: coarse) {
    .hover-lift,
    .hover-scale,
    .card-3d {
        transform: none !important;
    }
    
    .parallax-section {
        background-attachment: scroll !important;
    }
}

/* ===== Print Optimization ===== */

@media print {
    /* Remove unnecessary elements */
    .theme-toggle,
    .mobile-menu-toggle,
    .scroll-indicator,
    .cookie-banner {
        display: none !important;
    }
    
    /* Optimize for printing */
    * {
        background: white !important;
        color: black !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }
    
    a[href]:after {
        content: " (" attr(href) ")";
    }
}

/* ===== Network-Aware Loading ===== */

/* Disable heavy animations on slow connections */
@media (prefers-reduced-data) {
    video,
    img[loading="lazy"] {
        display: none;
    }
    
    .hero::before,
    .hero::after,
    *[class*="animate"] {
        animation: none !important;
    }
}

/* ===== Resource Priorities ===== */

/* High priority elements */
.priority-high {
    content-visibility: auto;
}

/* Low priority elements (below fold) */
.priority-low {
    content-visibility: auto;
    contain-intrinsic-size: 0 300px;
}

/* ===== Minimize Repaints ===== */

/* Isolate frequently updated elements */
.isolate-layer {
    isolation: isolate;
    transform: translateZ(0);
}

/* Optimize animations */
@media (prefers-reduced-motion: no-preference) {
    .smooth-animation {
        animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    }
}

/* ===== Web Vitals Optimization ===== */

/* LCP - Largest Contentful Paint */
.hero-title,
.hero-image {
    /* Ensure fast loading */
    content-visibility: auto;
}

/* FID - First Input Delay */
button,
a,
input {
    /* Fast interaction */
    touch-action: manipulation;
}

/* CLS - Cumulative Layout Shift */
/* Prevent layout shift with fixed dimensions */
.fixed-dimensions {
    width: var(--width);
    height: var(--height);
}

/* ===== Progressive Enhancement ===== */

/* Base styles (work without JS) */
.no-js .requires-js {
    display: none;
}

/* Enhanced styles (with JS) */
.js .enhanced {
    /* Add enhanced features */
}

/* ===== Service Worker Support ===== */

/* Offline indicator */
.offline-indicator {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #ff6600;
    color: white;
    padding: 0.5rem;
    text-align: center;
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

.offline-indicator.show {
    transform: translateY(0);
}

/* ===== Critical CSS Inlining ===== */

/* These styles should be inlined in <head> */
/* Copy critical above-the-fold CSS to HTML */

/* ===== Defer Non-Critical CSS ===== */

/* Load non-critical CSS asynchronously */
/* Use <link rel="preload"> in HTML */

/* ===== Browser Hints ===== */

/* Optimize rendering */
* {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
}

/* Smooth scrolling performance */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px;
}

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

/* ===== Memory Optimization ===== */

/* Remove large images from DOM when off-screen */
.lazy-container img[data-offscreen="true"] {
    opacity: 0;
    pointer-events: none;
}

/* ===== Compression Hints ===== */

/* Images should be in modern formats */
/* Use WebP with fallback to JPEG/PNG */
picture source[type="image/webp"] {
    /* Handled in HTML */
}

/* ===== Analytics Performance ===== */

/* Defer analytics loading */
.analytics-script {
    /* Load after page interactive */
}