/* ============================================
   MOBILE PERFORMANCE OPTIMIZATIONS
   Critical performance fixes for mobile devices
   ============================================ */

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

/* Optimize hero slider for mobile - reduce complexity */
@media (max-width: 1024px) {
  .hero-slide-track {
    will-change: transform;
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }
  
  .hero-slide {
    will-change: auto;
  }
  
  .hero-slide img {
    will-change: opacity;
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transition: opacity 0.4s ease-out !important;
  }
  
  /* Disable overlay animations on mobile */
  .hero-overlay-dark {
    will-change: auto;
    transition: none !important;
  }
  
  /* Simplify hero content animations */
  .hero-content-wrapper {
    will-change: auto;
  }
  
  .hero-logo-large {
    will-change: auto;
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
  }
}

/* Optimize product page header animation for mobile */
@media (max-width: 1024px) {
  .promo-banner-inline .promo-track {
    will-change: transform;
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    perspective: 1000px;
    -webkit-perspective: 1000px;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    /* Slower, smoother animation for mobile */
    animation: slideVerticalMobile 25s cubic-bezier(0.4, 0, 0.2, 1) infinite !important;
  }
  
  .promo-banner-inline .promo-message {
    will-change: auto;
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    /* Ensure text is stable */
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

/* Reduce scroll-triggered animations on mobile */
@media (max-width: 1024px) {
  .fade-in-on-scroll {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Optimize scroll performance with passive listeners */
@media (max-width: 1024px) {
  * {
    -webkit-overflow-scrolling: touch;
  }
  
  /* Reduce paint complexity */
  section {
    contain: layout style paint;
  }
  
  /* Optimize images */
  img {
    content-visibility: auto;
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
  }
}

/* Disable expensive effects on mobile */
@media (max-width: 1024px) {
  /* Reduce backdrop-filter usage */
  .content-group {
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
  }
  
  .collage-editorial-quote {
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
  }
  
  /* Reduce box-shadow complexity on mobile */
  .content-group,
  .collage-editorial-quote {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
  }
  
  .editorial-button {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;
  }
}

/* Optimize font rendering on mobile */
@media (max-width: 1024px) {
  * {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeSpeed; /* Faster rendering on mobile */
  }
  
  /* Only optimize legibility for headings */
  h1, h2, h3, h4, h5, h6 {
    text-rendering: optimizeLegibility;
  }
}

/* Reduce repaints and reflows */
@media (max-width: 1024px) {
  body {
    contain: layout style;
  }
  
  main {
    contain: layout style paint;
  }
}