/* nd-motion.css — animasi & interaksi.

   ATURAN: hanya `transform` dan `opacity` yang dianimasikan. Keduanya ditangani
   compositor, jadi tidak memicu layout/paint ulang — penting karena sebagian besar
   pengunjung memakai HP kelas bawah.

   SEMUA durasi & easing diambil dari token. Konsekuensinya, blok
   prefers-reduced-motion di nd-tokens.css (yang mengubah 4 token durasi jadi 1ms)
   otomatis menjinakkan file ini TANPA satu pun selector tambahan — dan tanpa
   menyentuh animasi milik video player, yang memakai literal durasinya sendiri. */

/* ============================================================
   1. SKELETON SAAT MEMUAT
   ============================================================ */

body.nd-ui .nd-skel {
  position: relative;
  overflow: hidden;
  background: var(--nd-skel-base, var(--nd-s2));
  border-radius: var(--nd-r-3);
}
body.nd-ui .nd-skel::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg,
    transparent 0%,
    var(--nd-skel-sheen, rgba(255, 255, 255, .06)) 50%,
    transparent 100%);
  animation: nd-shimmer var(--nd-dur-loop-shimmer, 1.4s) var(--nd-ease-out) infinite;
}
@keyframes nd-shimmer { to { transform: translateX(100%); } }

/* Poster yang belum punya gambar menampilkan denyut halus, bukan kotak mati. */
body.nd-ui .card .poster-wrap:not(:has(img)):not(:has(.poster-fallback)) {
  background: var(--nd-s2);
  animation: nd-pulse var(--nd-dur-loop-shimmer, 1.4s) var(--nd-ease-out) infinite alternate;
}
@keyframes nd-pulse { from { opacity: .7; } to { opacity: 1; } }

/* ============================================================
   2. MUNCUL SAAT DI-SCROLL
   Dibuat dengan animation-timeline bila browser mendukung; kalau tidak,
   elemen tampil normal tanpa JS apa pun. Tidak ada IntersectionObserver,
   tidak ada risiko konten tak terlihat kalau JS gagal.
   ============================================================ */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    body.nd-ui .provider-home-section,
    body.nd-ui .watch-history-rail {
      animation: nd-reveal linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 42%;
    }
  }
}
@keyframes nd-reveal {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* ============================================================
   3. RAIL
   ============================================================ */

body.nd-ui .provider-home-rail { scroll-behavior: smooth; }

/* Tombol prev/next rail: umpan balik tekan yang terasa responsif. */
body.nd-ui .provider-rail-nav,
body.nd-ui .provider-home-page-btn,
body.nd-ui .pager-link {
  transition: transform var(--nd-dur-1) var(--nd-ease-out),
              background-color var(--nd-dur-1) var(--nd-ease-out),
              border-color var(--nd-dur-1) var(--nd-ease-out);
}
body.nd-ui .provider-rail-nav:active,
body.nd-ui .provider-home-page-btn:active:not(:disabled),
body.nd-ui .pager-link:active { transform: scale(.94); }

/* ============================================================
   4. BOTTOM NAV & TOMBOL
   ============================================================ */

body.nd-ui .nd-bn-item { transition: color var(--nd-dur-1) var(--nd-ease-out); }
body.nd-ui .nd-bn-item:active { transform: scale(.93); }

body.nd-ui .nd-pv-btn:active,
body.nd-ui .nd-theme-btn:active { transform: scale(.96); }

/* ============================================================
   5. PANEL & SHEET
   ============================================================ */

body.nd-ui .provider-home-picker-sheet {
  transition: transform var(--nd-dur-2) var(--nd-ease-spring),
              opacity var(--nd-dur-2) var(--nd-ease-out);
}

/* Hormati pengguna yang meminta gerak dikurangi: matikan gerak sisa yang
   tidak diatur token durasi (scroll halus & transform tekan). */
@media (prefers-reduced-motion: reduce) {
  body.nd-ui .provider-home-rail { scroll-behavior: auto; }
  body.nd-ui .provider-rail-nav:active,
  body.nd-ui .provider-home-page-btn:active:not(:disabled),
  body.nd-ui .pager-link:active,
  body.nd-ui .nd-bn-item:active,
  body.nd-ui .nd-pv-btn:active,
  body.nd-ui .nd-theme-btn:active { transform: none; }
}