/* Avatar pemain bergambar (js/avatars.js).
   Besar avatar mengikuti font-size pembungkusnya: .av-wrap selebar 1em. */

.av-wrap { display: inline-block; width: 1em; height: 1em; line-height: 0; vertical-align: middle; flex: none; }
.av { display: block; width: 100%; height: 100%; overflow: visible; }

/* Bagian yang bergerak berputar/menyusut terhadap kotaknya sendiri. */
.av .av-body, .av .av-eyes, .av .av-ear-l, .av .av-ear-r,
.av .av-antenna, .av .av-spout { transform-box: fill-box; }
.av .av-body { transform-origin: 50% 100%; }
.av .av-eyes { transform-origin: 50% 50%; }
/* Telinga tegak: berporos di pangkalnya (bawah, sisi dalam). */
.av .av-ear-l { transform-origin: 80% 100%; }
.av .av-ear-r { transform-origin: 20% 100%; }
.av .av-antenna { transform-origin: 50% 100%; }
.av .av-spout { transform-origin: 50% 100%; }
/* Padanan telinga yang porosnya lain. */
.av-anjing .av-ear-l, .av-anjing .av-ear-r { transform-origin: 70% 0%; }   /* telinga terkulai */
.av-anjing .av-ear-r { transform-origin: 30% 0%; }
.av-kupu-kupu .av-ear-l { transform-origin: 100% 50%; }                    /* sayap */
.av-kupu-kupu .av-ear-r { transform-origin: 0% 50%; }
.av-gurita .av-ear-l { transform-origin: 100% 0%; }                        /* tentakel */
.av-gurita .av-ear-r { transform-origin: 0% 0%; }
.av-penguin .av-ear-l, .av-paus .av-ear-l { transform-origin: 100% 30%; }  /* sirip */
.av-penguin .av-ear-r, .av-paus .av-ear-r { transform-origin: 0% 30%; }
.av-kura-kura .av-ear-l { transform-origin: 100% 60%; }
.av-kura-kura .av-ear-r { transform-origin: 0% 60%; }

/* ---------- Gerak diam (hanya di dalam .av-live supaya daftar tetap tenang) ---------- */

@keyframes av-kedip {
  0%, 93%, 100% { transform: scaleY(1); }
  95.5% { transform: scaleY(0.12); }
}
@keyframes av-apung {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-1.6px); }
}
@keyframes av-goyang-l {
  0%, 78%, 100% { transform: rotate(0); }
  83% { transform: rotate(-11deg); }
  88% { transform: rotate(6deg); }
  93% { transform: rotate(-3deg); }
}
@keyframes av-goyang-r {
  0%, 78%, 100% { transform: rotate(0); }
  83% { transform: rotate(11deg); }
  88% { transform: rotate(-6deg); }
  93% { transform: rotate(3deg); }
}
@keyframes av-kepak {
  0%, 100% { transform: scaleX(1); }
  50% { transform: scaleX(0.78); }
}
@keyframes av-sembur {
  0%, 100% { transform: scale(1, 1); }
  50% { transform: scale(1.08, 1.14); }
}

/* Jeda acak per hewan (negatif = mulai di tengah siklus) supaya tidak serempak. */
.av-rubah { --av-d: -0.4s; --av-t: 4.6s; }
.av-panda { --av-d: -2.1s; --av-t: 5.4s; }
.av-koala { --av-d: -3.3s; --av-t: 5.9s; }
.av-singa { --av-d: -1.2s; --av-t: 4.9s; }
.av-monyet { --av-d: -4.0s; --av-t: 4.3s; }
.av-harimau { --av-d: -2.7s; --av-t: 5.2s; }
.av-unicorn { --av-d: -0.9s; --av-t: 5.7s; }
.av-gurita { --av-d: -3.8s; --av-t: 4.8s; }
.av-dino { --av-d: -1.7s; --av-t: 5.1s; }
.av-penguin { --av-d: -4.4s; --av-t: 4.5s; }
.av-katak { --av-d: -2.4s; --av-t: 6.0s; }
.av-robot { --av-d: -0.2s; --av-t: 5.5s; }
.av-kelinci { --av-d: -3.0s; --av-t: 4.7s; }
.av-beruang { --av-d: -1.5s; --av-t: 5.8s; }
.av-kucing { --av-d: -4.7s; --av-t: 4.4s; }
.av-anjing { --av-d: -2.9s; --av-t: 5.0s; }
.av-burung-hantu { --av-d: -0.6s; --av-t: 6.2s; }
.av-kura-kura { --av-d: -3.6s; --av-t: 5.3s; }
.av-kupu-kupu { --av-d: -1.1s; --av-t: 4.9s; }
.av-paus { --av-d: -2.2s; --av-t: 5.6s; }

.av-live .av-eyes { animation: av-kedip var(--av-t, 5s) var(--av-d, 0s) infinite; }
.av-live .av-body { animation: av-apung 3.2s var(--av-d, 0s) ease-in-out infinite; }
.av-live .av-ear-l { animation: av-goyang-l calc(var(--av-t, 5s) * 1.3) var(--av-d, 0s) ease-in-out infinite; }
.av-live .av-ear-r { animation: av-goyang-r calc(var(--av-t, 5s) * 1.3) calc(var(--av-d, 0s) - 0.12s) ease-in-out infinite; }
.av-live .av-antenna { animation: av-goyang-l calc(var(--av-t, 5s) * 0.9) var(--av-d, 0s) ease-in-out infinite; }
.av-live .av-spout { animation: av-sembur 1.6s ease-in-out infinite; }
/* Kupu-kupu mengepak terus pelan. */
.av-live .av-kupu-kupu .av-ear-l, .av-live .av-kupu-kupu .av-ear-r { animation: av-kepak 1.4s ease-in-out infinite; }

/* ---------- Letupan saat avatar dipilih ----------
   Tambahkan .av-pop pada pembungkus (hapus lalu tambahkan lagi untuk mengulang). */
@keyframes av-letup {
  0% { transform: scale(1, 1); }
  22% { transform: scale(1.18, 0.8); }
  45% { transform: scale(0.88, 1.14); }
  65% { transform: scale(1.06, 0.95); }
  82% { transform: scale(0.98, 1.02); }
  100% { transform: scale(1, 1); }
}
.av-pop > .av, .av.av-pop {
  transform-origin: 50% 85%;
  animation: av-letup 0.55s cubic-bezier(0.3, 0.7, 0.4, 1.2);
}

/* ---------- Gerak dikurangi ---------- */
@media (prefers-reduced-motion: reduce) {
  .av, .av * { animation: none !important; }
}
html[data-motion="reduced"] .av, html[data-motion="reduced"] .av * { animation: none !important; }