/**
 * EZEMind - Mobile & Style Cleanup
 * Performance optimizations for mobile devices
 */

/* Hide x-cloak elements until Alpine loads */
[x-cloak] { display: none !important; }

/* ============================================
   MOBILE PERFORMANCE OPTIMIZATIONS
   Disable heavy effects on mobile devices
   ============================================ */
@media (max-width: 768px) {
    /* Disable expensive blur effects on mobile */
    .blur-3xl,
    .blur-\[150px\],
    .blur-\[120px\],
    .blur-\[100px\] {
        display: none !important;
    }
    
    /* Reduce backdrop blur intensity */
    .backdrop-blur-xl,
    .backdrop-blur-lg,
    .backdrop-blur-md {
        backdrop-filter: blur(8px) !important;
        -webkit-backdrop-filter: blur(8px) !important;
    }
    
    /* Disable floating animations on mobile */
    .animate-float,
    .animate-float-slow,
    .animate-float-delayed,
    .animate-pulse-slow,
    [class*="animate-float"] {
        animation: none !important;
    }
    
    /* Simplify transforms */
    .hover\:scale-105:hover,
    .hover\:scale-110:hover,
    .group-hover\:scale-110 {
        transform: none !important;
    }
    
    /* Reduce shadow complexity */
    [class*="shadow-2xl"],
    [class*="shadow-xl"] {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    }
    
    /* Disable parallax-like effects */
    .parallax,
    [data-parallax] {
        transform: none !important;
    }
    
    /* Pause videos when not in viewport (handled by JS) */
    video {
        will-change: auto !important;
    }
    
    /* Optimize grid backgrounds */
    [style*="radial-gradient"][style*="background-size: 40px"] {
        background-image: none !important;
    }
}

/* ============================================
   GRADIENT REDUCTION - Use solid colors
   ============================================ */

/* Replace gradient backgrounds with solid teal */
.bg-gradient-to-r.from-teal-500,
.bg-gradient-to-r.from-teal-400,
.bg-gradient-to-br.from-teal-500,
.bg-gradient-to-br.from-teal-400 {
    background: #14b8a6 !important;
}

/* Replace gradient text with solid teal */
.bg-gradient-to-r.from-teal-400.bg-clip-text,
.bg-gradient-to-r.from-teal-500.bg-clip-text,
.bg-gradient-to-r.from-cyan-400.bg-clip-text {
    background: #14b8a6 !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
}

/* Simplify dark section backgrounds */
.bg-gradient-to-b.from-slate-900,
.bg-gradient-to-br.from-slate-900,
.bg-gradient-to-b.from-\[\#0f172a\] {
    background: #0f172a !important;
}

/* Simplify light section backgrounds */
.bg-gradient-to-br.from-slate-50,
.bg-gradient-to-b.from-slate-50 {
    background: #f8fafc !important;
}

/* Card backgrounds - solid with subtle border instead of gradient */
.bg-gradient-to-br.from-slate-800\/80 {
    background: rgba(30, 41, 59, 0.9) !important;
}

/* Icon backgrounds - solid teal */
.bg-gradient-to-br.from-teal-500.to-cyan-500 {
    background: #14b8a6 !important;
}

/* Stats cards - subtle solid colors */
.bg-gradient-to-br.from-teal-500\/20,
.bg-gradient-to-br.from-cyan-500\/20 {
    background: rgba(20, 184, 166, 0.15) !important;
}

/* Remove decorative gradient blurs on larger screens too */
.blur-3xl,
.blur-\[150px\],
.blur-\[120px\] {
    opacity: 0.3 !important;
}

/* ============================================
   MOBILE HEADER
   ============================================ */
@media (max-width: 767px) {
    .site-header img {
        height: 28px !important;
    }
}

/* ============================================
   BUTTON STYLES - Solid colors
   ============================================ */
.btn-primary,
a.bg-gradient-to-r.from-teal-500 {
    background: #14b8a6 !important;
    color: white !important;
}

.btn-primary:hover,
a.bg-gradient-to-r.from-teal-500:hover {
    background: #0d9488 !important;
}

/* CTA sections - solid teal background */
.bg-gradient-to-r.from-teal-600,
.bg-gradient-to-br.from-teal-600 {
    background: #0d9488 !important;
}

/* ============================================
   MOBILE TYPOGRAPHY
   ============================================ */
@media (max-width: 767px) {
    h1 {
        font-size: 1.75rem !important;
        line-height: 1.2 !important;
    }
    
    h2 {
        font-size: 1.5rem !important;
    }
    
    section {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }
}

/* ============================================
   CLEANER SHADOWS
   ============================================ */
.shadow-teal-500\/30,
.shadow-cyan-500\/30,
.shadow-teal-500\/20 {
    box-shadow: 0 4px 14px rgba(20, 184, 166, 0.2) !important;
}

/* ============================================
   REDUCE ANIMATION INTENSITY  
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============================================
   GPU ACCELERATION HINTS
   ============================================ */
.site-header,
[x-show],
.mobile-menu {
    transform: translateZ(0);
    backface-visibility: hidden;
}