/*
 * Animasi gamifikasi: umpan balik kecil saat sesuatu bertambah.
 *
 * Semua gerakan pendek (di bawah satu detik), tidak menggeser tata letak, dan berhenti
 * total saat perangkat meminta gerakan dikurangi — aturan itu ada di paling bawah berkas.
 */

/* ------------------------------------------------------------ gerakan dasar */

@keyframes anim-letup { 0% { transform: scale(1); } 45% { transform: scale(1.18); } 100% { transform: scale(1); } }
@keyframes anim-goyang { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
@keyframes anim-denyut { 0%, 100% { box-shadow: 0 0 0 0 rgba(248, 174, 66, .55); } 60% { box-shadow: 0 0 0 12px rgba(248, 174, 66, 0); } }
@keyframes anim-masuk-halus { from { opacity: 0; transform: translateY(8px); } }
@keyframes anim-kilau { to { background-position: 220% 0; } }
@keyframes anim-api { 0%, 100% { transform: scale(1) rotate(0); } 35% { transform: scale(1.12) rotate(-4deg); } 70% { transform: scale(1.05) rotate(3deg); } }
@keyframes anim-percik { from { transform: translate(0, 0) scale(1); opacity: 1; } to { transform: translate(var(--x), var(--y)) scale(.2); opacity: 0; } }
@keyframes anim-centang { from { stroke-dashoffset: 26; } to { stroke-dashoffset: 0; } }

.anim-letup { animation: anim-letup .5s cubic-bezier(.2, 1.5, .4, 1); }
.anim-goyang { animation: anim-goyang .4s ease-in-out; }
.anim-denyut { animation: anim-denyut .9s ease-out; }

/* ------------------------------------------------------------ chip XP melayang */

.anim-xp-terbang {
  position: fixed; z-index: 95; transform: translate(-50%, -50%); pointer-events: none;
  padding: 5px 12px; border-radius: 999px; background: var(--emas); color: #4a3105;
  font: 600 13px var(--font); box-shadow: 0 6px 18px rgba(184, 120, 18, .45);
  transition: transform .72s cubic-bezier(.35, .85, .35, 1), opacity .72s ease-in;
}

/* percikan kecil di sekitar elemen */
.anim-percik { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.anim-percik i {
  position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; border-radius: 50%;
  animation: anim-percik .7s cubic-bezier(.2, .7, .3, 1) forwards;
}

/* ------------------------------------------------------------ topbar: streak, target, level */

.lms-top-chip { transition: transform .2s, background .2s; }
.lms-top-chip.streak:not(.redup) .ikon { animation: anim-api 2.6s ease-in-out infinite; transform-origin: 50% 80%; }
.lms-top-chip.target.penuh { background: var(--utama-muda); }
.lms-top-chip.target.penuh .lms-cincin .isi { stroke: #1b9e6a; }

/* ------------------------------------------------------------ bar & cincin progres */

.lms-bar > span { position: relative; overflow: hidden; }
.lms-bar > span::after {
  content: ""; position: absolute; inset: 0; opacity: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .55) 50%, transparent 80%) 0 0 / 220% 100%;
}
.lms-bar.mengisi > span::after { opacity: 1; animation: anim-kilau 1s ease-out; }
.lms-bar.penuh > span { background: #1b9e6a; }

/* ------------------------------------------------------------ baris konten yang baru tuntas */

.lms-item.baru-tuntas { animation: anim-letup .55s cubic-bezier(.2, 1.4, .4, 1); border-color: #9fd6c1; }
.lms-item.baru-tuntas .lms-item-status { animation: anim-letup .6s .1s cubic-bezier(.2, 1.6, .4, 1); }
.lms-item { transition: transform .15s, box-shadow .15s, border-color .2s; }
.lms-item:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 8px 18px -10px rgba(30, 33, 36, .45); }

/* ------------------------------------------------------------ quest & peti */

.lms-quest li { transition: opacity .25s; }
.lms-quest li.baru-selesai .lms-quest-ikon { animation: anim-letup .55s cubic-bezier(.2, 1.6, .4, 1); }
.lms-peti { transition: transform .2s; }
.lms-peti.goyang { animation: anim-goyang .5s ease-in-out 2; }
.lms-peti.terbuka { animation: anim-letup .6s cubic-bezier(.2, 1.6, .4, 1); }

/* ------------------------------------------------------------ koleksi HEROES & badge */

.lms-heroes-huruf { transition: transform .2s, background .3s; }
.lms-heroes-huruf.dapat { animation: anim-letup .6s cubic-bezier(.2, 1.5, .4, 1); }
.lms-capai-huruf:hover { transform: rotate(-4deg) scale(1.05); }

/* ------------------------------------------------------------ tombol & kartu */

.tombol { transition: transform .12s, box-shadow .15s, background .2s; }
.tombol:active:not(:disabled) { transform: translateY(2px); }
.tombol-utama { position: relative; overflow: hidden; }
.tombol-utama::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .35) 50%, transparent 70%) -60% 0 / 220% 100% no-repeat;
}
.tombol-utama:hover:not(:disabled)::after { opacity: 1; animation: anim-kilau .8s ease-out; }

.lms-lanjut, .lms-latihan-kartu, .jl-kartu, .lms-ms { transition: transform .2s, box-shadow .2s; }
.lms-lanjut:hover, .lms-latihan-kartu:hover, .jl-kartu:hover { transform: translateY(-3px); }

/* kartu kuis harian: dadu bergoyang halus saat masih bisa dilempar */
.kh-kartu:not(.tuntas) .kh-kartu-duo { animation: anim-api 3.4s ease-in-out infinite; transform-origin: 50% 70%; }

/* panel yang baru muncul */
.lms-panel, .cms-kartu { animation: anim-masuk-halus .28s ease-out; }

@media (prefers-reduced-motion: reduce) {
  .anim-letup, .anim-goyang, .anim-denyut,
  .lms-top-chip.streak .ikon, .lms-bar.mengisi > span::after, .lms-item.baru-tuntas,
  .lms-item.baru-tuntas .lms-item-status, .lms-quest li.baru-selesai .lms-quest-ikon,
  .lms-peti.goyang, .lms-peti.terbuka, .lms-heroes-huruf.dapat,
  .tombol-utama:hover:not(:disabled)::after, .kh-kartu:not(.tuntas) .kh-kartu-duo,
  .lms-panel, .cms-kartu { animation: none; }
  .lms-item:hover:not(:disabled), .lms-lanjut:hover, .lms-latihan-kartu:hover, .jl-kartu:hover { transform: none; }
}