/* mobile-performance-fix.css - FIX PENTRU FLICKERING ȘI PERFORMANCE */

/* ============================================
   PARTEA 1: FIX FLICKERING ANDROID
   Cauza: Gradient animation + backdrop-filter
   ============================================ */

/* Balanced approach:
   - Keep animated gradient for most phones
   - Disable only on low-end devices or users who prefer reduced motion */
@media (max-width: 768px) {
    body {
        /* smoother/cheaper animation on mobile */
        animation-duration: 20s !important;
        background-size: 160% 160% !important;
    }
}

/* Low-end devices (class is set by `script.js`) */
html.low-end body {
    animation: none !important;
}

html.low-end body:not(.light) {
    background: linear-gradient(135deg, #0b0e27 0%, #1a1f3b 50%, #2b005c 100%) !important;
}

html.low-end body.light {
    background: linear-gradient(135deg, #e4e4ff 0%, #fafafa 100%) !important;
}

/* ============================================
   PARTEA 2: OPTIMIZARE HEADER MOBILE
   Reducere blur pentru performance
   ============================================ */

@media (max-width: 768px) {
    header {
        /* Reducere drastică blur - cauza principală a lag-ului */
        backdrop-filter: blur(5px) !important;
        -webkit-backdrop-filter: blur(5px) !important;
        /* SAU elimină complet blur-ul pe mobile: */
        /* backdrop-filter: none !important; */
        /* background: rgba(0, 0, 0, 0.85) !important; */
    }

    /* Avoid forcing GPU on everything (can cause text blurriness on some phones) */
}

/* Even lighter header on low-end devices */
html.low-end header {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(0, 0, 0, 0.85) !important;
}

/* ============================================
   PARTEA 3: OPTIMIZARE PARTICULE
   Cauza majoră de flickering
   ============================================ */

@media (max-width: 768px) {

    /* Balanced particles: keep a few, remove expensive effects */
    .particle {
        animation-duration: 12s !important;
        animation-timing-function: linear !important;
        filter: none !important;
        /* Elimină blur de pe particule */
    }

    /* Limit count on mobile */
    .particle:nth-child(n+8) {
        display: none !important;
    }
}

/* Low-end: no particles at all */
html.low-end .particle {
    display: none !important;
}

/* ============================================
   PARTEA 4: OPTIMIZARE SCROLL
   Previne jank pe scroll
   ============================================ */

@media (max-width: 768px) {

    /* Smooth scrolling optimizat */
    html {
        scroll-behavior: auto !important;
        /* Smooth scroll cauzează lag */
        -webkit-overflow-scrolling: touch;
    }

    body {
        /* Previne repainting excesiv */
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    /* Keep scroll stable; avoid forcing transforms on large containers */
}

/* ============================================
   PARTEA 5: OPTIMIZARE ANIMAȚII
   Reduce toate animațiile pe mobile
   ============================================ */

@media (max-width: 768px) {

    /* Keep heading shine but make it slower on mobile */
    h2,
    h3 {
        animation-duration: 6s !important;
    }

    /* Keep reveal animations (they are transform/opacity and generally safe),
       but reduce distance so they feel smoother */
    .reveal {
        transform: translateY(24px) !important;
        transition: opacity 0.55s ease, transform 0.55s ease !important;
    }
}

/* ============================================
   PARTEA 6: OPTIMIZARE IMAGINI
   ============================================ */

@media (max-width: 768px) {
    img {
        /* Avoid forcing GPU / crisp edges on photos (often looks worse on mobile) */
        max-width: 100%;
        height: auto;
    }

    .logo {
        /* Oprește animațiile pe logo */
        transition: transform 0.2s ease, filter 0.2s ease !important;
    }

    .logo:hover,
    .logo:active {
        transform: scale(1.02) !important;
    }
}

/* ============================================
   PARTEA 7: OPTIMIZARE BIRD ANIMATION
   ============================================ */

@media (max-width: 768px) {

    /* Keep the bird on mobile, just make it lighter/smaller */
    .loader {
        transform: scale(0.6) !important;
        transform-origin: center center;
        opacity: 0.9;
    }

    /* Reduce visual cost */
    #gnd {
        filter: none !important;
        opacity: 0.18 !important;
        animation-duration: 7s !important;
    }

    .head,
    .bod,
    .legr,
    .legl {
        animation-duration: 1.25s !important;
    }
}

/* Low-end devices: keep bird static */
html.low-end .loader svg,
html.low-end .head,
html.low-end .bod,
html.low-end .legr,
html.low-end .legl,
html.low-end #gnd {
    animation: none !important;
}

/* ============================================
   PARTEA 8: OPTIMIZARE HOVER EFFECTS
   Elimină pe touch devices
   ============================================ */

@media (hover: none) and (pointer: coarse) {

    /* Elimină toate hover effects pe mobile */
    .materie-card:hover,
    .membru:hover,
    .stat-box:hover,
    .partener-link:hover {
        transform: none !important;
        box-shadow: none !important;
    }

    /* Active states simple în loc de hover */
    .materie-card:active {
        opacity: 0.8;
    }

    .membru:active {
        opacity: 0.9;
    }
}

/* ============================================
   PARTEA 9: REDUCE MOTION (Accessibility)
   Pentru users cu motion sensitivity
   ============================================ */

@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;
    }

    .particle {
        display: none !important;
    }
}

