frontend/src/css/responsive/performance/mobile-optimization.css

/* Mobile Performance Optimizations */

/* Mobile Hardware Acceleration */
@media (max-width: 767px) {
  .mobile-accelerated {
    will-change: transform;
    backface-visibility: hidden;
    transform: translateZ(0);
  }
  
  .mobile-accelerated-3d {
    transform-style: preserve-3d;
    perspective: 1000px;
  }
}

/* Mobile Animation Optimizations */
@media (max-width: 767px) {
  .mobile-optimized-animation {
    animation-duration: 0.3s !important;
    transition-duration: 0.3s !important;
  }
  
  .mobile-reduced-motion {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  .mobile-fast-animation {
    animation: mobileFadeIn 0.2s ease-out;
  }
  
  @keyframes mobileFadeIn {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

/* Mobile Touch Optimizations */
@media (hover: none) and (pointer: coarse) {
  .touch-optimized {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  
  .touch-optimized:active {
    transform: scale(0.98);
  }
  
  .touch-optimized:focus {
    outline: none;
  }
}

/* Mobile Rendering Optimizations */
@media (max-width: 767px) {
  .mobile-render-optimized {
    contain: layout style paint;
    contain-intrinsic-size: 0 0;
  }
  
  .mobile-content-visibility {
    content-visibility: auto;
    contain-intrinsic-size: 0 1000px;
  }
  
  .mobile-scroll-optimized {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
}

/* Mobile Memory Optimizations */
@media (max-width: 767px) {
  .mobile-memory-optimized {
    will-change: auto;
  }
  
  .mobile-heavy-element {
    contain: strict;
    contain-intrinsic-size: 0 0;
  }
}

/* Mobile Network Optimizations */
@media (max-width: 767px) {
  .mobile-network-optimized {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
  
  .mobile-lazy-load {
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  
  .mobile-lazy-load.loaded {
    opacity: 1;
  }
}

/* Mobile Battery Optimizations */
@media (max-width: 767px) {
  .mobile-battery-optimized {
    animation: none;
    transition: none;
    will-change: auto;
  }
  
  .mobile-heavy-animation {
    animation-play-state: paused;
  }
}

/* Mobile GPU Optimizations */
@media (max-width: 767px) {
  .mobile-gpu-optimized {
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
  }
  
  .mobile-gpu-heavy {
    transform: none;
    filter: none;
  }
}

/* Mobile CPU Optimizations */
@media (max-width: 767px) {
  .mobile-cpu-optimized {
    box-shadow: none;
    border-radius: 0;
    filter: none;
  }
  
  .mobile-complex-layout {
    display: block;
    float: none;
    position: static;
  }
}

/* Mobile Loading Optimizations */
@media (max-width: 767px) {
  .mobile-loading-optimized {
    min-height: 0;
    min-width: 0;
  }
  
  .mobile-skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: mobileSkeleton 1.5s infinite;
  }
  
  @keyframes mobileSkeleton {
    0% {
      background-position: 200% 0;
    }
    100% {
      background-position: -200% 0;
    }
  }
}

/* Mobile Interaction Optimizations */
@media (max-width: 767px) {
  .mobile-interaction-optimized {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
  }
  
  .mobile-selectable {
    user-select: text;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
  }
}

/* Mobile Scrolling Optimizations */
@media (max-width: 767px) {
  .mobile-scroll-smooth {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
  }
  
  .mobile-scroll-hidden {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  
  .mobile-scroll-hidden::-webkit-scrollbar {
    display: none;
  }
}

/* Mobile Visibility Optimizations */
@media (max-width: 767px) {
  .mobile-visibility-optimized {
    visibility: visible;
    opacity: 1;
  }
  
  .mobile-hidden-offscreen {
    position: absolute;
    left: -9999px;
    top: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
  }
}

/* Mobile Performance Utilities */
@media (max-width: 767px) {
  .mobile-perf-fast {
    animation-duration: 0.15s !important;
    transition-duration: 0.15s !important;
  }
  
  .mobile-perf-medium {
    animation-duration: 0.3s !important;
    transition-duration: 0.3s !important;
  }
  
  .mobile-perf-slow {
    animation-duration: 0.5s !important;
    transition-duration: 0.5s !important;
  }
  
  .mobile-perf-none {
    animation: none !important;
    transition: none !important;
  }
}

/* Mobile Hardware Detection */
@media (max-width: 767px) and (hover: none) and (pointer: coarse) {
  .mobile-touch-device {
    /* Touch device specific styles */
  }
}

@media (max-width: 767px) and (hover: hover) and (pointer: fine) {
  .mobile-non-touch-device {
    /* Non-touch device specific styles */
  }
}

/* Mobile Network Type Detection */
@media (max-width: 767px) and (prefers-reduced-data: reduce) {
  .mobile-low-data {
    /* Low data mode specific styles */
  }
}

@media (max-width: 767px) and (prefers-reduced-data: no-preference) {
  .mobile-high-data {
    /* High data mode specific styles */
  }
}

/* Mobile Device Pixel Ratio */
@media (max-width: 767px) and (-webkit-min-device-pixel-ratio: 2) {
  .mobile-retina {
    /* Retina display specific styles */
  }
}

@media (max-width: 767px) and (-webkit-min-device-pixel-ratio: 3) {
  .mobile-retina-3x {
    /* 3x retina display specific styles */
  }
}

/* Mobile Orientation */
@media (max-width: 767px) and (orientation: portrait) {
  .mobile-portrait {
    /* Portrait orientation specific styles */
  }
}

@media (max-width: 767px) and (orientation: landscape) {
  .mobile-landscape {
    /* Landscape orientation specific styles */
  }
}

/* Mobile Viewport Height */
@media (max-width: 767px) and (height: 100vh) {
  .mobile-full-height {
    /* Full height viewport specific styles */
  }
}

/* Mobile Viewport Width */
@media (max-width: 767px) and (width: 100vw) {
  .mobile-full-width {
    /* Full width viewport specific styles */
  }
}