/* Performance Optimizations for LuxuryHyva Theme */

/* Prefetch domains for faster loading */
@layer base {
    body {
        /* Prefetch critical resources */
        --prefetch-cdn: 'https://cdn.lightwidget.com';
    }
}

/* Optimize font loading */
@layer base {
    @font-face {
        font-family: 'Custom Font';
        font-display: swap;
    }
}

/* Improve render performance */
@layer base {
    * {
        will-change: transform;
        transform: translateZ(0);
        backface-visibility: hidden;
    }
    
    img, picture, video, canvas, svg {
        display: block;
        max-width: 100%;
        height: auto;
    }
}

/* Optimize animations */
@layer utilities {
    .exm-reveal {
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    }
    
    .exm-reveal.revealed {
        opacity: 1;
        transform: translateY(0);
    }
    
    .exm-reveal.skip-reveal {
        opacity: 1;
        transform: none;
    }
}

/* Reduce reflows during image loading */
@layer base {
    .exm-product-img {
        background-color: #f5f5f5;
        min-height: 300px;
    }
    
    .exm-showcase__banner {
        background-color: #f5f5f5;
        min-height: 400px;
    }
}

/* Optimize for mobile */
@media (max-width: 768px) {
    @layer base {
        .exm-hero-slider {
            height: 60vh;
            min-height: 420px;
        }
    }
}

/* Content-visibility for off-screen sections */
@layer utilities {
    .exm-section {
        content-visibility: auto;
        contain-intrinsic-size: 1000px;
    }
}

/* Optimize iframes loading */
@layer components {
    iframe {
        loading: lazy;
    }
}

/* Reduce paint for hidden elements */
@layer utilities {
    [hidden] {
        display: none !important;
    }
}