/**
 * Performance Optimizations CSS
 * Critical rendering and layout stability fixes
 */

/* ==========================================
   CONTENT VISIBILITY - IMPROVE RENDERING
   ========================================== */

/* Apply content-visibility to off-screen sections for faster rendering */
.sunHacks,
.sandipotsav,
.clubsSection,
.illinoisTech {
    content-visibility: auto;
    contain-intrinsic-size: 0 800px;
}

/* ==========================================
   LAYOUT STABILITY - PREVENT CLS
   ========================================== */

/* Preloader image dimensions */
.preloader img {
    width: 190px;
    height: 190px;
}

/* Hero images - prevent layout shift */
.heroImageFest {
    aspect-ratio: 16/9;
}

/* ==========================================
   FONT DISPLAY - PREVENT FOIT/FOUT
   Note: Add font-display: swap to your @font-face declarations
   ========================================== */

/* ==========================================
   REDUCE MOTION FOR ACCESSIBILITY
   ========================================== */

@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;
    }
    
    .marquee__inner,
    .marquee__inner_reverse {
        animation: none !important;
    }
}

/* ==========================================
   GPU ACCELERATION FOR ANIMATIONS
   ========================================== */

/* Use transform for animations instead of top/left */
.mobMenuOuter,
.blurScreen,
.modal-backdrop,
.development-notice {
    will-change: transform, opacity;
}

/* Optimize Swiper */
.swiper-wrapper {
    will-change: transform;
}

/* ==========================================
   OPTIMIZE SCROLLING
   ========================================== */

/* Smooth scrolling for containers */
.sidebar-list,
.content-area {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

/* ==========================================
   FOCUS STATES FOR ACCESSIBILITY
   ========================================== */

/* Visible focus indicators */
a:focus-visible,
button:focus-visible,
.category-btn:focus-visible,
.sidebar-item:focus-visible {
    outline: 2px solid #4159d0;
    outline-offset: 2px;
}

/* Skip to content link */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: #000;
    color: #fff;
    padding: 8px 16px;
    z-index: 10000;
    transition: top 0.3s;
}

.skip-link:focus {
    top: 0;
}

/* ==========================================
   PRINT STYLES
   ========================================== */

@media print {
    /* Hide non-essential elements */
    header,
    footer,
    .hamburger,
    .mobMenuOuter,
    #preloader,
    .development-notice,
    .blurScreen,
    .modal-backdrop {
        display: none !important;
    }
    
    /* Ensure content is visible */
    body {
        background: white !important;
        color: black !important;
    }
    
    /* Break pages appropriately */
    section {
        page-break-inside: avoid;
    }
    
    /* Show URLs for links */
    a[href]:after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
    }
}

/* ==========================================
   LOADING STATES
   ========================================== */

/* Skeleton loading for images - only apply background, don't affect dimensions */
img[loading="lazy"]:not([src]) {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
}

/* ==========================================
   OPTIMIZE HOVER STATES
   ========================================== */

/* Only apply hover on devices that support it */
@media (hover: hover) {
    .category-btn:hover,
    .sidebar-item:hover,
    .gradientButton:hover button,
    .megaLink:hover {
        transition: all 0.3s ease-out;
    }
}

/* ==========================================
   Z-INDEX MANAGEMENT
   ========================================== */

:root {
    --z-preloader: 999999;
    --z-modal: 99999;
    --z-header: 1000;
    --z-blur-screen: 999;
    --z-notice: 9999;
}

#preloader { z-index: var(--z-preloader); }
.modal-backdrop { z-index: var(--z-modal); }
header { z-index: var(--z-header); }
.blurScreen { z-index: var(--z-blur-screen); }
.development-notice { z-index: var(--z-notice); }