/* ==============================================================
   NOBARGASI Motion Layer — assets/css/motion.css
   Tambahan animasi di atas tv.css. Aman dihapus kapan saja.
   Dimatikan otomatis untuk prefers-reduced-motion & body.comfort-mode.
   ============================================================== */
:root{
  --nbm-ease: cubic-bezier(.16,1,.3,1);
  --nbm-spring: cubic-bezier(.34,1.56,.64,1);
}

/* 1. Scroll reveal: baris & kartu muncul bertahap saat discroll */
.nbm-on .row-shell.nbm-row{opacity:0;transform:translate3d(0,28px,0);transition:opacity .6s var(--nbm-ease),transform .7s var(--nbm-ease)}
.nbm-on .row-shell.nbm-row.nbm-in{opacity:1;transform:none}
/* tv.css mengunci transform/transition .movie-card, jadi pakai properti `translate` + !important */
.nbm-on .row-shell.nbm-row .movie-card,
.nbm-on .row-shell.nbm-row .top10-item{opacity:0;translate:40px 0}
.nbm-on .row-shell.nbm-row.nbm-in .movie-card,
.nbm-on .row-shell.nbm-row.nbm-in .top10-item{opacity:1;translate:0 0;transition:opacity .55s var(--nbm-ease) calc(var(--nbm-i,0) * 40ms + 60ms),translate .75s var(--nbm-ease) calc(var(--nbm-i,0) * 40ms + 60ms) !important}
.nbm-on .row-shell.nbm-row.nbm-in .movie-card.nbm-pre,
.nbm-on .row-shell.nbm-row.nbm-in .top10-item.nbm-pre{opacity:0;translate:40px 0;transition:none !important}
.nbm-on .row-shell.nbm-row.nbm-in .movie-card.nbm-done,
.nbm-on .row-shell.nbm-row.nbm-in .top10-item.nbm-done{transition:none !important}
.top10-item .movie-card{opacity:1 !important;translate:none !important}

/* 2. Poster 3D tilt + kilau cahaya mengikuti kursor (desktop) */
.nbm-tilt .poster-container{transform-style:preserve-3d;will-change:transform}
.nbm-tilt .movie-card.nbm-hover .poster-container{
  transform:perspective(900px) rotateX(var(--nbm-rx,0deg)) rotateY(var(--nbm-ry,0deg)) scale(1.07) translateY(-6px) !important;
  transition:transform .18s ease-out,box-shadow .4s ease !important;
  box-shadow:0 26px 50px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.18) !important;
}
.nbm-tilt .movie-card .poster-container{transition:transform .6s var(--nbm-ease),box-shadow .5s ease}
.nbm-glare{position:absolute;inset:0;pointer-events:none;z-index:4;opacity:0;transition:opacity .35s ease;
  background:radial-gradient(circle at var(--nbm-gx,50%) var(--nbm-gy,0%),rgba(255,255,255,.28),rgba(255,255,255,0) 55%);mix-blend-mode:soft-light}
.movie-card.nbm-hover .nbm-glare{opacity:1}

/* 3. Ambient light: backdrop film yang disorot memendar di belakang barisnya */
.nbm-amb{position:absolute;top:0;bottom:0;left:0;width:min(760px,75%);z-index:-1;pointer-events:none;opacity:0;
  transition:opacity .8s ease,left .7s var(--nbm-ease);
  -webkit-mask-image:radial-gradient(closest-side,#000 10%,transparent 100%);mask-image:radial-gradient(closest-side,#000 10%,transparent 100%)}
.nbm-amb i{position:absolute;inset:0;background-size:cover;background-position:center;filter:blur(48px) saturate(1.7);transform:scale(1.25)}
.nbm-amb.is-on{opacity:.65}
.row-shell{isolation:isolate}

/* 4. Hero parallax (pakai properti `translate` supaya tidak bentrok dengan Ken Burns) */
.nbm-on #heroContent{translate:0 var(--nbm-hero-y,0px)}
.nbm-on .hero-copy{translate:0 var(--nbm-copy-y,0px);opacity:var(--nbm-copy-o,1)}

/* 5. Tab navigasi: pill putih yang meluncur */
.nbm-ind{position:absolute;top:4px;bottom:4px;left:0;width:0;border-radius:999px;background:var(--nb-text,#f5f5f7);z-index:0;
  transition:transform .55s var(--nbm-spring),width .55s var(--nbm-spring),opacity .3s;pointer-events:none}
.nb-tabs.nbm-ind-ready .nb-tab{position:relative;z-index:1}
.nb-tabs.nbm-ind-ready .nb-tab.active,.nb-tabs.nbm-ind-ready .nb-tab.dplus-nav-active{background:transparent !important}

/* 6. Navigasi bawah HP: indikator meluncur + ikon memantul */
#mobileNav .nbm-ind{top:6px;bottom:6px;background:rgba(255,255,255,.12);border-radius:18px}
#mobileNav.nbm-ind-ready .mobile-nav-btn{position:relative;z-index:1}
#mobileNav .mobile-nav-btn.active svg,#mobileNav .mobile-nav-btn.dplus-nav-active svg{animation:nbmPop .5s var(--nbm-spring)}
@keyframes nbmPop{0%{transform:scale(.7) translateY(3px)}60%{transform:scale(1.18) translateY(-2px)}100%{transform:none}}

/* 7. Angka Top 10: kilatan cahaya lewat saat disorot */
.top10-item .netflix-number{background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.95) 50%,transparent 65%) no-repeat;background-size:250% 100%;background-position:150% 0;-webkit-background-clip:text;background-clip:text;transition:background-position .9s var(--nbm-ease),-webkit-text-stroke-color .3s}
.top10-item:hover .netflix-number{background-position:-60% 0}

/* 8. Tombol hero magnetis */
.nbm-mag{transition:translate .35s var(--nbm-ease)}

/* Matikan semua untuk pengguna yang tidak mau animasi */
@media (prefers-reduced-motion: reduce){
  .nbm-on .row-shell.nbm-row,.nbm-on .row-shell.nbm-row .movie-card,.nbm-on .row-shell.nbm-row .top10-item{opacity:1 !important;transform:none !important;transition:none !important}
  .nbm-amb,.nbm-glare{display:none}
  .nbm-on #heroContent,.nbm-on .hero-copy{translate:none;opacity:1}
  .nbm-ind{transition:none}
}
body.comfort-mode .nbm-amb,body.comfort-mode .nbm-glare{display:none}