/* ==================== MOBILE PERFORMANCE OPTIMIZATION CSS ==================== */
/* This file contains mobile-specific performance optimizations */
/* It removes expensive effects and forces GPU acceleration on mobile devices */

@media (max-width: 768px) {
    /* ==================== GPU ACCELERATION ==================== */
    /* DISABLED - Breaks position: fixed on mobile */
    /* transform: translateZ(0) creates new stacking context */
    /* 
    *:not(.chat-widget-button):not(.scroll-to-top):not(.chat-widget-badge):not(.chat-window) {
        transform: translateZ(0);
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
    }
    */

    /* ==================== REMOVE EXPENSIVE EFFECTS ==================== */
    /* Remove box-shadows on mobile (expensive to render) */
    .glow,
    .shadow-effect,
    .card,
    .btn {
        box-shadow: none !important;
    }

    /* Remove blur filters (very expensive on mobile) */
    /* EXCEPT for sidebar and search overlay which need glassmorphism */
    *:not(.sidebar):not(.sidebar-overlay):not(.search-overlay):not(.search-content) {
        filter: none !important;
        backdrop-filter: none !important;
        -webkit-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    /* ==================== SIMPLIFY ANIMATIONS ==================== */
    /* Use only transform and opacity for animations (GPU accelerated) */
    .animate-box,
    .animated {
        animation-duration: 0.4s !important; /* Faster animations on mobile */
    }

    /* Reduce animation complexity */
    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    @keyframes slideIn {
        from { transform: translateY(20px); opacity: 0; }
        to { transform: translateY(0); opacity: 1; }
    }

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

    /* Ensure images with explicit width/height attributes stay responsive */
    img.img-fluid {
        max-width: 100% !important;
        height: auto !important;
        width: auto !important;
    }

    /* ==================== TEXT RENDERING ==================== */
    /* Optimize text rendering */
    body {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeSpeed;
    }

    /* ==================== REMOVE HOVER EFFECTS ON TOUCH DEVICES ==================== */
    /* Disable hover effects on touch devices */
    @media (hover: none) {
        *:hover {
            transform: none !important;
        }
    }

    /* ==================== WILL-CHANGE OPTIMIZATION ==================== */
    /* Remove will-change after animations complete */
    .animated {
        will-change: auto;
    }

    /* Only use will-change during active animations */
    .animating {
        will-change: transform, opacity;
    }

    /* ==================== VIDEO OPTIMIZATIONS ==================== */
    /* Optimize video playback on mobile */
    video {
        will-change: auto;
    }

    /* ==================== SCROLL OPTIMIZATIONS ==================== */
    /* Optimize scrolling performance */
    * {
        scroll-behavior: auto; /* Smooth scrolling is expensive */
    }

    /* ==================== REDUCE MOTION SUPPORT ==================== */
    /* Respect user's reduced motion preferences */
    @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
        }
    }
}

/* ==================== LOW-END DEVICE OPTIMIZATIONS ==================== */
/* Additional optimizations for low-end devices */
@media (max-width: 768px) and (max-resolution: 1.5dppx) {
    /* Further reduce animation complexity on low-end devices */
    .animate-box,
    .animated {
        animation: none !important;
    }

    /* Remove transitions on low-end devices */
    * {
        transition: none !important;
    }

    /* Simplify gradients to solid colors */
    .gradient {
        background: var(--primary-color) !important;
    }
}

/* ==================== RESPONSIVE IMAGE FIX (ALL DEVICES) ==================== */
/* Ensure images with explicit width/height attributes remain responsive */
/* This prevents icons from being locked at fixed pixel sizes across different viewports */
.img-fluid {
    max-width: 100% !important;
    height: auto !important;
}

/* Maintain aspect ratio for images with explicit dimensions */
img[width][height] {
    height: auto;
}

/* Ensure preview images/videos inside .image-container always cover their container
   (overrides generic .img-fluid rules so the hero video thumbnail matches the video size) */
.image-container img,
.image-container video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* ==================== FOOTER MOBILE OPTIMIZATIONS ==================== */
@media (max-width: 768px) {
    /* Footer quote box - fix spacing and layout on mobile */
    .footer-quote-box {
        position: relative !important;
        padding: 1rem !important;
        padding-left: 1.25rem !important;
        margin: 0 !important;
        max-width: 100% !important;
    }

    .footer-quote {
        display: flex !important;
        align-items: flex-start !important;
        gap: 0.75rem !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 0.9rem !important;
        line-height: 1.5 !important;
    }

    .quote-accent-line {
        position: absolute !important;
        left: 0 !important;
        top: 0 !important;
        bottom: 0 !important;
        width: 3px !important;
        background: linear-gradient(180deg, #8B5CF6 0%, #6366F1 100%) !important;
    }

    .quote-code-icon {
        font-size: 1.25rem !important;
        color: #8B5CF6 !important;
        flex-shrink: 0 !important;
        margin-top: 0.1rem !important;
    }

    .quote-text {
        flex: 1 !important;
        font-style: italic !important;
        color: rgba(255, 255, 255, 0.9) !important;
        margin: 0 !important;
        padding-right: 0.5rem !important;
    }

    .footer-quote-social {
        padding: 0 !important;
        margin: 0 !important;
        align-items: flex-start !important;
        flex-direction: column !important;
        gap: 1rem !important;
    }
    
    .footer-quote-social .footer-quote-box {
        width: 100% !important;
        flex: 0 0 auto !important;
        min-height: auto !important;
        height: auto !important;
    }
}