/* ============================================
   CRITICAL PERFORMANCE OPTIMIZATIONS
   Remove expensive CSS properties on mobile
   ============================================ */

/* Disable expensive filters and effects on mobile */
@media (max-width: 1024px) {
  * {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    filter: none !important;
  }
  
  /* Only keep essential shadows - remove complex ones */
  .content-group,
  .collage-editorial-quote {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
  }
  
  .category-overlay {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
  }
  
  /* Remove blur effects on mobile */
  .hero-overlay-dark {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  
  /* Simplify gradients */
  .hero-content-wrapper {
    background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.3)) !important;
  }
  
  /* Disable complex transforms */
  .product-card:hover {
    transform: none !important;
  }
  
  /* Reduce animation complexity */
  @keyframes slideVerticalMobile {
    0%, 100% {
      transform: translate3d(0, 0, 0);
    }
    49% {
      transform: translate3d(0, -33.333%, 0);
    }
    50% {
      transform: translate3d(0, -33.333%, 0);
    }
    99% {
      transform: translate3d(0, -66.666%, 0);
    }
  }
}

/* Optimize will-change usage */
@media (max-width: 1024px) {
  /* Remove will-change when not animating */
  * {
    will-change: auto !important;
  }
  
  /* Only apply will-change during active animations */
  .hero-slide-track.animating,
  .promo-track.animating {
    will-change: transform;
  }
  
  /* Remove will-change after animation */
  .hero-slide-track:not(.animating),
  .promo-track:not(.animating) {
    will-change: auto;
  }
}

/* Reduce paint complexity */
@media (max-width: 1024px) {
  /* Use simpler borders instead of shadows */
  .category-card {
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    box-shadow: none !important;
  }
  
  /* Simplify overlays */
  .category-overlay {
    background: rgba(0, 0, 0, 0.4) !important;
  }
}

/* Optimize image rendering */
@media (max-width: 1024px) {
  img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
  
  /* Reduce image quality slightly for faster loading */
  img[loading="lazy"] {
    content-visibility: auto;
    contain-intrinsic-size: 400px 600px;
  }
}

/* Disable smooth scroll on mobile */
@media (max-width: 1024px) {
  html {
    scroll-behavior: auto !important;
  }
  
  * {
    scroll-behavior: auto !important;
  }
}

/* Optimize product image transitions */
@media (max-width: 1024px) {
  #main-product-image {
    transition: opacity 0.3s ease !important;
    transform: none !important;
  }
  
  #main-product-image.changing {
    will-change: opacity;
  }
  
  #main-product-image:not(.changing) {
    will-change: auto;
  }
}