/**
 * Core Web Vitals Optimizations for Café Grano
 * Improves LCP, FID, and CLS metrics
 */

/* ========================================
   Prevent Layout Shift (CLS)
   ======================================== */

/* Reserve space for images to prevent layout shift */
img {
    height: auto;
    max-width: 100%;
}

/* Hero image dimensions */
#hero {
    min-height: 100vh;
}

/* Logo dimensions */
.logo img {
    width: auto;
    height: 40px;
}

/* About section images */
.about-img img {
    aspect-ratio: 4/3;
    object-fit: cover;
}

/* Reserve space for fonts */
@font-face {
    font-family: 'Snell Roundhand';
    src: url('../fonts/SNELLB.woff2') format('woff2'),
         url('../fonts/SnellRoundhand.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap; /* Prevent FOIT */
}

/* ========================================
   Optimize First Input Delay (FID)
   ======================================== */

/* Use CSS containment for better performance */
.section {
    contain: layout style;
}

/* Optimize animations */
[data-aos] {
    will-change: auto;
}

/* Reduce paint areas */
.box,
.privacy-content,
.cgv-content {
    contain: layout;
    transform: translateZ(0); /* Force GPU acceleration */
}

/* ========================================
   Largest Contentful Paint (LCP)
   ======================================== */

/* Preload critical fonts */
.logo,
#hero h1 span {
    font-family: "Snell Roundhand", cursive;
    font-display: swap;
}

/* Optimize hero background */
#hero {
    background-image: url("../img/hero-bg.jpg");
    background-attachment: scroll; /* Better than fixed for performance */
}

@media (min-width: 1024px) {
    #hero {
        background-attachment: fixed;
    }
}

/* Critical CSS for above-the-fold content */
#topbar,
#header {
    contain: layout style paint;
}

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

/* Reduce repaints during scroll */
.is-scrolling * {
    pointer-events: none;
}

.is-scrolling .back-to-top {
    opacity: 0;
}

/* Optimize hover effects */
a,
button {
    transition: color 0.3s ease, background-color 0.3s ease;
    transition-delay: 0s;
}

@media (hover: hover) {
    a:hover,
    button:hover {
        transition-delay: 0.1s;
    }
}

/* Reduce animation complexity on mobile */
@media (max-width: 768px) {
    [data-aos] {
        transition-duration: 0.3s !important;
    }
    
    .animated {
        animation-duration: 0.5s !important;
    }
}

/* ========================================
   Image Loading States
   ======================================== */

/* Placeholder for lazy-loaded images */
img[data-src] {
    background: #1a1814;
    filter: blur(5px);
    transition: filter 0.3s;
}

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

/* Loading skeleton for content */
.skeleton {
    background: linear-gradient(90deg, #1a1814 25%, #2a2824 50%, #1a1814 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}

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

/* ========================================
   Form Optimizations
   ======================================== */

/* Prevent layout shift on form validation */
.form-group {
    min-height: 70px;
}

.error-feedback {
    position: absolute;
    font-size: 0.875em;
}

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

@media (max-width: 768px) {
    /* Disable complex effects on mobile */
    .parallax {
        background-attachment: scroll !important;
    }
    
    /* Simplify shadows */
    .box-shadow {
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    
    /* Reduce border radius calculations */
    .rounded {
        border-radius: 4px;
    }
}

/* ========================================
   Print Optimizations
   ======================================== */

@media print {
    /* Hide non-essential elements */
    #topbar,
    .back-to-top,
    .mobile-nav-toggle,
    .social-links,
    video,
    iframe {
        display: none !important;
    }
    
    /* Optimize for print */
    * {
        background: transparent !important;
        color: #000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }
    
    a[href]:after {
        content: " (" attr(href) ")";
    }
}

/* ========================================
   Accessibility Performance
   ======================================== */

/* Reduce motion for users who prefer it */
@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;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .btn,
    .book-a-table-btn {
        border-width: 2px;
    }
}

/* ========================================
   Critical Inline Styles
   ======================================== */

/* These should be inlined in <head> for best performance */
.critical-fonts {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.critical-colors {
    background-color: #0c0b09;
    color: #fff;
}

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

/* DNS prefetch for external resources */
.dns-prefetch {
    content: "https://fonts.googleapis.com https://fonts.gstatic.com https://cdnjs.cloudflare.com";
}

/* Preconnect for critical resources */
.preconnect {
    content: "https://fonts.googleapis.com https://fonts.gstatic.com";
}

/* ========================================
   Layout Stability
   ======================================== */

/* Fixed dimensions for common elements */
.navbar {
    min-height: 50px;
}

.section-title {
    min-height: 100px;
}

.footer-info {
    min-height: 200px;
}

/* Aspect ratios for media */
.video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
    overflow: hidden;
}

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