/* Performance Optimizations - Mobile & Core Web Vitals */

/* Reduce blur intensity on mobile for better performance */
@media (max-width: 768px) {
    /* Reduce blur from blur-3xl (64px) to blur-xl (24px) on mobile - 62% reduction */
    .blur-3xl {
        filter: blur(24px) !important;
        -webkit-filter: blur(24px) !important;
    }
    
    /* Reduce backdrop blur intensity on mobile - from 24px to 8px */
    .backdrop-blur-xl {
        backdrop-filter: blur(8px) !important;
        -webkit-backdrop-filter: blur(8px) !important;
    }
    
    /* Reduce backdrop blur-md on mobile */
    .backdrop-blur-md {
        backdrop-filter: blur(4px) !important;
        -webkit-backdrop-filter: blur(4px) !important;
    }
    
    /* Reduce backdrop blur-sm on mobile */
    .backdrop-blur-sm {
        backdrop-filter: blur(2px) !important;
        -webkit-backdrop-filter: blur(2px) !important;
    }
    
    /* Reduce animation delays on mobile for faster perceived performance */
    .delay-1000 {
        animation-delay: 0.3s !important;
    }
    
    .delay-2000 {
        animation-delay: 0.6s !important;
    }
    
    /* Reduce pulse animation duration on mobile */
    .animate-pulse {
        animation-duration: 2s !important;
    }
}

/* Optimize animations for reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .animate-pulse,
    .animate-bounce,
    .animate-spin {
        animation: none !important;
    }
}

/* Disable heavy animations on low-end devices */
@media (max-width: 768px) and (max-resolution: 1.5dppx) {
    .animate-pulse {
        animation-duration: 3s !important;
    }
    
    .blur-3xl {
        filter: blur(16px) !important;
        -webkit-filter: blur(16px) !important;
    }
}

/* Optimize background gradients on mobile */
@media (max-width: 768px) {
    /* Simplify gradients on mobile */
    .bg-gradient-to-br {
        background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
    }
}

/* Reduce shadow complexity on mobile */
@media (max-width: 768px) {
    .shadow-xl {
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    }
    
    .shadow-2xl {
        box-shadow: 0 15px 20px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    }
}

/* Optimize transform operations */
@media (max-width: 768px) {
    /* Reduce transform complexity */
    .group-hover\:scale-110 {
        transform: scale(1.05);
    }
    
    .group-hover\:rotate-3 {
        transform: rotate(1deg);
    }
}

/* Content Visibility API for off-screen elements */
@media (max-width: 768px) {
    /* Optimize off-screen animated backgrounds */
    .absolute.inset-0.overflow-hidden.pointer-events-none {
        content-visibility: auto;
        contain-intrinsic-size: 1px 100px;
    }
}

/* Reduce repaints/reflows */
.will-change-transform {
    will-change: transform;
}

.will-change-opacity {
    will-change: opacity;
}

/* Optimize font loading */
@font-face {
    font-family: 'Manrope';
    font-display: swap;
}

/* Critical CSS: Above-the-fold optimizations */
@media (max-width: 768px) {
    /* Reduce initial paint complexity */
    body {
        contain: layout style paint;
    }
    
    /* Optimize animated background elements - reduce size on mobile */
    .absolute.inset-0.overflow-hidden.pointer-events-none > div {
        transform: scale(0.8);
    }
    
    /* Reduce gradient complexity on mobile */
    .bg-gradient-to-br {
        background-size: 100% 100%;
    }
}

/* LCP Optimization - Prioritize critical content */
img, video {
    content-visibility: auto;
}

/* CLS Prevention - Reserve space for dynamic content */
[id*="-amount"],
[id*="-result"],
[id*="-total"],
[id*="-maturity"] {
    min-height: 1.5em;
}

/* FID Optimization - Reduce JavaScript execution time */
button, a {
    touch-action: manipulation;
}

/* Optimize font loading with font-display swap */
@font-face {
    font-family: 'Manrope';
    font-display: swap;
}

/* Reduce layout shifts */
.relative {
    position: relative;
}

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

/* Reduce paint complexity on mobile */
@media (max-width: 768px) {
    /* Simplify shadows */
    .shadow-lg {
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    }
    
    /* Reduce transform complexity */
    .transform {
        will-change: transform;
    }
}

/* Additional Core Web Vitals Optimizations */

/* LCP: Optimize Largest Contentful Paint */
/* Ensure critical content loads first */
h1, .text-primary {
    font-display: swap;
}

/* CLS: Prevent Cumulative Layout Shift */
/* Reserve space for dynamic calculator results */
[id*="-amount"],
[id*="-result"],
[id*="-total"],
[id*="-maturity"],
[id*="-value"],
[id*="-display"] {
    min-height: 1.2em;
    display: block;
    width: 100%;
}

/* FID: Optimize First Input Delay */
/* Reduce JavaScript blocking */
button, a, input, select {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* Optimize image loading */
img {
    loading: lazy;
    decoding: async;
}

/* Reduce JavaScript parse time */
/* Use defer for non-critical scripts */
script[src] {
    defer: true;
}

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

@media (min-width: 769px) {
    body {
        text-rendering: optimizeLegibility;
    }
}

/* Reduce paint operations */
@media (max-width: 768px) {
    /* Use simpler compositing */
    .backdrop-blur-xl,
    .backdrop-blur-md,
    .backdrop-blur-sm {
        isolation: isolate;
    }
}

/* Optimize scroll performance */
@media (max-width: 768px) {
    html {
        scroll-behavior: auto;
    }
}

/* Reduce memory usage on mobile */
@media (max-width: 768px) {
    /* Limit GPU layers */
    .transform,
    .scale,
    .rotate {
        transform: translateZ(0);
        backface-visibility: hidden;
        perspective: 1000px;
    }
}

/* Result display cards - keep centered (Total amount, etc.) */
/* These should remain centered as they are result displays */
.bg-gradient-to-br.from-primary\/10 p.text-primary.text-4xl,
.bg-gradient-to-br.from-primary\/10 p.text-primary.text-5xl,
[id*="-amount"].text-center,
[id*="-result"].text-center,
[id*="-total"].text-center,
[id*="-maturity"].text-center {
    text-align: center !important;
}

/* Result card labels - keep centered */
.bg-gradient-to-br.from-primary\/10 p.text-primary.text-sm,
.bg-gradient-to-br.from-primary\/10 p.text-primary.text-xs {
    text-align: center !important;
}