/* ============================================================
   SCAFOLYA — LAPISAN GERAK (DEC-074)
   ------------------------------------------------------------
   Diimpor PALING AKHIR di main.css: hanya menambah gerak,
   tidak mengubah warna, ukuran, atau tata letak komponen.

   Aturan:
   - hanya transform, opacity, dan box-shadow yang dianimasikan
     (murah di Chromebook); tanpa kilau yang mengikuti kursor;
   - seluruhnya digerbangi .js-aktif (tanpa JavaScript tampilan
     tetap utuh) dan (hover: hover) untuk efek tunjuk;
   - prefers-reduced-motion: reduce mematikan semuanya.
   ============================================================ */

/* ---------- 1. Kelompok kartu ------------------------------- */
/* Semua kartu memakai transisi yang sama; nilai angkatnya diatur per kelompok di bawah. */

.js-aktif :is(
  .card,
  .kartu-aktivitas,
  .proses-kartu,
  .fading-kartu,
  .jaga li,
  .untuk-guru-langkah,
  .hero-stat li,
  .profil-meta li,
  .profil-kartu,
  .section-glass
) {
  position: relative;
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}

/* Tanpa sorot penunjuk dan tanpa sapuan kilau (DEC-075): kartu hanya terangkat,
   bayangannya menebal, dan tepinya menghangat. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  /* Angkat saat ditunjuk. Kartu halaman depan lebih tegas, kartu layar kerja lembut
     agar tidak mengganggu saat siswa mengetik. */
  .js-aktif .card:hover {
    transform: translate3d(0, -3px, 0);
    box-shadow: var(--shadow-glass-md);
  }

  .js-aktif :is(
    .proses-kartu,
    .fading-kartu,
    .jaga li,
    .untuk-guru-langkah,
    .hero-stat li,
    .section-glass
  ):hover {
    transform: translate3d(0, -6px, 0);
    box-shadow: var(--shadow-glass-lg);
  }

  .js-aktif .profil-meta li:hover {
    transform: translate3d(0, -2px, 0);
    box-shadow: var(--shadow-glass);
  }

  .js-aktif .page-beranda .kartu-aktivitas:not([data-state="terkunci"]):hover,
  .js-aktif .kartu-aktivitas:not([data-state="terkunci"]):hover,
  .js-aktif .menu-uji:not([data-state="terkunci"]):hover {
    transform: translate3d(0, -5px, 0);
    box-shadow: var(--shadow-glass-lg);
  }

  /* Ubin ikon dan nomor ikut hidup saat kartunya ditunjuk. */
  .js-aktif :is(.jaga li, .profil-meta li):hover .icon-tile,
  .js-aktif .proses-kartu:hover .proses-nomor,
  .js-aktif .untuk-guru-langkah:hover .untuk-guru-nomor,
  .js-aktif .kartu-aktivitas:not([data-state="terkunci"]):hover .kartu-aktivitas-nomor,
  .js-aktif .menu-uji:not([data-state="terkunci"]):hover .menu-uji-lencana {
    transform: scale(1.08) rotate(-2deg);
  }

  .js-aktif .hero-stat li:hover .hero-stat-ikon { transform: translate3d(0, -2px, 0) scale(1.1); }
}

.js-aktif :is(.icon-tile, .proses-nomor, .untuk-guru-nomor, .kartu-aktivitas-nomor, .menu-uji-lencana, .hero-stat-ikon) {
  transition: transform var(--dur-base) var(--ease-spring);
}

/* Tekan: seluruh kartu ikut memberi umpan balik, bukan hanya .card-interactive. */
.js-aktif :is(.proses-kartu, .fading-kartu, .jaga li, .untuk-guru-langkah, .hero-stat li):active {
  transform: scale(var(--press-scale-lg));
}

/* ---------- 2. Masuk saat digulir --------------------------- */
/* Menumpang sistem .reveal (ui.js): kartu naik SEKALIGUS mengecil sedikit. */

