/* ====================================================================
   COMPREHENSIVE PERFORMANCE OPTIMIZATION
   - Hardware Acceleration
   - Smooth 60fps Animations
   - Optimized for Mobile, Tablet, Desktop
   ==================================================================== */

/* ===== CRITICAL CSS RENDERING OPTIMIZATION ===== */

/* Prevent layout shifts */
* {
    box-sizing: border-box;
}

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeSpeed;
}

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

/* Use hardware acceleration only for animated elements */
.nav-link,
.mobile-nav-link,
.hamburger-toggle,
.dropdown-menu,
.modal,
.slide,
.banner-image {
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
}

/* Optimize transforms - GPU accelerated properties only */
.nav-link::after,
.link-effect,
.hamburger-line {
    will-change: transform, opacity;
    transform: translate3d(0, 0, 0);
}

/* Remove will-change after interaction */
.nav-link:not(:hover)::after,
.link-effect:not(:hover) {
    will-change: auto;
}

/* ===== SMOOTH SCROLL OPTIMIZATION ===== */
html {
    scroll-behavior: smooth;
}

/* Optimize scroll container */
.harvard-events-grid,
.mobile-menu-content,
.slideshow-container {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    contain: layout style paint;
}

/* ===== IMAGE OPTIMIZATION ===== */

/* Prevent layout shift and optimize rendering */
img {
    max-width: 100%;
    height: auto;
    display: block;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

/* Lazy load placeholder */
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: -100% 0; }
    100% { background-position: 100% 0; }
}

/* ===== OPTIMIZED TRANSITIONS - 60FPS ===== */

