/* Lapisan gerak Moovon — dimuat setelah premium.css.
   Aktif hanya kalau <html class="js"> (diset motion.js / skrip inline), jadi tanpa JS atau
   dengan prefers-reduced-motion konten tetap tampil penuh. */

/* Elemen yang muncul saat digulir: naik + memudar, bertahap per kelompok. */
.js [data-mv]{opacity:0;transform:translateY(22px);
  transition:opacity .75s cubic-bezier(.2,.7,.2,1),transform .75s cubic-bezier(.2,.7,.2,1);
  transition-delay:var(--d,0s);will-change:opacity,transform}
.js [data-mv].mv-in{opacity:1;transform:none}

/* Kartu: naik sedikit saat disentuh kursor / jari. */
.unit,.lyn,.ct-card,.faq-item{transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s,border-color .35s}
@media (hover:hover){
  .unit:hover,.lyn:hover,.ct-card:hover{transform:translateY(-4px)}
  .unit:hover .unit-foto img{transform:scale(1.04)}
}
.unit-foto img{transition:transform .8s cubic-bezier(.2,.7,.2,1)}

/* Tombol: tekan terasa, panah/ikon bergerak sedikit. */
.btn,.tel,.tab,.pill span{transition:transform .25s cubic-bezier(.2,.7,.2,1),background .25s,box-shadow .25s}
.btn:active,.tel:active,.tab:active{transform:scale(.97)}
@media (hover:hover){.btn:hover,.tel:hover{transform:translateY(-2px)}}

/* Garis kicker / judul: garis emas menyapu saat muncul. */
.js .kicker[data-mv]::before{transform-origin:left;transform:scaleX(0);transition:transform .9s .15s cubic-bezier(.2,.7,.2,1)}
.js .kicker[data-mv].mv-in::before{transform:scaleX(1)}

/* Hero: teks masuk berurutan saat halaman dibuka. */
@keyframes mvNaik{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.js .hero h1{animation:mvNaik .9s cubic-bezier(.2,.7,.2,1) both}
.js .hero .kicker{animation:mvNaik .7s .05s cubic-bezier(.2,.7,.2,1) both}
.js .hero p{animation:mvNaik .9s .18s cubic-bezier(.2,.7,.2,1) both}
.js .hero .btn,.js .hero .pills{animation:mvNaik .9s .3s cubic-bezier(.2,.7,.2,1) both}

/* Ambient: lampu emas lembut bernapas di belakang hero (hanya dekorasi). */
@keyframes mvNapas{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:.9;transform:scale(1.06)}}
.hero{position:relative;isolation:isolate}
.js .hero::before{content:"";position:absolute;z-index:-1;inset:-10% -10% auto auto;width:min(560px,80vw);height:min(560px,80vw);
  background:radial-gradient(closest-side,rgba(255,204,0,.18),transparent);pointer-events:none;animation:mvNapas 7s ease-in-out infinite}

/* Ponsel/tablet: gerak lebih halus, tanpa efek hover. */
@media (max-width:640px){
  .js [data-mv]{transform:translateY(14px)}
}

@media (prefers-reduced-motion:reduce){
  .js [data-mv],.js .hero h1,.js .hero p,.js .hero .kicker,.js .hero .btn,.js .hero .pills{opacity:1;transform:none;animation:none;transition:none}
  .js .kicker[data-mv]::before{transform:scaleX(1);transition:none}
  .js .hero::before{animation:none}
  .unit,.lyn,.ct-card,.btn,.tel,.tab,.unit-foto img{transition:none}
  .unit:hover,.lyn:hover,.ct-card:hover,.btn:hover,.tel:hover{transform:none}
}