/* ========================================
   MOBILE ULTRA PERFORMANCE V3
   Maximum performance for all mobile devices
   ======================================== */

/* ===== CRITICAL RENDERING PATH ===== */

/* Reduce motion for users who prefer it */
@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;
    }
}

/* ===== MOBILE DEVICES (< 768px) ===== */
@media (max-width: 768px) {
    
    /* Force GPU compositing */
    html {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
    
    /* Smooth scrolling optimization */
    body {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: none;
        scroll-behavior: smooth;
    }
    
    /* INTRO OPTIMIZATION */
    #mh-intro {
        animation-duration: 0.3s !important;
        contain: strict;
    }
    
    /* Completely disable canvas stars - huge perf gain */
    #mh-canvas,
    canvas {
        display: none !important;
        visibility: hidden !important;
    }
    
    /* Orbs: Minimal blur, reduced opacity */
    .mh-orb,
    .mh-orb--1,
    .mh-orb--2,
    .mh-orb--3,
    [class*="mh-orb"] {
        filter: blur(30px) !important;
        opacity: 0.4 !important;
        will-change: transform;
        contain: layout paint;
    }
    
    /* Faster character animations */
    .mh-char,
    [class*="mh-char"] {
        animation-duration: 0.15s !important;
        animation-delay: 0s !important;
    }
    
    /* Hub background optimizations */
    .hub-bg__glow {
        opacity: 0.2 !important;
        filter: blur(40px) !important;
    }
    
    .hub-bg__grid {
        opacity: 0.15 !important;
    }
    
    /* Disable ALL pulse rings */
    .hub-center__pulse-ring,
    [class*="pulse"] {
        display: none !important;
    }
    
    /* Simplify orbit animations */
    .hub-orbits circle,
    .hub-orbits path {
        stroke-dasharray: none !important;
        animation: none !important;
    }
    
    /* Optimize SVG rendering */
    svg {
        shape-rendering: optimizeSpeed;
        text-rendering: optimizeSpeed;
    }
    
    /* Reduce shadow complexity */
    .hub-label,
    [class*="hub-label"] {
        box-shadow: 0 2px 8px rgba(0,0,0,0.2) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    
    /* Beam optimization */
    .mh-beam,
    [class*="mh-beam"] {
        animation-duration: 0.2s !important;
        animation-delay: 0s !important;
    }
    
    /* Bottom bar faster */
    .mh-bottom {
        animation-delay: 0.2s !important;
    }
    
    /* Progress bar optimization */
    .mh-progress {
        animation-delay: 0.2s !important;
    }
}

/* ===== SMALL SCREENS (< 480px) ===== */
@media (max-width: 480px) {
    
    /* No blur at all - maximum performance */
    .mh-orb,
    .mh-orb--1,
    .mh-orb--2,
    .mh-orb--3,
    [class*="mh-orb"] {
        filter: none !important;
        opacity: 0.3 !important;
        background: radial-gradient(circle, var(--color, #7c3aed) 0%, transparent 70%) !important;
    }
    
    /* No background glow effects */
    .hub-bg__glow,
    [class*="glow"] {
        filter: none !important;
        opacity: 0.15 !important;
    }
    
    /* Disable hub center animations */
    .hub-center__glow,
    .hub-center__outer,
    .hub-center__inner {
        animation: none !important;
    }
    
    /* Simplify all transitions */
    *:not(input):not(textarea) {
        transition-duration: 0.1s !important;
    }
}

/* ===== LOW-END DEVICE DETECTION ===== */
@media (max-width: 768px) and (max-height: 700px) {
    /* Very small screen = probably low-end */
    .hub-bg,
    .hub-bg__glow,
    .hub-bg__grid {
        animation: none !important;
    }
    
    .hub-center circle {
        animation: none !important;
    }
}

/* ===== GPU ACCELERATION ===== */
.hub-organism,
.hub-label,
.hub-node,
g.hub-center,
.hub-home,
.hub-main,
#root,
[class*="hub-"] {
    will-change: transform;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    contain: layout;
}

/* ===== TOUCH OPTIMIZATION ===== */
@media (pointer: coarse) {
    /* Larger touch targets */
    .mh-bottom,
    .mh-progress,
    button,
    a[href],
    .hub-label,
    [role="button"],
    [tabindex] {
        min-height: 44px;
        min-width: 44px;
        touch-action: manipulation;
    }
    
    /* Disable hover effects on touch */
    *:hover {
        transition-delay: 0s !important;
    }
}

/* ===== LAYOUT STABILITY ===== */
#root {
    min-height: 100vh;
    min-height: 100dvh;
    contain: layout;
}

html, body {
    overflow-x: hidden;
    overscroll-behavior-x: none;
}

/* Prevent CLS from fonts */
body {
    font-display: swap;
}

/* ===== SAFE AREAS (Notched devices) ===== */
@supports (padding: max(0px)) {
    body {
        padding-left: env(safe-area-inset-left, 0px);
        padding-right: env(safe-area-inset-right, 0px);
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
}

/* ===== DARK MODE OPTIMIZATION ===== */
@media (prefers-color-scheme: dark) {
    /* Already dark, reduce computation */
    img {
        content-visibility: auto;
    }
}

/* ===== CONNECTION-AWARE ===== */
/* For browsers that support it */
@media (prefers-reduced-data: reduce) {
    /* Disable decorative images */
    .hub-bg__glow,
    .hub-bg__grid,
    .mh-orb {
        display: none !important;
    }
}

/* ===== PRINT (just in case) ===== */
@media print {
    #mh-intro,
    #mh-canvas,
    .mh-orb {
        display: none !important;
    }
}