/* ========================================
   MOBILE PERFORMANCE OPTIMIZATIONS V2
   Aggressive performance for slow devices
   ======================================== */

/* Reduce animations on slow devices */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* MOBILE: Disable heavy effects */
@media (max-width: 768px) {
    /* Skip intro animation faster */
    #mh-intro {
        animation-duration: 0.5s !important;
    }
    
    /* Reduce blur - very expensive on mobile */
    .mh-orb,
    .mh-orb--1,
    .mh-orb--2,
    .mh-orb--3 {
        filter: blur(40px) !important;
        will-change: transform, opacity;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }
    
    /* Disable canvas stars on mobile */
    #mh-canvas {
        display: none !important;
    }
    
    /* Faster character animation */
    .mh-char {
        animation-duration: 0.3s !important;
    }
    
    /* Reduce hub-bg effects */
    .hub-bg__glow,
    .hub-bg__grid {
        opacity: 0.3 !important;
    }
    
    /* Disable complex shadows */
    .hub-label {
        box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
    }
    
    /* Optimize SVG rendering */
    svg {
        shape-rendering: optimizeSpeed;
    }
    
    /* Reduce orbit animations */
    .hub-orbits circle {
        stroke-dasharray: none !important;
        animation: none !important;
    }
    
    /* Disable pulse rings on mobile */
    .hub-center__pulse-ring {
        display: none !important;
    }
}

/* VERY SLOW DEVICES: Minimal mode */
@media (max-width: 480px) {
    /* No blur at all */
    .mh-orb,
    .mh-orb--1,
    .mh-orb--2,
    .mh-orb--3 {
        filter: none !important;
        opacity: 0.5 !important;
    }
    
    /* No background animations */
    .hub-bg {
        animation: none !important;
    }
    
    /* Simplify hub center */
    .hub-center__glow,
    .hub-center__outer {
        animation: none !important;
    }
}

/* GPU acceleration for critical elements */
.hub-organism,
.hub-label,
.hub-node,
g.hub-center {
    will-change: transform;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* Touch improvements */
@media (pointer: coarse) {
    .mh-bottom,
    .mh-progress,
    button,
    a,
    .hub-label {
        min-height: 44px;
        min-width: 44px;
    }
}

/* Prevent layout shift during load */
#root {
    min-height: 100vh;
    min-height: 100dvh;
}

/* Safe area for notched devices */
@supports (padding: max(0px)) {
    body {
        padding-left: max(0px, env(safe-area-inset-left));
        padding-right: max(0px, env(safe-area-inset-right));
        padding-bottom: max(0px, env(safe-area-inset-bottom));
    }
}

/* Force hardware acceleration on mobile */
@media (max-width: 768px) {
    body {
        -webkit-overflow-scrolling: touch;
    }
    
    .hub-home,
    .hub-main {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

/* MOBILE: Faster intro animations */
@media (max-width: 768px) {
    /* Skip intro faster */
    .mh-brand .mh-char,
    .mh-hub .mh-char {
        animation-delay: 0s !important;
        animation-duration: 0.2s !important;
    }
    
    /* Faster orb animations */
    .mh-orb--1,
    .mh-orb--2,
    .mh-orb--3 {
        animation-delay: 0s !important;
        animation-duration: 0.5s !important;
    }
    
    /* Faster beam */
    .mh-beam {
        animation-delay: 0s !important;
        animation-duration: 0.3s !important;
    }
    
    /* Faster progress bar wait */
    .mh-bottom {
        animation-delay: 0.3s !important;
    }
}