/* ============================================
   PARTEA 10: FIX PENTRU ANDROID CHROME
   ============================================ */

@media (max-width: 768px) {

    /* Fix pentru Android Chrome scroll jank */
    body {
        position: relative;
        overflow-x: hidden;
    }

    /* Previne flickering la scroll */
    .content,
    .hero {
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        perspective: 1000px;
        -webkit-perspective: 1000px;
    }

    /* Optimizare rendering pentru text */
    p,
    h2,
    h3,
    a {
        text-rendering: optimizeSpeed;
    }
}

/* ============================================
   PARTEA 11: OPTIMIZARE MEMORIE
   ============================================ */

@media (max-width: 768px) {

    /* Reduce shadow complexity */
    .content,
    .materie-card,
    .membru,
    .stat-box {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
    }

    .content {
        border-radius: 12px !important;
    }
}

/* ============================================
   PARTEA 12: FIX 60FPS CONSTANT
   ============================================ */

@media (max-width: 768px) {

    /* Force GPU acceleration pe elementele principale */
    header,
    .hero,
    .content,
    nav,
    .menu-overlay {
        transform: translate3d(0, 0, 0);
        -webkit-transform: translate3d(0, 0, 0);
    }

    /* Containment pentru izolare rendering */
    .content {
        contain: layout style paint;
    }

    .materii,
    .team,
    .stats-container {
        contain: layout;
    }
}

/* ============================================
   PARTEA 13: DEBUGGING - ACTIVEAZĂ DACĂ TESTEZI
   ============================================ */

/* Decomentează pentru a vedea repaint-urile */
/*
@media (max-width: 768px) {
  * {
    outline: 1px solid rgba(255, 0, 0, 0.3) !important;
  }
}
*/

/* ============================================
   PARTEA 14: SAFE AREAS iOS (bonus fix)
   ============================================ */

@supports (padding: max(0px)) {
    @media (max-width: 768px) {
        header {
            padding-left: max(1rem, env(safe-area-inset-left));
            padding-right: max(1rem, env(safe-area-inset-right));
            padding-top: max(0.75rem, env(safe-area-inset-top));
        }

        .content {
            padding-left: max(1.25rem, env(safe-area-inset-left));
            padding-right: max(1.25rem, env(safe-area-inset-right));
        }
    }
}

/* ============================================
   PARTEA 15: FINAL OPTIMIZATIONS
   ============================================ */

@media (max-width: 768px) {

    /* Font rendering optimization */
    body {
        text-rendering: optimizeSpeed;
        /* Use consistent antialiased from line 98 - subpixel can cause issues on mobile */
    }
}

/* ============================================
   QUICK FIX SUMMARY:
   
   ✅ Flickering STOP: gradient animation OFF
   ✅ Performance: blur reduction, GPU acceleration
   ✅ Particule: TOATE OFF sau doar 5 max
   ✅ Animații: simplified/removed
   ✅ Hover: disabled pe touch
   ✅ Scroll: smooth OFF, hardware accelerated
   ✅ Memory: reduced shadows, simpler borders
   ============================================ */