/* ===================================
   PERFORMANCE OPTIMIZATIONS
   ================================== */

/* GPU Acceleration for animated elements */
.hero-brand,
.spline-container,
.logo-container,
.hero-desktop-nav,
.nav-pill-lamp,
.bento-card,
.phone-mockup-image-header,
.phone-mockup-image-mobile,
.feature-card-animated,
.social-link,
.calculator-gradient-background {
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
}

/* Optimize calculator gradient animation */
.calculator-gradient-background {
    will-change: background-position;
    contain: strict;
}

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

/* 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;
        scroll-behavior: auto !important;
    }
    
    .hero-brand,
    .logo-container,
    .hero-desktop-nav,
    .nav-pill-lamp {
        animation: none !important;
        transition: none !important;
    }
}

/* Optimize scrolling performance */
* {
    -webkit-overflow-scrolling: touch;
}

/* Contain layout shifts */
.spline-container {
    contain: layout style paint;
}

.bento-card {
    contain: layout paint;
}

/* Optimize font rendering */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Optimize backdrop-filter performance */
.nav-pill,
.tubelight-container,
.social-link {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    will-change: transform;
}

/* Remove will-change after animations complete */
.hero-brand.loaded,
.logo-container.loaded,
.hero-desktop-nav.loaded {
    will-change: auto;
}

/* Optimize hover states for touch devices */
@media (hover: none) and (pointer: coarse) {
    .bento-card:hover,
    .feature-card-animated:hover,
    .social-link:hover {
        transform: none;
    }
}

/* Content visibility for off-screen elements */
.section:not(.section-visible) {
    content-visibility: auto;
    contain-intrinsic-size: 0 500px;
}

/* Optimize animations on low-end devices */
@media (prefers-reduced-motion: no-preference) and (max-width: 768px) {
    .bento-card,
    .feature-card-animated {
        animation-duration: 0.4s;
        transition-duration: 0.3s;
    }
}

/* Optimize parallax elements */
.parallax-slow,
.parallax-medium,
.parallax-fast,
.fear-geometric-shape,
.stats-shape,
.how-shape {
    will-change: transform;
    transform: translateZ(0);
}

/* Remove will-change when not needed */
.parallax-slow:not(:hover),
.parallax-medium:not(:hover),
.parallax-fast:not(:hover) {
    will-change: auto;
}

/* Optimize Locomotive Scroll container */
[data-scroll-container] {
    will-change: transform;
}

/* Optimize scroll sections */
[data-scroll-section] {
    will-change: transform;
}

/* Critical rendering path optimization */
.hero {
    contain: layout style;
}

/* Optimize glassmorphism effects */
.nav-pill,
.tubelight-container {
    isolation: isolate;
}

/* Optimize box-shadows for performance */
.bento-card,
.feature-card-animated,
.social-link {
    filter: drop-shadow(0 4px 20px rgba(0, 0, 0, 0.1));
}

.bento-card:hover,
.feature-card-animated:hover {
    filter: drop-shadow(0 8px 30px rgba(0, 0, 0, 0.15));
}

/* Optimize transform animations */
@keyframes optimizedFadeIn {
    from {
        opacity: 0;
        transform: translate3d(0, 20px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

/* Lazy load optimization */
img[loading="lazy"] {
    opacity: 0;
    transition: opacity 0.3s ease-in;
}

img[loading="lazy"].loaded {
    opacity: 1;
}

/* Optimize Spline viewer */
spline-viewer {
    contain: strict;
    content-visibility: auto;
}

/* Performance hints for browsers */
.hero-brand,
.brand-title {
    font-display: swap;
}

/* Optimize CSS containment */
.footer,
.section {
    contain: layout paint;
}

/* Reduce repaints on scroll */
.fixed-element {
    position: fixed;
    will-change: transform;
    transform: translateZ(0);
}

/* Optimize gradient animations */
@keyframes optimizedGradient {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

/* Mobile-specific optimizations */
@media (max-width: 768px) {
    /* Disable expensive effects on mobile */
    .bento-card,
    .feature-card-animated {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    
    /* Simplify shadows on mobile */
    .bento-card,
    .feature-card-animated,
    .social-link {
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }
    
    /* Disable parallax on mobile */
    .parallax-slow,
    .parallax-medium,
    .parallax-fast {
        transform: none !important;
        will-change: auto;
    }
    
    /* Optimize Locomotive Scroll on mobile */
    [data-scroll-container] {
        will-change: auto;
    }
    
    [data-scroll-section] {
        will-change: auto;
    }
}

/* High DPI screen optimizations */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    img {
        image-rendering: -webkit-optimize-contrast;
    }
}

/* Optimize for Safari */
@supports (-webkit-appearance: none) {
    .nav-pill,
    .tubelight-container {
        -webkit-backdrop-filter: blur(20px);
    }
}

/* Optimize for Firefox */
@-moz-document url-prefix() {
    .nav-pill,
    .tubelight-container {
        background: rgba(255, 255, 255, 0.1);
    }
}

/* Print optimization */
@media print {
    .spline-container,
    .hero-desktop-nav,
    .tubelight-nav,
    .social-links {
        display: none !important;
    }
    
    * {
        background: white !important;
        color: black !important;
    }
}