.js-aktif :is(.proses-kartu, .fading-kartu, .jaga li, .untuk-guru-langkah, .hero-stat li, .profil-kartu, .card).reveal:not(.is-revealed) {
  transform: translate3d(0, var(--reveal-shift), 0) scale(0.97);
}

/* Garis kecil pada eyebrow "melar" saat bagiannya muncul. */
.js-aktif .reveal .eyebrow::before,
.js-aktif .section-head.reveal .eyebrow::before {
  transition: transform var(--dur-slower) var(--ease-decelerate) 120ms;
  transform-origin: left center;
}

.js-aktif .reveal:not(.is-revealed) .eyebrow::before { transform: scaleX(0.1); }

/* Meter bantuan terisi dari kiri setelah kartunya muncul, satu per satu. */
.js-aktif .fading-kartu .fading-bar {
  transform-origin: left center;
  transition: transform var(--dur-slower) var(--ease-decelerate);
}

.js-aktif .fading-kartu.reveal:not(.is-revealed) .fading-bar { transform: scaleX(0); }
.js-aktif .fading-kartu .fading-bar:nth-child(2) { transition-delay: 110ms; }
.js-aktif .fading-kartu .fading-bar:nth-child(3) { transition-delay: 220ms; }

/* Nomor tahap memantul masuk. */
.js-aktif .proses-kartu.reveal:not(.is-revealed) .proses-nomor {
  transform: scale(0.4);
  opacity: 0;
}

.js-aktif .proses-kartu .proses-nomor {
  transition: transform var(--dur-slow) var(--ease-spring) 140ms,
              opacity var(--dur-base) var(--ease-out) 140ms;
}

/* Foto pengembang mengendur dari sedikit membesar. */
.js-aktif .profil-kartu .profil-kartu-panel img {
  transition: transform var(--dur-slower) var(--ease-decelerate);
}

.js-aktif .profil-kartu.reveal:not(.is-revealed) .profil-kartu-panel img { transform: scale(1.08); }

/* KP-190: isi hero (judul, teks, tombol, dan kartu pengembang bentuk Kartu di hero) masuk dengan gerak yang sama seperti
   .reveal, tetapi lewat animasi CSS yang mulai di gambar pertama, bukan menunggu ui.js. Dengan .reveal, judul hero baru
   tampil sesudah seluruh HTML terbaca dan skrip berjalan, padahal judul itu yang terbesar di layar pertama ponsel. Ubin
   angka hero tetap .reveal karena angkanya dihitung naik oleh animasi.js. Gerak dikurangi: langsung tampil. */
@media (prefers-reduced-motion: no-preference) {
  .hero-masuk { animation: sf-hero-masuk var(--dur-reveal) var(--ease-decelerate) backwards; }
  .hero-masuk .eyebrow::before {
    transform-origin: left center;
    animation: sf-hero-garis var(--dur-slower) var(--ease-decelerate) 120ms backwards;
  }
}

@keyframes sf-hero-masuk { from { opacity: 0; transform: translate3d(0, var(--reveal-shift), 0); } }
@keyframes sf-hero-garis { from { transform: scaleX(0.1); } }

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .js-aktif .profil-kartu:hover .profil-kartu-panel img { transform: scale(1.04); }
}

/* ---------- 3. Butir kecil ---------------------------------- */

.js-aktif :is(.badge, .chip, .status) { transition: transform var(--dur-fast) var(--ease-out); }

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .js-aktif .profil-chip li:hover .badge,
  .js-aktif .proses-kartu:hover .proses-bentuk { transform: translate3d(0, -2px, 0); }
}

/* Tombol: ikon panah maju sedikit saat tombolnya ditunjuk. */
.js-aktif .btn .icon { transition: transform var(--dur-fast) var(--ease-out); }

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .js-aktif .btn:hover .icon:last-child:not(:first-child) { transform: translateX(3px); }
}

/* ---------- 3b. Beranda siswa (DEC-086) ---------------------
   Panel sapaan masuk bertahap, anak tangga tumbuh dari bawah, bintang giliran jatuh
   lalu melayang, sampul kartu mengendur dari sedikit membesar, bilah langkah terisi
   dari kiri, cincin giliran bernapas pelan, gembok bergoyang saat kartu terkunci
   diketuk, dan kartu yang baru terbuka memantul sekali. Tanpa kilau (DEC-075). */

