/* =========================================================
   MOBILE SCROLL FIX - OPTIMIZED VERSION
   Enables smooth auto-scroll AND manual touch scrolling
   ========================================================= */

@media (max-width: 640px) {
  /* Testimonials - KEEP auto-scroll but allow manual override */
  .testimonials-container {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    
    /* Fix: Remove mask on mobile to prevent glitchy line */
    -webkit-mask-image: none;
    mask-image: none;
    
    position: relative;
  }
  
  /* Add fade edges without mask (no glitch) */
  .testimonials-container::before,
  .testimonials-container::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 24px;
    z-index: 10;
    pointer-events: none;
  }
  
  .testimonials-container::before {
    left: 0;
    background: linear-gradient(90deg, var(--bg, #ffffff), transparent);
  }
  
  .testimonials-container::after {
    right: 0;
    background: linear-gradient(90deg, transparent, var(--bg, #ffffff));
  }
  
  .testimonials-container::-webkit-scrollbar {
    display: none;
  }
  
  .testimonials-container:active {
    cursor: grabbing;
  }
  
  /* Pause animation while actively dragging/scrolling - IMPORTANT needed here */
  .testimonials-container.is-dragging .testimonials-track,
  .testimonials-container.is-scrolling .testimonials-track {
    animation-play-state: paused !important;
  }
  
  /* Keep animation running when not interacting */
  .testimonials-track {
    animation-play-state: running;
  }
  
  /* Trust cards - enable scrolling */
  .hero-trust {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
  }
  
  .hero-trust::-webkit-scrollbar {
    display: none;
  }
  
  .hero-trust:active {
    cursor: grabbing;
  }
  
  /* Pause animation while dragging - IMPORTANT needed here */
  .hero-trust.is-dragging .hero-trust-track {
    animation-play-state: paused !important;
  }
  
  /* Metrics - enable scrolling */
  .metrics-strip .container {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
  }
  
  .metrics-strip .container::-webkit-scrollbar {
    display: none;
  }
  
  .metrics-strip .container:active {
    cursor: grabbing;
  }
  
  /* Pause animation while dragging - IMPORTANT needed here */
  .metrics-strip .container.is-dragging .metrics-grid {
    animation-play-state: paused !important;
  }
}

/* Dark theme support for fade edges */
[data-theme="dark"] .testimonials-container::before {
  background: linear-gradient(90deg, #0f172a, transparent);
}

[data-theme="dark"] .testimonials-container::after {
  background: linear-gradient(90deg, transparent, #0f172a);
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .testimonials-track,
  .hero-trust-track,
  .metrics-grid {
    animation: none !important;
  }
  .testimonials-container,
  .hero-trust,
  .metrics-strip .container {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}