/* Use only transform and opacity for smooth 60fps animations */
.nav-link,
.mobile-nav-link,
.event-card,
.venture-card,
.story-card {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Faster transitions for interactive elements */
.hamburger-line {
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.dropdown-menu {
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===== CONTENT VISIBILITY FOR OFF-SCREEN SECTIONS ===== */

/* Defer rendering of off-screen content */
section {
    content-visibility: auto;
    contain-intrinsic-size: 0 600px;
}

.harvard-events-section,
.ventures-section,
.stories-section,
.about-section {
    content-visibility: auto;
    contain-intrinsic-size: 0 800px;
}

/* ===== REDUCE PAINT OPERATIONS ===== */

/* Isolate layers for complex elements */
.premium-header,
.mobile-menu,
.modal {
    isolation: isolate;
    will-change: transform;
}

/* Remove will-change when not needed */
.premium-header.scrolled {
    will-change: auto;
}

/* ===== OPTIMIZE ANIMATIONS FOR MOBILE ===== */

/* Simpler animations on mobile devices */
@media (max-width: 768px) {
    /* Faster, simpler transitions */
    * {
        transition-duration: 0.2s !important;
    }
    
    /* Disable complex hover effects */
    .nav-link::after,
    .link-effect {
        display: none;
    }
    
    /* Simplify dropdown animations */
    .dropdown-menu {
        transition: opacity 0.2s ease;
    }
    
    /* Disable parallax effects */
    * {
        background-attachment: scroll !important;
    }
}

/* ===== PERFORMANCE FOR LOW-END DEVICES ===== */

@media (max-width: 480px) {
    /* Minimal animations */
    .banner-image {
        transition: none !important;
        transform: none !important;
    }
    
    /* Disable slideshow transitions */
    .slide {
        animation: none !important;
    }
    
    /* Simplify gradients */
    .banner-vignette::before,
    .banner-vignette::after {
        display: none !important;
    }
}

/* ===== 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;
    }
    
    /* Remove all will-change properties */
    * {
        will-change: auto !important;
    }
}

/* ===== OPTIMIZE FOR 4K/HIGH-RES DISPLAYS ===== */

@media (min-width: 2560px) {
    /* Disable expensive effects on 4K */
    .banner-image {
        transition: opacity 0.5s ease !important;
        transform: scale(1) !important;
    }
    
    /* Simpler vignettes */
    .banner-vignette {
        background: radial-gradient(ellipse at center, transparent 20%, rgba(0,0,0,0.6)) !important;
    }
    
    .banner-vignette::before,
    .banner-vignette::after {
        display: none !important;
    }
    
    /* No parallax on 4K */
    * {
        background-attachment: scroll !important;
    }
}

/* ===== OPTIMIZE FONT LOADING ===== */

/* Prevent font flash */
body {
    font-display: swap;
}

/* ===== CRITICAL: PREVENT LAYOUT THRASHING ===== */

/* Fixed heights for skeleton/loading states */
.event-card,
.venture-card,
.story-card {
    min-height: 400px;
}

/* Contain layout changes */
.event-card,
.venture-card,
.story-card,
.dropdown-menu {
    contain: layout style;
}

/* ===== OPTIMIZED CAROUSEL PERFORMANCE ===== */

.harvard-events-grid {
    /* Use CSS scroll snap for smooth scrolling */
    scroll-snap-type: x mandatory;
    scroll-padding: 0 20px;
    -webkit-overflow-scrolling: touch;
}

.harvard-event-card {
    scroll-snap-align: start;
    scroll-snap-stop: normal;
}

/* Smooth carousel scrolling */
.harvard-events-grid {
    scroll-behavior: smooth;
}

/* ===== DEBOUNCED SCROLL PERFORMANCE ===== */

/* Passive event listeners hint */
body {
    touch-action: pan-y pinch-zoom;
}

.harvard-events-grid {
    touch-action: pan-x;
}

/* ===== OPTIMIZE DROPDOWN MENUS ===== */

.dropdown-menu {
    /* Faster rendering */
    transform: translateZ(0) translateY(-10px);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.has-dropdown:hover .dropdown-menu,
.dropdown-open .dropdown-menu {
    transform: translateZ(0) translateY(0);
    opacity: 1;
    pointer-events: auto;
}

/* ===== MODAL OPTIMIZATION ===== */

.modal {
    /* Prevent layout during animation */
    contain: layout style paint;
    transform: translateZ(0);
}

.modal.fade-in {
    animation: modalFadeIn 0.3s ease;
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
        transform: translateZ(0) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateZ(0) scale(1);
    }
}

/* ===== LOADING SPINNER OPTIMIZATION ===== */

.spinner {
    transform: translateZ(0);
    will-change: transform;
}

@keyframes spin {
    to { transform: translateZ(0) rotate(360deg); }
}

/* ===== PREVENT UNNECESSARY REPAINTS ===== */

/* Isolate animated elements */
.announcement-pulse,
.hamburger-toggle.active .hamburger-line {
    isolation: isolate;
}

/* ===== OPTIMIZE VIDEO PERFORMANCE ===== */

video {
    /* Hardware decode */
    transform: translateZ(0);
    will-change: auto;
}

/* ===== CRITICAL RENDERING PATH ===== */

/* Above-the-fold content priority */
.premium-header,
.banner-section {
    contain: layout style;
}

/* Below-the-fold defer rendering */
.events-section,
.ventures-section,
.stories-section,
footer {
    content-visibility: auto;
    contain-intrinsic-size: 0 800px;
}

/* ===== INTERSECTION OBSERVER OPTIMIZATION ===== */

/* Elements waiting for intersection */
.fade-in-section {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.fade-in-section.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ===== BUTTON OPTIMIZATION ===== */

button,
.btn,
.nav-link,
a {
    /* Faster tap response on mobile */
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

/* ===== PREVENT FLASH OF UNSTYLED CONTENT ===== */

.no-js .slideshow-container {
    display: block !important;
}

.no-js .slide:first-child {
    display: block !important;
}

/* ===== PERFORMANCE MONITORING ===== */

/* Add to debug performance issues */
.perf-debug * {
    outline: 1px solid red;
}

.perf-debug *:hover {
    outline: 2px solid blue;
}