/* Core Web Vitals optimizations - Cumulative Layout Shift (CLS) prevention */

/* Reserve space for images to prevent layout shift */
.hero-showcase img,
.app-card__media img,
.gallery-line-img,
.more-card__media img {
    width: 100%;
    height: auto;
    display: block;
}

/* Aspect ratio containers for consistent layouts */
.aspect-ratio-16-9 {
    aspect-ratio: 16 / 9;
}

.aspect-ratio-1-1 {
    aspect-ratio: 1 / 1;
}

.aspect-ratio-4-3 {
    aspect-ratio: 4 / 3;
}

/* Logo containers with fixed dimensions */
.hero-logo {
    width: 120px;
    height: 120px;
    min-width: 120px;
    min-height: 120px;
}

.app-card__logo {
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
}

/* Store icons with consistent sizing */
.store-download-icon img {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
}

/* Footer social icons */
.footer-socials img,
.header-socials img {
    width: 24px;
    height: 24px;
    min-width: 24px;
    min-height: 24px;
}

/* Skeleton loaders for better perceived performance */
.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}

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

/* Prevent font loading layout shift */
.font-display-swap {
    font-display: swap;
}

/* Container queries support for responsive design */
@container (min-width: 768px) {
    .container-responsive {
        padding: 2rem;
    }
}

/* Critical CSS for above-the-fold content */
.hero-inner {
    min-height: 60vh;
    display: flex;
    align-items: center;
}

/* Optimize for Core Web Vitals */
.optimize-fcp {
    /* First Contentful Paint optimizations */
    contain: layout style paint;
}

.optimize-lcp {
    /* Largest Contentful Paint optimizations */
    content-visibility: auto;
    contain-intrinsic-size: 300px;
}

/* Intersection Observer optimizations */
.lazy-load {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.lazy-load.loaded {
    opacity: 1;
}

/* Critical resource hints */
.preload-critical {
    /* Applied to critical resources - use HTML loading attribute instead */
    will-change: auto;
}