/* ============================================================
   MOBILE / TOUCH = BENAR-BENAR STATIS TOTAL (final v3).
   Audit menyeluruh: mematikan SEMUA sumber gerakan visual —
   CSS animation, transition, canvas rAF, scroll-reveal,
   background-attachment:fixed, hero-rise, shine, smooth-scroll.
   Aktif di layar ≤1024px ATAU perangkat touch (pointer:coarse).
   Desktop besar (>1024px, pointer halus) = animasi penuh, 0 perubahan.
   ============================================================ */

/* ================= DESKTOP: GPU-layer blob (anti-jank) ================= */
@media (min-width: 1025px) and (pointer: fine) {
  .blob {
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
  }
}

/* ================= MOBILE / TOUCH: STATIS TOTAL ================= */
@media (max-width: 1024px), (pointer: coarse) {

  /* 1. Matikan SEMUA animasi & transisi di seluruh elemen */
  *, *::before, *::after {
    animation: none !important;
    animation-play-state: paused !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }

  /* 2. background-attachment:fixed → scroll (INI biang getar saat scroll di HP,
     bukan radial-gradient-nya). Pertahankan gradient pink cantik dari base,
     cuma buat ikut scroll normal supaya tidak repaint tiap frame. */
  html, body {
    background-attachment: scroll !important;
  }

  /* 3. scroll-behavior halus → instan (hindari efek gerak scroll) */
  html { scroll-behavior: auto !important; }

  /* 4. Canvas kelopak sakura: sembunyikan (loop rAF full-screen = repaint berat) */
  .sakura-canvas {
    display: none !important;
  }

  /* 5. Scroll-reveal: paksa tampil statis (tanpa translateY/opacity transition) */
  .reveal, .reveal-scale,
  .reveal-d1, .reveal-d2, .reveal-d3, .reveal-d4, .reveal-d5 {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  /* 6. hero-rise: tampil langsung tanpa animasi masuk */
  .hero-rise, .hero-rise-d2 {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  /* 7. floating-order (tombol melayang): tampil statis, tanpa fade/scale */
  .floating-order {
    transition: none !important;
    transform: none !important;
  }

  /* 8. Matikan backdrop-filter (blur real-time = repaint berat saat scroll) */
  .navbar, .nav-scrim,
  .hero-badge, .hero-fact, .hero-chip,
  .product-category,
  .info-card, .feature-card, .step-card,
  .cta-eyebrow, .social-card {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  /* 9. Paksa elemen animasi ke posisi diam (hapus transform sisa dari animasi).
     CATATAN: .blob & .footer-glow TIDAK di-filter:none — biarkan blur-nya
     supaya bulatan tetap tampil lembut seperti desain. Cukup matikan GERAK. */
  .anim-wa, .anim-ig, .anim-tiktok, .anim-grab, .anim-fb,
  .anim-brand, .anim-sakura-spin,
  .about-deco, .testimonial-placeholder-icon,
  .testi-invite-petal-1, .testi-invite-petal-2, .testi-star,
  .cta-deco-sakura,
  .brand-mark, .footer-logo,
  .product-shine {
    transform: none !important;
    filter: none !important;
  }

  /* 9b. Bulatan pink (blob, glow, mochi): TETAP TAMPIL, cuma diam + isolasi
     jadi layer sendiri (translateZ) supaya blur tidak repaint saat scroll. */
  .blob, .blob-1, .blob-2, .blob-3, .footer-glow,
  .mochi-a, .mochi-b, .mochi-c, .mochi-shape,
  .cta-deco-mochi, .cta-deco-mochi-1, .cta-deco-mochi-2, .cta-deco-mochi-3 {
    animation: none !important;
    transform: translateZ(0) !important;
    will-change: auto !important;
    backface-visibility: hidden !important;
  }
}

/* ================= Fallback class dari JS (browser HP lawas) ================= */
html.is-mobile *, html.is-mobile *::before, html.is-mobile *::after {
  animation: none !important;
  animation-play-state: paused !important;
  transition: none !important;
}
html.is-mobile .sakura-canvas { display: none !important; }
html.is-mobile .blob,
html.is-mobile .blob-1, html.is-mobile .blob-2, html.is-mobile .blob-3,
html.is-mobile .footer-glow,
html.is-mobile .mochi-a, html.is-mobile .mochi-b, html.is-mobile .mochi-c,
html.is-mobile .mochi-shape,
html.is-mobile .cta-deco-mochi,
html.is-mobile .cta-deco-mochi-1, html.is-mobile .cta-deco-mochi-2, html.is-mobile .cta-deco-mochi-3 {
  animation: none !important;
  transform: translateZ(0) !important;
  will-change: auto !important;
  backface-visibility: hidden !important;
}
html.is-mobile .cta-deco::after {
  display: none !important;
}
html.is-mobile body {
  background-attachment: scroll !important;
}
html.is-mobile .reveal,
html.is-mobile .reveal-scale,
html.is-mobile .hero-rise { opacity: 1 !important; transform: none !important; }

/* ================= prefers-reduced-motion: statis penuh ================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .sakura-canvas { display: none !important; }
  body { background-attachment: scroll !important; }
  .reveal, .reveal-scale, .hero-rise { opacity: 1 !important; transform: none !important; }
}