/**
 * Performance Optimizations CSS
 * Lazy loading, blur effects, smooth transitions
 */

/* ==============================================
   LAYOUT FIX - Footer always at bottom
   ============================================== */

html {
    height: 100%;
}

body {
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1;
    min-height: calc(100vh - 300px);
}

#main-content {
    min-height: calc(100vh - 300px);
    width: 100%;
}

footer {
    margin-top: auto;
}

/* ==============================================
   LAZY LOADING IMAGES
   ============================================== */

/* Placeholder blur mientras carga */
img.lazy-blur {
    filter: blur(10px);
    transition: filter 0.3s ease-in-out;
}

img.lazy-loaded {
    filter: blur(0);
}

/* Prevenir layout shift */
img[data-src] {
    min-height: 200px;
    background: linear-gradient(135deg, #f5f5f5 0%, #e0e0e0 100%);
}

/* Skeleton loading para imágenes */
.skeleton-image {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
}

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

/* ==============================================
   WILL-CHANGE OPTIMIZATIONS
   ============================================== */

/* Optimizar elementos que se animan frecuentemente */
.page-transition,
.modal-overlay,
.slider-slide {
    will-change: transform, opacity;
}

/* Remover will-change después de animación */
.page-transition:not(.open),
.modal-overlay:not(.show) {
    will-change: auto;
}

/* ==============================================
   CONTENIDO ABOVE THE FOLD
   ============================================== */

/* Crítico: Logo y menú deben renderizar rápido */
header .logo img {
    content-visibility: auto;
    display: block;
}

/* Slider principal - prioritario */
.slider-container {
    contain: layout style paint;
}

.slider-slide:not(.active) {
    content-visibility: hidden;
}

/* ==============================================
   CONTENIDO BELOW THE FOLD
   ============================================== */

/* Defer rendering de contenido no visible */
.featured-vehicles,
.testimonials,
footer {
    content-visibility: auto;
    contain-intrinsic-size: 0 500px;
}

/* ==============================================
   FONT OPTIMIZATION
   ============================================== */

/* Evitar FOIT (Flash of Invisible Text) */
body {
    font-display: swap;
}

/* Usar fuentes del sistema como fallback */
.font-loading body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, 
                 "Helvetica Neue", Arial, sans-serif;
}

/* ==============================================
   REDUCE MOTION
   ============================================== */

/* Respetar preferencias de usuario */
@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;
    }
    
    .page-transition {
        transition: none !important;
    }
}

/* ==============================================
   MOBILE PERFORMANCE
   ============================================== */

@media (max-width: 768px) {
    /* Reducir complejidad visual en móvil */
    .complex-shadow {
        box-shadow: none;
    }
    
    .complex-gradient {
        background: solid color;
    }
    
    /* Simplificar transiciones */
    * {
        transition-duration: 0.2s !important;
    }
    
    /* Desactivar parallax en móvil */
    .parallax {
        background-attachment: scroll !important;
    }
}

/* ==============================================
   TOUCH OPTIMIZATION
   ============================================== */

/* Mejorar área de touch en móvil */
@media (hover: none) and (pointer: coarse) {
    button,
    a,
    .clickable {
        min-height: 44px;
        min-width: 44px;
        padding: 12px;
    }
}

/* Prevenir delay de 300ms en tap */
a, button, input, select, textarea {
    touch-action: manipulation;
}

/* ==============================================
   GPU ACCELERATION
   ============================================== */

/* Forzar GPU para elementos que se animan */
.page-transition,
.modal-overlay,
.slider-slide,
.dropdown-menu {
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
}

/* ==============================================
   PRINT OPTIMIZATION
   ============================================== */

@media print {
    /* Ocultar elementos innecesarios */
    header,
    footer,
    .slider,
    .modal,
    .page-transition {
        display: none !important;
    }
    
    /* Optimizar para impresión */
    body {
        background: white;
        color: black;
        font-size: 12pt;
    }
    
    img {
        max-width: 100%;
        page-break-inside: avoid;
    }
}

/* ==============================================
   LOADING STATES
   ============================================== */

/* Loading spinner optimizado */
.loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-left-color: #c41230;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Pulse loading para botones */
.btn-loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}

.btn-loading::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    top: 50%;
    left: 50%;
    margin-left: -8px;
    margin-top: -8px;
    border: 2px solid white;
    border-radius: 50%;
    border-left-color: transparent;
    animation: spin 0.6s linear infinite;
}

/* ==============================================
   PROGRESSIVE ENHANCEMENT
   ============================================== */

/* Sin JavaScript - asegurar funcionalidad básica */
.no-js .requires-js {
    display: none;
}

.no-js .fallback-content {
    display: block;
}

/* Con JavaScript - ocultar fallbacks */
.js .fallback-content {
    display: none;
}

/* ==============================================
   ACCESSIBILITY
   ============================================== */

/* Focus visible mejorado */
*:focus-visible {
    outline: 2px solid #c41230;
    outline-offset: 2px;
}

/* Skip to main content */
.skip-to-main {
    position: absolute;
    left: -9999px;
    z-index: 999;
}

.skip-to-main:focus {
    left: 0;
    top: 0;
    background: #c41230;
    color: white;
    padding: 10px;
}