/* ================================================================
   Artivaz — Mobile Performance & UI Refinements
   Mobile-first overrides, GPU-safe animations, touch enhancements
   ================================================================ */

/* ─────────────────────────────────────
   GPU-COMPOSITED SKELETON PULSE
   (uses only opacity — no paint cost)
   ───────────────────────────────────── */
@keyframes skeleton-mobile-pulse {
  0%   { opacity: 0.55; }
  100% { opacity: 1; }
}

/* ================================================================
   PERFORMANCE HARDENING — ALL MOBILE DEVICES (≤ 768px)
   ================================================================ */
@media (max-width: 768px) {

  /* 1. Simplified, flat body background */
  body {
    background: #fbf6f0 !important;
    overscroll-behavior-y: contain;
  }

  /* 2. Disable ALL backdrop filters — major GPU drain on mid-range */
  .nav-wrap,
  .quick-view,
  .hero-badge,
  .btn-ghost-light,
  .overlay-actions a,
  .overlay-actions button {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Ensure nav is fully opaque when backdrop-filter is off */
  .nav-wrap {
    background: rgba(255, 251, 246, 0.98) !important;
  }

  /* 3. Disable GPU-intensive infinite glow animations */
  .section-new-arrivals-highlight .container {
    animation: none !important;
    box-shadow: 0 8px 20px rgba(76,45,24,0.09) !important;
  }

  /* 4. Page loader art elements — disable on mobile for speed */
  .art-element {
    display: none !important;
  }

  /* 5. Hero shimmer line — minimal */
  .hero::after {
    opacity: 0.5;
  }

  /* 6. Hero badge — position adjust for seamless header */
  .hero-badge {
    animation: none !important;
    opacity: 0.92;
    top: 98px !important; /* Shift below normal capsule */
  }

  /* 7. Replace skeleton pulse with opacity-only animation (GPU composited) */
  .skeleton-media,
  .skeleton-text,
  .skeleton-chip,
  .quick-media-main,
  .quick-thumb {
    background-color: #e8d9c8 !important;
    animation: skeleton-mobile-pulse 1.3s ease-in-out infinite alternate !important;
    will-change: opacity;
  }

  /* 8. Product card — simpler hover, no GPU-intensive transform */
  .product-card:hover {
    transform: none !important;
    box-shadow: 0 4px 12px rgba(68,45,26,0.1) !important;
  }

  /* 9. Simplified card box-shadows */
  .product-card {
    box-shadow: 0 2px 8px rgba(68,45,26,0.06) !important;
    transition: opacity 0.18s ease !important;
  }

  /* 10. Overlay actions — Only visible when touch-active class is present */
  .product-card.touch-active .overlay-actions {
    opacity: 1 !important;
    transform: translateY(0) !important;
    transition: none !important;
  }

  /* 11. Category slider — native snap-scroll (no JS marquee on mobile) */
  .category-slider-track {
    animation: none !important;
    transform: none !important;
    width: auto !important;
    padding: 6px 14px !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
  }
  .category-slider-wrap {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;
    cursor: default !important;
  }
  .category-slide-pill {
    scroll-snap-align: start;
    transform: none !important;
    flex-shrink: 0;
  }
  .category-slide-pill:hover {
    transform: none !important;
  }

  /* 12. Trust strip — faster, simpler animation */
  .trust-strip-track {
    animation: trust-marquee 22s linear infinite !important;
  }

  /* 13. Video gallery cards — no transform hover */
  .video-gallery-card:hover {
    transform: none !important;
    box-shadow: 0 4px 12px rgba(68,45,26,0.08) !important;
  }

  /* 14. Review cards — no transform hover */
  .review-card:hover {
    transform: none !important;
    box-shadow: 0 4px 12px rgba(68,45,26,0.08) !important;
  }

  /* 15. Brand value cards — no transform on mobile */
  .brand-value-card:hover {
    transform: none !important;
  }

  /* 16. Product grid — force GPU layer for smooth scroll */
  .product-grid {
    will-change: initial;
    transform: translateZ(0);
    contain: layout;
  }

  /* 17. Sections below fold — paint isolation */
  .section + .section {
    content-visibility: auto;
    contain-intrinsic-size: 0 540px;
  }

  /* 18. Simplified box-shadows across the board */
  .category-slider-wrap {
    box-shadow: 0 2px 8px rgba(73,48,30,0.06) !important;
  }
  .nav-wrap {
    box-shadow: 0 2px 8px rgba(70,44,23,0.05) !important;
  }
  .review-card {
    box-shadow: 0 2px 6px rgba(68,45,26,0.06) !important;
  }

  /* 19. Button hover transforms — disable on mobile */
  .btn-accent:hover,
  .btn-ghost:hover,
  .btn-ghost-light:hover,
  .btn-pre-order:hover {
    transform: none !important;
  }

  /* 20. Floating cart — hidden, bottom nav handles it (now hidden) */
  .floating-cart {
    display: none !important;
  }

  /* 22. Logo stroke animation — keep as-is (SVG, very cheap) */

  /* 22. Notice button — simpler */
  .notice-fixed-btn:hover {
    transform: scale(1.06) !important;
    box-shadow: 0 8px 20px rgba(201,120,76,0.35) !important;
  }

  /* 23. Tagline letter-spacing — reduce for narrow screens */
  .loader-tagline {
    letter-spacing: 0.12em !important;
    font-size: 0.76rem !important;
  }
}

/* ================================================================
   NARROW PHONES (≤ 480px) — Extra refinements
   ================================================================ */
@media (max-width: 480px) {

  /* Reduce label font complexity */
  .po-meta-label,
  .po-counts span {
    font-size: 0.72rem !important;
    gap: 4px !important;
    margin-top: 2px !important;
    letter-spacing: 0 !important;
  }

  /* Hero: clear normal sticky nav */
  .hero-copy {
    padding-top: 100px !important;
    padding-bottom: 2.8rem !important;
  }

  /* Product grid: minimum gap */
  .product-grid {
    column-gap: 8px !important;
    row-gap: 8px !important;
  }

  /* Section padding: tighter on tiny screens */
  .section-new-arrivals-highlight .container,
  .section-pre-order-highlight .container {
    padding: 18px 14px !important;
  }

  /* Chip: never overflow */
  .chip {
    max-width: 80px !important;
    font-size: 0.6rem !important;
  }

  /* Review images: smaller on tiny screens */
  .review-image {
    height: 150px !important;
  }

  /* Trust strip text: smaller */
  .trust-chip {
    font-size: 0.78rem !important;
    padding: 0 18px !important;
  }

  /* Brand story margin */
  .section-brand-story {
    margin: 0 !important;
    border-radius: var(--radius-lg) !important;
  }

  /* Bottom nav labels: very small */
  .mobile-nav-item span:not(.mbn-cart-wrapper):not(.mbn-cart-badge) {
    font-size: 0.6rem !important;
  }
}

/* ================================================================
   TOUCH DEVICES — Universal touch refinements (hover: none)
   ================================================================ */
@media (hover: none) {

  /* Only visible when touch-active class is present on the card */
  .product-card.touch-active .overlay-actions {
    opacity: 1 !important;
    transform: translateY(0) !important;
  }

  /* Minimum tap targets — 44px (Apple HIG standard) */
  .nav-links a {
    padding: 14px 16px !important;
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  .btn { min-height: 46px; }
  .mobile-nav-item { min-height: 44px; }
  .category-pill-filter { min-height: 44px; }

  /* Product media: no scale on "hover" */
  .product-card:hover .product-media img {
    transform: none !important;
  }

  /* Video gallery: no scale */
  .video-gallery-card:hover .video-thumb-img {
    transform: none !important;
  }

  /* Play button: always visible clearly */
  .video-play-btn {
    transform: scale(1.05) !important;
  }

  /* Quick thumb btn: bigger touch area */
  .quick-thumb-btn {
    padding: 4px !important;
  }

  /* Category pill: easier to tap */
  .category-slide-pill {
    padding: 12px 20px !important;
    min-height: 44px;
  }
}

/* ================================================================
   REDUCED MOTION — Accessibility
   ================================================================ */
@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;
  }

  /* Stop all marquees */
  .trust-strip-track,
  .category-slider-track {
    animation: none !important;
  }

  /* Stop loader animation */
  .art-logo-text { animation: none !important; stroke-dashoffset: 0 !important; fill: rgba(47,36,29,1) !important; }
  .loader-tagline { animation: none !important; opacity: 1 !important; transform: none !important; }
}