/**
 * IYA Medical - Performance Optimizations
 * Contains critical CSS for faster LCP and reduced CLS
 */

/* ===== CRITICAL FONT DISPLAY ===== */
@font-face {
    font-display: swap;
}

/* ===== IMAGE OPTIMIZATIONS ===== */
img {
    content-visibility: auto;
}

img[loading="lazy"] {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

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

/* ===== REDUCE CLS (Cumulative Layout Shift) ===== */
/* Reserve space for common image ratios */
.img-fluid {
    aspect-ratio: auto;
}

.doctor-card img,
.meta__avatar {
    aspect-ratio: 1;
    object-fit: cover;
}

.owl-carousel .owl-item img {
    aspect-ratio: 16/9;
    object-fit: cover;
}

/* ===== REDUCE PAINT AND LAYOUT WORK ===== */
.decoration,
.hero-glow,
.hero-glow-1,
.hero-glow-2,
.hero-glow-3,
.floating-blob {
    will-change: transform;
    contain: layout paint;
}

/* ===== OPTIMIZE ANIMATIONS ===== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ===== CONTAIN FOR BETTER PERFORMANCE ===== */
section {
    contain: layout style;
}

.navbar .dropdown-menu {
    contain: layout;
}

/* ===== GPU ACCELERATION FOR SMOOTH SCROLLING ===== */
.owl-carousel,
.owl-stage-outer {
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* ===== FONT SUBSETTING OPTIMIZATION ===== */
/* Only load needed character ranges */
.section-title,
.f-roboto-extrabold,
h1, h2, h3 {
    text-rendering: optimizeSpeed;
}

/* ===== DEFER NON-CRITICAL RENDERING ===== */
.decoration svg,
.dots-icon,
.blob-1,
.ball-2-blur,
.ball-3-blur {
    content-visibility: auto;
    contain-intrinsic-size: 200px 200px;
}

/* ===== OPTIMIZE HOVER STATES ===== */
.btn,
.nav-link,
.dropdown-item,
a {
    will-change: auto;
}

.btn:hover,
.nav-link:hover,
.dropdown-item:hover {
    will-change: background-color, color, transform;
}

/* ===== REDUCE REPAINTS ON SCROLL ===== */
.header-sticky {
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* ===== CAROUSEL - NO VISIBILITY HIDING ===== */
/* Removed owl-item visibility hiding - was causing blank sections on mobile */

/* ===== LAZY LOAD BELOW THE FOLD ===== */
.conditions-wrapper,
.testimonial-section,
.doctor-list,
.locations-section,
.main-footer {
    content-visibility: auto;
    contain-intrinsic-size: auto 500px;
}