/* Mobile Performance Optimizations - Enhanced for better PageSpeed scores */

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

/* Critical mobile optimizations for performance */
@media (max-width: 768px) {
  /* Remove expensive operations on mobile */
  .bg-gradient-to-r,
  .bg-gradient-to-l,
  .bg-gradient-to-t,
  .bg-gradient-to-b,
  .bg-gradient-to-br,
  .bg-gradient-to-bl,
  .bg-gradient-to-tr,
  .bg-gradient-to-tl {
    background-attachment: scroll;
    background-image: none !important;
    background-color: hsl(var(--primary));
  }

  /* Optimize blur effects - remove on mobile */
  .backdrop-blur-sm,
  .backdrop-blur-md, 
  .backdrop-blur-lg {
    backdrop-filter: none;
    background-color: rgba(255, 255, 255, 0.95);
  }

  /* Simplify shadows on mobile */
  .shadow-lg {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  
  .shadow-xl {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }

  /* Mobile-optimized typography */
  h1, h2, h3, h4, h5, h6, p, span {
    text-rendering: optimizeSpeed;
  }

  /* Remove smooth scrolling on mobile for performance */
  .scroll-smooth,
  html {
    scroll-behavior: auto;
  }

  /* Optimize images for mobile */
  img {
    image-rendering: auto;
  }

  /* Reduce layout shifts */
  * {
    contain-intrinsic-size: auto 200px;
  }

  /* Optimize sticky elements */
  .sticky,
  .fixed {
    will-change: auto;
    transform: translateZ(0);
  }
}

/* Remove hover effects on touch devices for better performance */
@media (hover: none) and (pointer: coarse) {
  .hover\:scale-105:hover,
  .hover\:scale-110:hover,
  .hover\:transform:hover {
    transform: none;
  }
  
  .hover\:shadow-lg:hover,
  .hover\:shadow-xl:hover {
    box-shadow: inherit;
  }

  /* Optimize buttons for touch */
  button, a, [role="button"] {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    user-select: none;
  }

  /* Remove transition delays on touch */
  * {
    transition-delay: 0s;
  }
}

/* Performance hints for browsers */
.performance-optimized {
  content-visibility: auto;
  contain-intrinsic-size: 0 500px;
}

/* Mobile-specific loading optimizations */
@media (max-width: 768px) {
  .loading-skeleton {
    background: #f0f0f0;
    animation: none; /* Remove animation on mobile */
  }

  /* Optimize forms on mobile */
  input, textarea, select {
    font-size: 16px; /* Prevent zoom on iOS */
    -webkit-appearance: none;
    appearance: none;
  }

  /* Improve scrolling performance */
  body {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
  }
}

/* Network-aware optimizations for slow connections */
@media (prefers-reduced-data: reduce) {
  /* Disable all animations */
  * {
    animation: none !important;
    transition: none !important;
  }
  
  /* Use system fonts */
  body {
    font-family: system-ui, -apple-system, sans-serif;
  }

  /* Remove background images */
  * {
    background-image: none !important;
  }
}

/* Critical rendering optimizations */
.above-fold {
  content-visibility: visible;
}

.below-fold {
  content-visibility: auto;
  contain-intrinsic-size: 0 400px;
}

/* Optimize video and iframe loading */
iframe, video {
  loading: lazy;
}