/**
 * Core Web Vitals Optimizations
 * Improves LCP, FID, and CLS scores
 */

/* === LARGEST CONTENTFUL PAINT (LCP) OPTIMIZATIONS === */

/* Critical resources loading handled by main CSS - removed to avoid conflicts */

/* Logo loading handled by main CSS - removed to avoid conflicts */

/* Optimize font loading for LCP */
@font-face {
    font-family: 'Inter';
    font-display: swap; /* Improves LCP by avoiding invisible text */
    src: local('Inter'), url('fonts/inter.woff2') format('woff2');
}

/* Critical CSS inlining helpers */
.above-fold {
    /* Mark above-the-fold content for critical CSS */
    critical: true;
}

/* === FIRST INPUT DELAY (FID) OPTIMIZATIONS === */

/* Optimize interactive elements */
.hero-cta-button,
.newsletter-cta-button,
.modal-close,
.btn-primary,
.btn-secondary {
    /* Improve button responsiveness */
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    will-change: transform;
    transform: translateZ(0); /* Force hardware acceleration */
}

/* Reduce JavaScript execution time */
.lazy-load {
    /* Defer non-critical image loading */
    loading: lazy;
}

/* === CUMULATIVE LAYOUT SHIFT (CLS) OPTIMIZATIONS === */

/* Hero image dimensions handled by main CSS - removed to avoid conflicts */

/* Logo dimensions handled by main CSS - removed to avoid conflicts */

/* Reserve space for dynamic content */
.newsletter-form {
    min-height: 400px; /* Prevents layout shift when form loads */
}

.form-status {
    min-height: 40px; /* Reserve space for status messages */
}

/* Skeleton loading states */
.skeleton {
    background: linear-gradient(90deg,
        rgba(255,255,255,0.1) 25%,
        rgba(255,255,255,0.2) 50%,
        rgba(255,255,255,0.1) 75%
    );
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
}

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

/* === PERFORMANCE CRITICAL STYLES === */

/* Reduce paint complexity */
.hero-visual-container {
    contain: layout style paint; /* CSS containment for better performance */
}

/* Optimize animations for 60fps */
.floating-icon,
.scanning-line,
.ai-grid-overlay {
    will-change: transform, opacity;
    transform: translateZ(0); /* Force GPU acceleration */
}

/* Minimize reflows and repaints */
.modal-content {
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* === MOBILE PERFORMANCE === */
@media (max-width: 768px) {
    /* Reduce complexity on mobile */
    .floating-icon {
        animation: none; /* Disable animations on mobile for better performance */
    }

    .ai-grid-overlay,
    .scanning-line {
        display: none; /* Remove expensive effects on mobile */
    }

    /* Hero image mobile styles handled by main CSS - removed to avoid conflicts */
}

/* === REDUCED MOTION ACCESSIBILITY === */
@media (prefers-reduced-motion: reduce) {
    /* Disable all animations for users who prefer reduced motion */
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .skeleton {
        animation: none;
        background: rgba(255,255,255,0.1);
    }
}

/* === CRITICAL LOADING OPTIMIZATIONS === */

/* Defer non-critical CSS */
.non-critical {
    /* Mark for deferred loading */
    defer: true;
}

/* Optimize for paint holding */
.hero-content {
    content-visibility: auto; /* Only render when visible */
    contain-intrinsic-size: 600px; /* Estimated size for layout */
}

/* Resource hints for performance */
.preload-hint {
    /* For critical resources that should be preloaded */
    preload: true;
}

/* === FONT PERFORMANCE === */

/* Optimize font loading */
.font-primary {
    font-display: swap;
    font-synthesis: none; /* Prevent synthetic font generation */
}

/* === IMAGE PERFORMANCE === */

/* Modern image formats */
.webp-support .hero-image {
    background-image: url('images/hero.webp');
}

.no-webp .hero-image {
    background-image: url('images/hero.jpg');
}

/* Responsive images */
.responsive-image {
    width: 100%;
    height: auto;
    max-width: 100%;
}

/* === LAYOUT STABILITY === */

/* Prevent layout shifts during loading */
.content-container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.main-content {
    flex: 1;
}

/* === CRITICAL RESOURCE LOADING === */

/* Inline critical CSS for above-the-fold content */
.critical-css {
    /* Styles that must be inlined */
    display: block;
    visibility: visible;
}

/* === PERFORMANCE MONITORING === */

/* Mark performance critical elements */
.lcp-element {
    /* Largest Contentful Paint candidate */
    performance-critical: true;
}

.fid-element {
    /* Interactive element for FID measurement */
    user-interaction: true;
}

.cls-stable {
    /* Layout-stable element */
    layout-stable: true;
}