/* ========================================
   Phase 2.1 — Mobile Performance & UX Polish
   Tablet & mobile only (≤991px). Desktop unchanged.
   ======================================== */

@media (max-width: 991px) {
  /* Scroll & reveal — GPU-friendly easing */
  [data-animate] {
    transform: translate3d(0, 20px, 0);
    transition:
      opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
      transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
  }

  [data-animate].visible {
    transform: translate3d(0, 0, 0);
    will-change: auto;
  }

  /* Defer paint work for below-fold homepage sections */
  #ceramic-coating,
  #paint-correction,
  #about,
  #trust,
  #contact,
  #local-seo {
    content-visibility: auto;
    contain-intrinsic-size: auto 520px;
  }

  /* Cheaper compositing — solid header instead of live blur while scrolling */
  .header--scrolled {
    background: rgba(10, 10, 10, 0.97);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .nav__links {
    background: rgba(10, 10, 10, 0.98);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  /* Lazy image fade-in */
  main img[loading="lazy"]:not(.is-loaded) {
    opacity: 0;
  }

  main img.is-loaded,
  main img:not([loading="lazy"]) {
    opacity: 1;
    transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  }

  /* Faster tap response */
  main .btn:not(.nav__cta),
  .nav__toggle,
  .nav__links a,
  .booking-date,
  .booking-time,
  .booking-package,
  .booking-service,
  .booking-vehicle,
  .booking-upgrade {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  main .btn:not(.nav__cta) {
    transition:
      transform 0.2s cubic-bezier(0.22, 1, 0.36, 1),
      background 0.25s cubic-bezier(0.22, 1, 0.36, 1),
      border-color 0.25s cubic-bezier(0.22, 1, 0.36, 1),
      box-shadow 0.25s cubic-bezier(0.22, 1, 0.36, 1),
      color 0.25s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .product-brands__card,
  .ceramic-package,
  .trust-card {
    transition:
      border-color 0.25s cubic-bezier(0.22, 1, 0.36, 1),
      background 0.25s cubic-bezier(0.22, 1, 0.36, 1),
      transform 0.2s cubic-bezier(0.22, 1, 0.36, 1),
      box-shadow 0.25s cubic-bezier(0.22, 1, 0.36, 1);
  }

  /* Focus — keyboard & assistive tech */
  :focus {
    outline: none;
  }

  :focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
  }

  .nav__links a:focus-visible,
  main .btn:focus-visible,
  .contact__form input:focus-visible,
  .contact__form textarea:focus-visible,
  .contact__form select:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
  }

  /* Form — immediate visual feedback */
  .contact__form input,
  .contact__form textarea,
  .contact__form select,
  .booking-page .form-group input,
  .booking-page .form-group textarea,
  .booking-page .form-group select {
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
  }

  .contact__form input:focus,
  .contact__form textarea:focus,
  .contact__form select:focus,
  .booking-page .form-group input:focus,
  .booking-page .form-group textarea:focus,
  .booking-page .form-group select:focus {
    box-shadow: 0 0 0 1px rgba(201, 168, 76, 0.32);
  }

  /* Narrow viewports — safe-area & overflow guard */
  .container {
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
  }

  .hero__title,
  .section-title {
    overflow-wrap: anywhere;
    hyphens: auto;
  }
}

/* Booking wizard — mobile-only perf tweaks */
@media (max-width: 991px) {
  .booking-page .header--scrolled {
    background: rgba(10, 10, 10, 0.97);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .booking-progress-mobile {
    background: rgba(10, 10, 10, 0.97);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

@media (max-width: 991px) and (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  [data-animate] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    will-change: auto !important;
  }

  main img[loading="lazy"]:not(.is-loaded) {
    opacity: 1;
  }

  .product-brands__card,
  .ceramic-package,
  .trust-card,
  main .btn:not(.nav__cta) {
    transition: none !important;
  }
}