/* ============================================================
   mobile-perf.css — Safe scroll-performance fixes for mobile
   Only uses compositor-safe, non-layout-breaking rules.
   ============================================================ */

/* ── 1. Native-feel scrolling on iOS ──────────────────────── */
html {
  -webkit-overflow-scrolling: touch;
  scroll-behavior: auto !important; /* Prevents conflicting smooth scroll dynamics on touch */
}
body {
  overscroll-behavior-y: none; /* stops Android bounce-lag */
  position: relative;
}

/* ── 2. Kill the magic cursor on touch screens ────────────── */
@media (max-width: 991.98px) {
  .cursor,
  .cursor-follower,
  .at-magic-cursor .cursor,
  .at-magic-cursor .cursor-follower,
  #ball,
  #magic-cursor {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
  }
}

/* ── 3. Mobile-only fixes ─────────────────────────────────── */
@media (max-width: 767.98px) {
  /* Prevent pointer event calculation overhead on scroll-heavy elements */
  iframe, 
  video,
  .carouselTicker,
  .brand-logo-track {
    pointer-events: none;
  }

  /* Optimize layout reflows */
  .swiper-slide {
    contain: layout style;
    will-change: transform;
  }

  /* Sticky cards: perspective creates a compositor layer per card */
  .sec-4-home-15__cards {
    perspective: none !important;
  }

  /* Disable parallax style calculations entirely */
  [data-speed],
  [data-lag] {
    will-change: auto !important;
    transform: none !important;
    transition: none !important;
  }

  /* 
     Fix the 'lacking' (jank/stutter) feel during scrolling:
     In main.css, the selector `a, button, p, li` has `transition: all 0.3s ease-out;` applied.
     When scrolling, any state changes (like scroll triggers, sticky header classes, etc.)
     will animate EVERY property (including layout-triggering ones like top, margin, width, padding)
     which causes layout thrashing and severe frame drops.
     We override it to transition only transform and opacity on mobile.
  */
  a,
  button,
  p,
  input,
  select,
  textarea,
  li,
  div,
  span,
  .transition-3 {
    transition: transform 0.2s ease-out, opacity 0.2s ease-out !important;
  }

  /* ── 4. Fix "Our Work" and "Our Solutions" image-switch lag ── */
  /* Both sections change a large preview image dynamically when hovering or scrolling.
     Rendering high-res images dynamically causes massive paint cycles and frame drops.
     We enforce hardware acceleration and optimize image rendering/scaling on mobile. */
  .at-service-sales-wrap,
  .mg-portfolio-title-wrap,
  .hover-image,
  .hover-image img,
  .mg-portfolio-item img,
  .at-service-img-wrapper img {
    will-change: transform, opacity !important;
    transform: translateZ(0) !important; /* Force GPU layering */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }

  /* Prevent container clipping recalculation during rapid images swaps */
  .at-service-img-wrapper,
  .image-container {
    contain: paint layout size;
  }

  /* ── 5. Prevent Scroll-Pin / Layout Stutter on Mobile ────── */
  /* GSAP attempts to apply position: fixed or translate3d pinning on elements
     with classes `.at-panel-pin` and `.mg-portfolio-pin`.
     On mobile viewport widths (<1199px), the layout becomes a regular vertical stack,
     but the library continues trying to run layout/transform checks, causing scrolling stutter.
     We force them to remain statically positioned and clean. */
  .at-panel-pin,
  .mg-portfolio-pin,
  .at-service-sales-wrap.at-panel-pin,
  .mg-portfolio-title-wrap.mg-portfolio-pin {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    will-change: auto !important;
  }
}

/* ── 6. Accessibility: honour reduced-motion preference ───── */
@media (prefers-reduced-motion: reduce) {
  *,
  ::before,
  ::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}