.js-aktif .kartu-sampul-gambar img {
  transition: transform calc(var(--dur-reveal) * 1.5) var(--ease-decelerate);
}

.js-aktif :is(.kartu-aktivitas, .menu-uji).reveal:not(.is-revealed) .kartu-sampul-gambar img { transform: scale(1.12); }
.js-aktif :is(.kartu-aktivitas, .menu-uji)[data-state="terkunci"].reveal:not(.is-revealed) .kartu-sampul-gambar img { transform: scale(1.16); }

.js-aktif .kartu-langkah-bilah > span {
  transition: transform calc(var(--dur-reveal) * 1.8) var(--ease-decelerate) 380ms;
}

.js-aktif .kartu-langkah + .kartu-langkah .kartu-langkah-bilah > span { transition-delay: 640ms; }
.js-aktif .kartu-aktivitas.reveal:not(.is-revealed) .kartu-langkah-bilah > span { transform: scaleX(0); }

.js-aktif .kartu-aktivitas.reveal .kartu-aktivitas-nomor,
.js-aktif .menu-uji.reveal .menu-uji-lencana {
  transition: transform var(--dur-slower) var(--ease-spring) 180ms, opacity var(--dur-base) var(--ease-out) 180ms;
}

.js-aktif .kartu-aktivitas.reveal:not(.is-revealed) .kartu-aktivitas-nomor,
.js-aktif .menu-uji.reveal:not(.is-revealed) .menu-uji-lencana {
  opacity: 0;
  transform: scale(0.5) rotate(-12deg);
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .js-aktif :is(.kartu-aktivitas, .menu-uji):not([data-state="terkunci"]):hover .kartu-sampul-gambar img { transform: scale(1.06); }
  .js-aktif :is(.kartu-aktivitas, .menu-uji)[data-state="terkunci"]:hover .kartu-sampul-gembok { animation: sf-gembok-goyang 700ms var(--ease-out); }
}

:is(.kartu-aktivitas, .menu-uji).is-goyang .kartu-sampul-gembok { animation: sf-gembok-goyang 700ms var(--ease-out); }
.kartu-aktivitas.is-goyang .card-footer .btn,
.menu-uji.is-goyang .menu-uji-aksi .btn { animation: sf-guncang 420ms var(--ease-out); }

.kartu-aktivitas.is-baru-terbuka { animation: sf-kartu-terbuka 1000ms var(--ease-spring) both; }
.kartu-aktivitas.is-baru-terbuka .kartu-aktivitas-nomor { animation: sf-nomor-terbuka 1000ms var(--ease-spring) both; }

@media (prefers-reduced-motion: no-preference) {
  .js-aktif .kartu-aktivitas[data-giliran="true"]::after {
    animation: sf-giliran-napas 3.2s var(--ease-in-out) infinite alternate;
  }

  .js-aktif .beranda-sapa { animation: sf-sapa-pudar 520ms var(--ease-out) both; }
  .js-aktif .beranda-sapa::after { animation: sf-ambien-hero var(--dur-ambien-hero) var(--ease-in-out) infinite alternate; }
  .js-aktif .beranda-sapa-teks > * { animation: sf-sapa-naik 700ms var(--ease-decelerate) both; }
  .js-aktif .beranda-sapa-teks > :nth-child(1) { animation-delay: 80ms; }
  .js-aktif .beranda-sapa-teks > :nth-child(2) { animation-delay: 150ms; }
  .js-aktif .beranda-sapa-teks > :nth-child(3) { animation-delay: 220ms; }
  .js-aktif .beranda-sapa-alat { animation: sf-sapa-naik 700ms var(--ease-decelerate) 290ms both; }
  .js-aktif .sapa-kemajuan { animation: sf-sapa-naik 760ms var(--ease-decelerate) 200ms both; }

  .js-aktif .tangga-balok {
    animation: sf-tangga-tumbuh 760ms var(--ease-spring) both;
    animation-delay: calc(420ms + var(--urutan, 0) * 130ms);
  }

  .js-aktif .tangga-isi {
    animation: sf-pop var(--dur-slow) var(--ease-spring) both;
    animation-delay: calc(780ms + var(--urutan, 0) * 130ms);
  }

  .js-aktif .tangga-penanda {
    animation:
      sf-penanda-jatuh 700ms var(--ease-spring) calc(1250ms + var(--urutan, 0) * 130ms) both,
      sf-penanda-melayang 2.8s var(--ease-in-out) calc(1950ms + var(--urutan, 0) * 130ms) infinite alternate;
  }
}

