/* ========================================
   PERFORMANCE OPTIMIZATIONS FOR MOBILE ONLY
   Desktop maintains full performance - NO changes
   ======================================== */

/* ===== ALL OPTIMIZATIONS APPLY ONLY ON MOBILE (768px and below) ===== */
@media (max-width: 768px) {

    /* 1. OPTIMIZE BACKDROP FILTERS - Reduce blur intensity */
    .header {
        will-change: background-color, backdrop-filter;
        transform: translate3d(0, 0, 0);
    }

    .hero-card {
        will-change: transform;
        backdrop-filter: blur(15px) !important;
        -webkit-backdrop-filter: blur(15px) !important;
    }

    .btn-secondary {
        backdrop-filter: blur(8px) !important;
    }

    /* 2. OPTIMIZE FLOATING SHAPES - Reduce blur and complexity */
    .floating-shapes {
        transform: translate3d(0, 0, 0);
        will-change: transform;
    }

    .shape {
        filter: blur(20px) !important;
        opacity: 0.08 !important;
        transform: translate3d(0, 0, 0);
        will-change: transform;
        animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Pause animations when not in viewport to save battery */
    .hero:not(.in-viewport) .shape {
        animation-play-state: paused;
    }

    /* 3. OPTIMIZE CONTINUOUS ANIMATIONS - Slower frequency */
    .hero-glow {
        animation-duration: 15s !important;
        will-change: transform, opacity;
        transform: translate3d(-50%, -50%, 0);
    }

    .mobile-fab {
        animation-duration: 5s !important;
    }

    .scroll-hint i {
        animation-duration: 3s !important;
    }

    /* Pause stat number animations on mobile */
    .stat-number {
        animation: none !important;
    }

    .section-badge {
        animation: none !important;
    }

    .hero-badge {
        animation-duration: 4s !important;
        text-shadow: none !important;
    }

    /* 4. OPTIMIZE TRANSFORMS FOR GPU */
    .carousel-track {
        transform: translate3d(0, 0, 0);
        will-change: transform;
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    }

    .hero-card,
    .feature-card,
    .grade-card,
    .showcase-item {
        transform: translate3d(0, 0, 0);
        will-change: transform;
    }

    /* 5. REDUCE REPAINTS AND REFLOWS */
    .hero-card {
        contain: layout style paint;
    }

    .feature-card,
    .grade-card {
        contain: layout style paint;
    }

    .showcase-item {
        contain: layout style paint;
    }

    /* 6. REDUCE TRANSFORM COMPLEXITY */
    @keyframes float {

        0%,
        100% {
            transform: translate3d(0, 0, 0) rotate(0deg);
        }

        25% {
            transform: translate3d(20px, -20px, 0) rotate(45deg);
        }

        50% {
            transform: translate3d(-15px, 15px, 0) rotate(90deg);
        }

        75% {
            transform: translate3d(25px, 5px, 0) rotate(135deg);
        }
    }

    /* 7. OPTIMIZE LIGHTBOX BACKDROP */
    .card-backdrop {
        backdrop-filter: blur(3px) !important;
        -webkit-backdrop-filter: blur(3px) !important;
    }

    /* 8. SIMPLIFY SCROLL ANIMATIONS */
    .animate-on-scroll {
        transition-duration: 0.5s !important;
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    /* 9. OPTIMIZE HERO PATTERN */
    .hero-pattern {
        clip-path: none;
        opacity: 0.5;
    }

    /* 10. REDUCE SHADOW COMPLEXITY */
    .hero-card {
        box-shadow: 0 10px 30px rgba(250, 250, 51, 0.15) !important;
    }

    .feature-card,
    .grade-card {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
    }

    .btn-primary {
        box-shadow: 0 6px 15px rgba(250, 250, 51, 0.25) !important;
    }

    /* 11. OPTIMIZE CAROUSEL */
    .hero-carousel {
        touch-action: pan-y;
    }

    /* 12. TYPING ANIMATION */
    .typing-cursor {
        animation-duration: 1s !important;
    }

    /* 13. OPTIMIZE SHOWCASE IMAGES */
    .showcase-item:hover img {
        transform: scale(1.05) !important;
    }

    .showcase-item:hover {
        transform: translateY(-4px) !important;
    }

    /* 14. OPTIMIZE BUTTON HOVER EFFECTS */
    .btn::before {
        display: none;
    }

    /* 15. FORCE HARDWARE ACCELERATION */
    .hero-glow,
    .hero-pattern,
    .floating-shapes,
    .carousel-track,
    .lightbox {
        -webkit-transform: translateZ(0);
        -moz-transform: translateZ(0);
        -ms-transform: translateZ(0);
        -o-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
        -ms-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-perspective: 1000;
        -moz-perspective: 1000;
        -ms-perspective: 1000;
        perspective: 1000;
    }

    /* 16. CSS CONTAINMENT */
    .section-container {
        contain: layout;
    }

    /* 17. REDUCE FILTER EFFECTS */
    .brand-highlight,
    .stat-number {
        animation: none !important;
    }

    /* 18. COMPOSITE LAYERS OPTIMIZATION */
    .hero-card,
    .carousel-track,
    .lightbox,
    .floating-shapes,
    .mobile-fab {
        will-change: transform;
    }

    /* Remove will-change when not needed */
    .section:not(.in-viewport) * {
        will-change: auto !important;
    }

}

/* END OF MOBILE-ONLY MEDIA QUERY */

/* ===== ACCESSIBILITY - REDUCED MOTION (Desktop + Mobile) ===== */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .shape {
        animation: none !important;
    }
}