/* ============================================
 * PERFORMANCE OPTIMIZATIONS
 * Core Web Vitals Improvements
 * ============================================ */

/* Prevent layout shift - reserve space for images */
img {
    aspect-ratio: attr(width) / attr(height);
}

/* Smooth scrolling for better UX */
html {
    scroll-behavior: smooth;
}

/* Reduce layout shifts with explicit dimensions */
.product-card-img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.banner-img {
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.category-card-img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* Prevent cumulative layout shift (CLS) */
.hero-section {
    min-height: 60vh;
}

/* Improve Largest Contentful Paint (LCP) */
.hero-image {
    content-visibility: auto;
    contain-intrinsic-size: 1000px;
}

/* Reduce First Input Delay (FID) - defer non-critical interactions */
.non-critical {
    contain: content;
}

/* Optimize font rendering */
body {
    text-rendering: optimizeSpeed;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Prevent CLS from dynamic content */
.placeholder {
    background-color: #f3f4f6;
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Skeleton loading for images */
.skeleton {
    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 optimization for animated elements */
.reveal-item {
    will-change: opacity, transform;
}

/* Contain paint for better performance */
.card {
    contain: layout style paint;
}

/* GPU acceleration for smooth animations */
.transform-active {
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Optimize images with proper display */
img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* Preload critical font - handled in header.php with font-display: swap */