@keyframes sf-sapa-pudar { from { opacity: 0; } to { opacity: 1; } }
@keyframes sf-sapa-naik { from { opacity: 0; transform: translate3d(0, 0.75rem, 0); } to { opacity: 1; transform: none; } }
@keyframes sf-tangga-tumbuh { from { opacity: 0; transform: scaleY(0.12); } to { opacity: 1; transform: none; } }
@keyframes sf-penanda-jatuh { from { opacity: 0; transform: translate3d(0, -1.4rem, 0) scale(0.5); } to { opacity: 1; transform: none; } }
@keyframes sf-penanda-melayang { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -0.3rem, 0); } }
@keyframes sf-giliran-napas { from { opacity: 0.25; } to { opacity: 1; } }

@keyframes sf-gembok-goyang {
  0%, 100% { transform: rotate(0); }
  20% { transform: rotate(-14deg); }
  40% { transform: rotate(11deg); }
  60% { transform: rotate(-7deg); }
  80% { transform: rotate(4deg); }
}

@keyframes sf-kartu-terbuka {
  0% { transform: none; }
  35% { transform: translate3d(0, -0.4rem, 0) scale(1.03); }
  100% { transform: none; }
}

@keyframes sf-nomor-terbuka {
  0% { transform: none; }
  40% { transform: scale(1.25) rotate(-10deg); }
  70% { transform: scale(0.95) rotate(4deg); }
  100% { transform: none; }
}

/* ---------- 4. Hormati preferensi kurangi gerak ------------- */

@media (prefers-reduced-motion: reduce) {
  .js-aktif :is(
    .card,
    .kartu-aktivitas,
    .proses-kartu,
    .fading-kartu,
    .jaga li,
    .untuk-guru-langkah,
    .hero-stat li,
    .profil-meta li,
    .profil-kartu,
    .section-glass,
    .icon-tile,
    .proses-nomor,
    .untuk-guru-nomor,
    .kartu-aktivitas-nomor,
    .menu-uji-lencana,
    .hero-stat-ikon,
    .badge,
    .chip,
    .status,
    .btn .icon,
    .fading-bar,
    .profil-kartu-panel img
  ) {
    transition: none;
    transform: none;
  }

  .js-aktif .kartu-langkah-bilah > span,
  .js-aktif .kartu-aktivitas.reveal:not(.is-revealed) .kartu-langkah-bilah > span,
  .js-aktif .kartu-aktivitas.reveal:not(.is-revealed) .kartu-aktivitas-nomor,
  .js-aktif .menu-uji.reveal:not(.is-revealed) .menu-uji-lencana {
    transition: none;
    transform: none;
    opacity: 1;
  }

  .js-aktif .kartu-sampul-gambar img { transition: none; }
  .js-aktif :is(.kartu-aktivitas, .menu-uji):not([data-state="terkunci"]) .kartu-sampul-gambar img { transform: none; }
  :is(.kartu-aktivitas, .menu-uji).is-goyang .kartu-sampul-gembok,
  .kartu-aktivitas.is-goyang .card-footer .btn,
  .menu-uji.is-goyang .menu-uji-aksi .btn,
  .kartu-aktivitas.is-baru-terbuka,
  .kartu-aktivitas.is-baru-terbuka .kartu-aktivitas-nomor { animation: none; }
}

