/* ==============================================
   PERFORMANCE OPTIMIZATIONS
   CSS optimizations for better rendering performance
   ============================================== */

/* Reduce repaints and reflows */
* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* GPU Acceleration for animations */
.footer-portrait-img,
.project-card,
.skill-card,
.contact-card,
.hero-content,
[class*="animate"],
[data-scroll] {
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
}

/* Optimize images */
img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

/* Reduce motion for accessibility and performance */
@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;
    }
}

/* Low bandwidth mode */
.low-bandwidth * {
    animation-duration: 0.1s !important;
    transition-duration: 0.1s !important;
}

/* Mobile animations reduction */
.reduced-animations * {
    animation-duration: 0.3s !important;
    transition-duration: 0.2s !important;
}

/* Contain layout for better performance */
.project-card,
.skill-card,
.contact-card {
    contain: layout style paint;
}

/* Optimize scroll performance */
body {
    scroll-behavior: smooth;
}

/* Prevent layout shift */
img,
video,
iframe {
    max-width: 100%;
    height: auto;
}

/* Font loading optimization - fonts should use font-display: swap in their @font-face declarations */

/* Lazy load images - only fade in when explicitly using data-src */
img[data-src] {
    opacity: 0;
    transition: opacity 0.3s;
}

img[data-src].loaded {
    opacity: 1;
}

/* Optimize compositing layers */
.footer-marquee,
.carousel-track,
#footerMarqueeTrack {
    will-change: transform;
    transform: translateZ(0);
}

/* Reduce paint areas */
.footer-container::before,
.hero::before {
    will-change: opacity;
}

/* Optimize text rendering */
body {
    text-rendering: optimizeSpeed;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    text-rendering: optimizeLegibility;
}

/* Critical CSS - Above the fold content */
.hero,
.navbar,
.loader {
    contain: layout;
}