/* =====================================================================
   SISTEM ANIMASI — Sekolah Bintang Madani
   =====================================================================

   Anggaran: tiga jenis animasi aktif per halaman, ditambah satu momen
   orkestrasi di section signature. Lebih dari itu halaman terasa gelisah.

     Tingkat 1  saat halaman dimuat, hanya di hero, sekali saja
     Tingkat 2  saat scroll, sudah ada sebagai .rv di tiap halaman unit
     Tingkat 3  interaksi kecil, murni CSS

   ATURAN YANG MENENTUKAN BENTUK BERKAS INI
   ----------------------------------------
   Kondisi AKHIR ditulis sebagai bawaan; kondisi awal hanya ditambahkan
   lewat kelas dari JavaScript. Urutannya sengaja begitu, bukan kebalikannya.
   Kalau kondisi awal yang jadi bawaan, satu skrip yang gagal jalan membuat
   seluruh hero tidak pernah muncul — halaman terbuka kosong dan pengunjung
   tidak punya cara tahu bahwa isinya sebenarnya ada.

   Hanya transform dan opacity yang dianimasikan. Menganimasikan height,
   top, left, width, atau box-shadow memaksa peramban menghitung ulang tata
   letak tiap frame, dan di ponsel kelas menengah hasilnya patah-patah.
   ===================================================================== */

/* =====================================================================
   TINGKAT 1 — hero saat halaman dimuat
   Eyebrow, judul, paragraf, tombol muncul berurutan berjeda 80ms.
   Seluruh rangkaian selesai di bawah 900ms, lalu halaman diam.
   ===================================================================== */
html.sbm-anim .uhero .eyebrow,
html.sbm-anim .uhero h1,
html.sbm-anim .uhero__lead,
html.sbm-anim .uhero__cta,
html.sbm-anim .uhero__chips {
  opacity: 0;
  transform: translateY(12px);
  animation: sbm-masuk .5s cubic-bezier(.22, 1, .36, 1) forwards;
}
html.sbm-anim .uhero .eyebrow { animation-delay: .04s }
html.sbm-anim .uhero h1       { animation-delay: .12s }
html.sbm-anim .uhero__lead    { animation-delay: .20s }
html.sbm-anim .uhero__cta     { animation-delay: .28s }
html.sbm-anim .uhero__chips   { animation-delay: .36s }

/* Foto hero: fade disertai skala turun dari 1.02, bukan naik dari 0.9.
   Gambar yang membesar dari kecil terbaca seperti iklan; yang mengendap
   dari sedikit lebih besar terbaca seperti foto yang sedang diletakkan. */
html.sbm-anim .uhero__art {
  opacity: 0;
  transform: scale(1.02);
  animation: sbm-foto .6s cubic-bezier(.22, 1, .36, 1) .16s forwards;
}

@keyframes sbm-masuk {
  to { opacity: 1; transform: none }
}
@keyframes sbm-foto {
  to { opacity: 1; transform: scale(1) }
}

/* =====================================================================
   TINGKAT 3 — interaksi kecil
   Murni CSS, tidak perlu JavaScript, jadi tetap bekerja seandainya
   skrip apa pun gagal dimuat.
   ===================================================================== */

/* 1. Kartu terangkat 2px saat disentuh kursor.
      Bayangannya memang menguat, tapi yang dianimasikan hanya transform;
      box-shadow diberi durasi terpisah dan tidak ikut dalam gerak utama. */
.pcard, .fcard, .unav__card, .tcard, .eks__item {
  transition: transform .18s cubic-bezier(.22, 1, .36, 1), box-shadow .18s ease;
}
@media (hover: hover) {
  .pcard:hover, .fcard:hover, .unav__card:hover,
  .tcard:hover, .eks__item:hover { transform: translateY(-2px) }
}

/* 2. Foto di dalam kartu membesar; kartunya sendiri diam.
      Pembesaran dikurung overflow:hidden milik pembungkusnya, sehingga
      yang tumbuh hanya gambarnya dan tata letak tidak bergeser. */
.fcard__ph, .gcell, .nw__thumb { overflow: hidden }
.fcard__ph img, .nw__thumb img {
  transition: transform .4s cubic-bezier(.22, 1, .36, 1);
  will-change: auto;
}
@media (hover: hover) {
  .fcard:hover .fcard__ph img,
  .nw__card:hover .nw__thumb img { transform: scale(1.04) }
}

/* 3. Tombol mengecil sedikit saat ditekan. Umpan balik sentuh yang
      dirasakan jari, bukan yang dilihat mata. */
.btn, .cta, button.btn { transition: transform .1s ease, background .2s ease, box-shadow .2s ease }
.btn:active, .cta:active { transform: scale(.98) }

/* 4. Tautan teks: garis bawah tumbuh dari kiri. */
.tautan-tumbuh {
  position: relative;
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1.5px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size .2s cubic-bezier(.22, 1, .36, 1);
}
.tautan-tumbuh:hover, .tautan-tumbuh:focus-visible { background-size: 100% 1.5px }

/* 5. Menu aktif ditandai garis yang bergeser, bukan yang muncul mendadak.
      Sudah ada di navigasi halaman unit lewat .nav__link::after; di sini
      hanya dipastikan durasinya seragam dengan sisanya. */
.nav__link::after { transition: transform .2s cubic-bezier(.22, 1, .36, 1) }

/* =====================================================================
   AKSESIBILITAS
   Ketika pengunjung meminta gerak dikurangi, seluruh animasi dimatikan
   dan elemen langsung tampil dalam kondisi akhirnya — bukan disembunyikan.
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  html.sbm-anim .uhero .eyebrow,
  html.sbm-anim .uhero h1,
  html.sbm-anim .uhero__lead,
  html.sbm-anim .uhero__cta,
  html.sbm-anim .uhero__chips,
  html.sbm-anim .uhero__art {
    opacity: 1;
    transform: none;
    animation: none;
  }
  .pcard, .fcard, .unav__card, .tcard, .eks__item,
  .fcard__ph img, .nw__thumb img, .btn, .cta,
  .tautan-tumbuh, .nav__link::after {
    transition: none;
  }
  .pcard:hover, .fcard:hover, .unav__card:hover,
  .tcard:hover, .eks__item:hover { transform: none }
  .fcard:hover .fcard__ph img,
  .nw__card:hover .nw__thumb img { transform: none }
}