/* ---------- 5. Pergantian tema (DEC-076; sinematik sejak DEC-165) --------------------
   View Transitions: lapisan tema baru disingkap dari tombol sebagai lingkaran bertepi lembut, yaitu topeng
   gradasi radial yang jari-jarinya (--tema-r, properti terdaftar) dianimasikan tema.js; sementara itu lapisan
   lama perlahan menjauh dan meredup dari titik tombol. Peramban tanpa properti terdaftar memakai clip-path
   lingkaran bertepi tegas (kelas tema-topeng tidak dipasang); tanpa View Transitions, peleburan warna. */

@property --tema-r { syntax: '<length>'; inherits: true; initial-value: 0px; }

::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

::view-transition-old(root) { z-index: 0; }
::view-transition-new(root) { z-index: 1; }

:root.tema-topeng::view-transition-new(root) {
  -webkit-mask-image: radial-gradient(circle at var(--tema-x, 50%) var(--tema-y, 50%), #000 calc(var(--tema-r) - var(--tema-tepi, 110px)), transparent var(--tema-r));
  mask-image: radial-gradient(circle at var(--tema-x, 50%) var(--tema-y, 50%), #000 calc(var(--tema-r) - var(--tema-tepi, 110px)), transparent var(--tema-r));
}

@keyframes sf-tema-menjauh {
  from { transform: scale(1); filter: brightness(1); }
  to { transform: scale(1.04); filter: brightness(0.78); }
}

:root.tema-transisi::view-transition-old(root) {
  transform-origin: var(--tema-x, 50%) var(--tema-y, 50%);
  animation: sf-tema-menjauh 900ms var(--ease-emphasized) forwards;
}

/* Selama transisi berjalan, kanvas partikel dibekukan agar tepi lingkaran tetap rapi. */
:root.tema-transisi .partikel { opacity: 0.45; }

/* Peramban tanpa View Transitions: warna dilebur singkat, hanya saat tombol ditekan. */
:root.tema-beralih,
:root.tema-beralih body,
:root.tema-beralih *:not(.partikel):not(svg):not(svg *) {
  transition: background-color 420ms var(--ease-soft),
              border-color 420ms var(--ease-soft),
              color 420ms var(--ease-soft),
              box-shadow 420ms var(--ease-soft) !important;
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  :root.tema-transisi::view-transition-old(root) { animation: none; }
  :root.tema-topeng::view-transition-new(root) { -webkit-mask-image: none; mask-image: none; }
  :root.tema-beralih, :root.tema-beralih body, :root.tema-beralih *:not(.partikel):not(svg):not(svg *) { transition: none !important; }
}

/* ---------- 6. Transformasi wadah: tombol menjadi modal (DEC-084) ---------- */

.modal.sedang-morph .modal-kotak { animation: none; }
.modal.sedang-morph::backdrop { animation: none; }

.morph-cangkang {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  border-radius: inherit;
  pointer-events: none;
  will-change: opacity;
}

.morph-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  line-height: 1;
}

.morph-label .icon { flex: 0 0 auto; }

/* DEC-088: geometri transformasi dianimasikan lewat properti khusus terdaftar (ui.js, geometriMorph).
   Animasi clip-path langsung dijalankan Chrome di compositor dan gagal memotong kotak yang isinya lebih
   tinggi dari kotak (Cara pakai di ponsel): kotak utuh terlihat meluncur ke tombol. Nilai var() selalu
   dihitung di utas utama, sehingga potongan dan geseran selalu sejalan. */
@property --morph-x { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --morph-y { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --morph-atas { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --morph-sisi { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --morph-radius { syntax: '<length>'; inherits: false; initial-value: 0px; }

.modal.morph-berjalan .modal-kotak {
  translate: var(--morph-x) var(--morph-y);
  clip-path: inset(var(--morph-atas) var(--morph-sisi) round var(--morph-radius));
  will-change: translate;
}

/* Tombol pemicu "menjadi" modal: disembunyikan tanpa transisi selama modal terbuka. */
.pemicu-morph { opacity: 0 !important; transition: none !important; }

@media print { .morph-cangkang { display: none; } }

/* ---------- 7. Gerak bergaya iOS (DEC-088) ----------------------------------
   a. Transisi antarhalaman: satu kesatuan dari halaman ke halaman (transisi.js
      memilih jenis gerak dan menggerakkan lapisan lama/baru dengan kurva pegas).
   b. Dialog tanpa tombol asal dan menu mengambang memakai pegas.
   c. Tombol ditekan mengecil cepat dan kembali dengan pegas saat dilepas.
   Semua mati pada prefers-reduced-motion: reduce. */

@view-transition { navigation: auto; }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* Lapisan yang pergi berada DI ATAS saat mundur, menutup ke kartu, atau keluar. */
html[data-transisi="mundur"]::view-transition-old(root),
html[data-transisi="tutup"]::view-transition-old(root),
html[data-transisi="keluar"]::view-transition-old(root) { z-index: 2; }

/* Bayang tepi kiri lapisan yang bergeser, seperti tumpukan halaman iOS. */
html[data-transisi="maju"]::view-transition-new(root),
html[data-transisi="mundur"]::view-transition-old(root) {
  box-shadow: var(--bayang-geser-halaman);
}

/* Bilah atas tetap di tempat: hanya memudar silang bila isinya berbeda (mis. halaman depan ke beranda). */
::view-transition-group(kepala) {
  animation-duration: 320ms;
  animation-timing-function: var(--ease-soft);
}

/* Isi layar pertama pada halaman yang tiba lewat transisi tampil tanpa gerak masuk kedua,
   termasuk bagian dalamnya (bilah kemajuan kartu, nomor, gambar sampul). */
.js-aktif .reveal.reveal-instan,
.js-aktif .reveal.reveal-instan * { transition: none !important; }

/* Kembali ke Beranda (menutup ke kartu atau mundur): panel sapaan tidak mengulang gerak masuknya. */
html:is([data-kedatangan="tutup"], [data-kedatangan="mundur"]) :is(
  .beranda-sapa,
  .beranda-sapa-teks > *,
  .beranda-sapa-alat,
  .sapa-kemajuan,
  .tangga-balok,
  .tangga-isi
) { animation: none !important; }

@media (prefers-reduced-motion: no-preference) {
  html:is([data-kedatangan="tutup"], [data-kedatangan="mundur"]) .tangga-penanda {
    animation: sf-penanda-melayang 2.8s var(--ease-in-out) infinite alternate !important;
  }

  /* b. Dialog tanpa tombol asal: skala pegas + memudar. */
  .modal[open]:not(.sedang-morph) .modal-kotak {
    animation: sf-modal-pegas var(--dur-pegas) var(--ease-pegas);
  }

  .modal[open]:not(.sedang-morph)::backdrop {
    animation: sf-modal-redup 260ms var(--ease-out);
  }

  /* Menu mengambang dan daftar pilihan tumbuh dari tombolnya, menyusut kembali saat ditutup. */
  .floating,
  .floating.is-flipped {
    transform-origin: var(--asal-x, 50%) var(--asal-y, 0px);
    animation: sf-mengambang-masuk var(--dur-pegas-mantul) var(--ease-pegas-mantul);
  }

  .floating.is-keluar {
    animation: sf-mengambang-keluar 190ms var(--ease-accelerate) forwards;
    pointer-events: none;
  }

  /* c. Tekan: mengecil cepat; lepas: kembali dengan pegas. */
  .js-aktif .btn {
    transition: var(--transition-colors), transform var(--dur-pegas-mantul) var(--ease-pegas-mantul);
  }

  .js-aktif .btn:active:not(:disabled) {
    transition: var(--transition-colors), transform 90ms var(--ease-out);
  }
}

@keyframes sf-modal-pegas {
  from { opacity: 0; transform: translateY(var(--space-3)) scale(0.92); }
  30%  { opacity: 1; }
  to   { opacity: 1; transform: none; }
}

@keyframes sf-mengambang-masuk {
  from { opacity: 0; transform: scale(0.7); }
  25%  { opacity: 1; }
  to   { opacity: 1; transform: none; }
}

@keyframes sf-mengambang-keluar {
  to { opacity: 0; transform: scale(0.82); }
}