/* DNK — motion: scroll reveal, stagger, image reveal, hover.
 * State di-set oleh motion.js lewat atribut data-*:
 *   data-m="up|fade|img|line|kb"  jenis animasi
 *   data-md="1..10"                urutan stagger (x 90ms)
 *   data-m-in                      elemen sudah masuk layar -> animasi masuk
 *   data-m-done                    animasi masuk selesai (delay dihapus supaya hover responsif)
 * Semua state tersembunyi hanya aktif kalau <html> punya class .m-on (di-set motion.js),
 * jadi kalau JS gagal / reduced motion, konten tetap tampil normal.
 *
 * PENTING: semua `transition*` hanya dipasang pada [data-m-in].
 * Runtime React sudah menghitung style elemen (tampil) sebelum motion.js menandainya.
 * Kalau transition sudah aktif saat ditandai, browser menganimasikan tampil -> tersembunyi,
 * lalu langsung dibalik, sehingga animasi hero tidak terlihat. Tanpa transition di keadaan
 * awal, elemen langsung tersembunyi (instan) dan hanya animasi masuk yang terlihat. */

html { scroll-behavior: smooth; scroll-padding-top: 72px; }

/* Keadaan awal (sebelum masuk layar) — tanpa transition */
.m-on [data-m="up"]:not([data-m-in])   { opacity: 0; transform: translate3d(0, 32px, 0); }
.m-on [data-m="fade"]:not([data-m-in]) { opacity: 0; }
.m-on [data-m="img"]:not([data-m-in])  { clip-path: inset(100% 0 0 0); }
.m-on [data-m="line"]:not([data-m-in]) { transform: scaleX(0); }
.m-on [data-m="kb"]:not([data-m-in])   { transform: scale(1.12); }

.m-on [data-m="line"] { transform-origin: left center; }

/* Animasi masuk */
.m-on [data-m-in] {
  transition-property: opacity, transform, clip-path, box-shadow;
  transition-duration: 0.9s;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
.m-on [data-m="img"][data-m-in]  { clip-path: inset(0 0 0 0); transition-duration: 1.2s; }
.m-on [data-m="line"][data-m-in] { transition-duration: 1s; }
.m-on [data-m="kb"][data-m-in]   { transition-duration: 2.8s; transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }

/* Stagger */
.m-on [data-m-in][data-md="1"]  { transition-delay: 90ms; }
.m-on [data-m-in][data-md="2"]  { transition-delay: 180ms; }
.m-on [data-m-in][data-md="3"]  { transition-delay: 270ms; }
.m-on [data-m-in][data-md="4"]  { transition-delay: 360ms; }
.m-on [data-m-in][data-md="5"]  { transition-delay: 450ms; }
.m-on [data-m-in][data-md="6"]  { transition-delay: 540ms; }
.m-on [data-m-in][data-md="7"]  { transition-delay: 630ms; }
.m-on [data-m-in][data-md="8"]  { transition-delay: 720ms; }
.m-on [data-m-in][data-md="9"]  { transition-delay: 810ms; }
.m-on [data-m-in][data-md="10"] { transition-delay: 900ms; }
.m-on [data-m-done] { transition-delay: 0s !important; }

/* Hover: gambar layanan zoom halus di dalam bingkainya.
 * scale(1.05) + clip inset 2.381% => area tampak tetap seukuran aslinya (1.05 x (1 - 2x0.02381) = 1) */
.m-on [data-m-hover] > [data-m-done] { transition-duration: 0.7s; }
.m-on [data-m-hover]:hover > [data-m-done] {
  transform: scale(1.05);
  clip-path: inset(2.381% 2.381% 2.381% 2.381%);
}

/* Hover: kartu Values dapat garis aksen emas di atas */
.m-on [data-m-card][data-m-done] { transition-duration: 0.35s; }
.m-on [data-m-card]:hover { box-shadow: inset 0 3px 0 #c8862f; }

/* Perubahan warna hover link/tombol jadi halus (sebelumnya langsung ganti) */
a { transition: color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Sebelum motion.js jalan (class m-pre dari script inline di <head>): hero sudah tersembunyi
 * dengan keadaan awal yang sama, supaya tidak berkedip tampil lalu hilang. */
.m-pre .hero > img { transform: scale(1.12); }
.m-pre .hero-content > *,
.m-pre .hero-strip > * { opacity: 0; transform: translate3d(0, 32px, 0); }