/* ============================================
   PERFORMANCE OPTIMIZATIONS
   GPU acceleration, containment, and smooth animations
============================================ */

/* GPU acceleration for frequently animated elements */
.fade-up,
.s-step,
.team-card,
.stat-card,
.menu-link,
.nav-links a,
.cta-button,
.btn-pill,
.btn-pill-white,
.supporter-logo,
.callout-content,
.callout-decoration-left,
.callout-decoration-right {
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Contain layout for sections to isolate repaints */
.hero,
.supported,
.platform-section,
.people-section,
.timeline-section,
.callout-section,
.stats-section,
.statement-section,
footer {
    contain: layout style;
}

/* Contain paint for cards and interactive elements */
.team-card,
.stat-card,
.s-step,
.menu-link {
    contain: layout style paint;
}

/* Optimize will-change - only apply when animating */
.fade-up:not(.visible) {
    will-change: transform, opacity;
}

.fade-up.visible {
    will-change: auto;
}

/* Optimized transitions - avoid 'all', specify properties */
.team-card {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.4s ease,
                border-color 0.4s ease;
}

.stat-card {
    transition: transform 0.4s ease;
}

.menu-link {
    transition: opacity 0.2s ease;
}

.nav-links a {
    transition: color 0.2s ease;
}

.cta-button,
.btn-pill,
.btn-pill-white {
    transition: transform 0.3s ease,
                background-color 0.3s ease,
                border-color 0.3s ease,
                box-shadow 0.3s ease;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .fade-up {
        opacity: 1;
        transform: none;
    }
}

/* Mobile performance optimizations */
@media (max-width: 768px) {
    /* Disable complex effects on mobile */
    .callout-orb {
        display: none;
    }

    /* Simpler backdrop blur on mobile */
    nav {
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }

    /* Reduce animation complexity */
    .fade-up {
        transition-duration: 0.4s;
    }

    /* Disable grain canvas on mobile for performance */
    .grain-canvas {
        display: none;
    }

    /* Simpler shadows */
    .team-card:hover,
    .stat-card:hover {
        box-shadow: none;
    }
}

/* Optimize images and videos for smooth scrolling */
.hero-video,
.inverted-video {
    will-change: auto;
    transform: translateZ(0);
}

/* Optimize canvas elements */
canvas {
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

/* Optimize SVG animations */
.s-path-svg {
    shape-rendering: geometricPrecision;
}

.s-path-line {
    will-change: stroke-dashoffset;
}

/* Optimize the supporters marquee */
.supporters-track {
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Reduce paint area for fixed elements */
nav {
    contain: layout style;
    transform: translateZ(0);
}

.fullscreen-menu {
    contain: layout style paint;
    /* Note: Don't override transform here - nav.css uses translateY/translateX to hide the menu */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* GPU acceleration only when menu is open - mobile (slides down) */
.fullscreen-menu.open {
    transform: translateY(0) translateZ(0);
}

/* Desktop override (slides from right) */
@media (min-width: 769px) {
    .fullscreen-menu.open {
        transform: translateX(0) translateZ(0);
    }
}

/* Optimize hover states - use transform instead of position changes */
.team-card:hover {
    transform: translateY(-4px) translateZ(0);
}

.stat-card:hover {
    transform: translateY(-4px) translateZ(0);
}

/* Hardware acceleration for video frame */
.hero-video-frame {
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* ============================================
   IMAGE LOADING OPTIMIZATIONS
   Smooth fade-in transitions for images
============================================ */

/* Base styles for lazy-loaded images */
img[data-lazy],
img.lazy-image {
    opacity: 0;
    transition: opacity 0.4s ease-out;
}

img[data-lazy].loaded,
img.lazy-image.loaded {
    opacity: 1;
}

/* Header/hero images - preloaded, no fade needed */
.hero-earth-image,
.hero-needle-image,
.indication-image,
.logic-dna-image,
.applications-lung-image,
.leader-image,
.advisor-image,
.card-image,
.decision-dna-image {
    opacity: 1;
    transition: opacity 0.3s ease-out;
}

/* Below-fold images start hidden and fade in */
.lazy-fade {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.lazy-fade.loaded {
    opacity: 1;
    transform: translateY(0);
}

/* Image wrapper loading state */
.image-loading-wrapper {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%);
}

.image-loading-wrapper::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255,255,255,0.1) 50%,
        transparent 100%
    );
    transform: translateX(-100%);
    animation: imageShimmer 1.5s infinite;
}

.image-loading-wrapper.loaded::before {
    display: none;
}

@keyframes imageShimmer {
    100% {
        transform: translateX(100%);
    }
}

/* Prevent layout shift - aspect ratio containers */
.aspect-ratio-16-9 {
    aspect-ratio: 16 / 9;
}

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

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

/* Image cover fit */
.image-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Optimize orbs - explosion has its own transform in sections.css */
.callout-orb,
.timeline-orb {
    transform: translateZ(0);
    backface-visibility: hidden;
}

.supported-explosion {
    /* Don't override transform - sections.css uses translate(-50%, -50%) scale() */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}