/* Karakter dari gambar Bima — lapisan, ekspresi, gerakan.
   data-e = asli | bahagia | sedih | marah | kaget | cemberut | jutek | sebel | gugup
   data-bicara = 0 | 1     data-int = 0..3 (tingkat amarah)                          */

.kar { position: relative; width: 100%; overflow: visible; user-select: none; -webkit-user-select: none; }
.kar-badan { position: absolute; inset: 0; transform-origin: 50% 100%; will-change: transform; }
.kar .l { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; -webkit-user-drag: none; transition: opacity .12s linear; }
.kar .l-kosong, .kar .l-senang, .kar .l-kedip { opacity: 0; }
.kar svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.kar .f, .kar .fx { display: none; }

/* ── lapisan mana yang tampil ── */
.kar[data-e="bahagia"] .l-asli { opacity: 0; }
.kar[data-e="bahagia"] .l-senang { opacity: 1; }
.kar[data-e="sedih"] .l-asli, .kar[data-e="marah"] .l-asli, .kar[data-e="kaget"] .l-asli,
.kar[data-e="cemberut"] .l-asli, .kar[data-e="jutek"] .l-asli, .kar[data-e="sebel"] .l-asli { opacity: 0; }
.kar[data-e="sedih"] .l-kosong, .kar[data-e="marah"] .l-kosong, .kar[data-e="kaget"] .l-kosong,
.kar[data-e="cemberut"] .l-kosong, .kar[data-e="jutek"] .l-kosong, .kar[data-e="sebel"] .l-kosong { opacity: 1; }
.kar[data-e="sedih"] .f-sedih, .kar[data-e="marah"] .f-marah, .kar[data-e="kaget"] .f-kaget,
.kar[data-e="cemberut"] .f-cemberut, .kar[data-e="jutek"] .f-jutek, .kar[data-e="sebel"] .f-sebel { display: inline; }
.kar[data-e="bahagia"] .fx-bahagia, .kar[data-e="sedih"] .fx-sedih, .kar[data-e="marah"] .fx-marah,
.kar[data-e="kaget"] .fx-kaget, .kar[data-e="sebel"] .fx-sebel, .kar[data-e="gugup"] .fx-gugup { display: inline; }

/* ── kedip ── */
.kar[data-e="asli"] .l-kedip, .kar[data-e="gugup"] .l-kedip { animation: kedip-raster 4.8s infinite; }
.kar-cowok[data-e="asli"] .l-kedip, .kar-cowok[data-e="gugup"] .l-kedip { animation-duration: 5.6s; animation-delay: -1.9s; }
@keyframes kedip-raster { 0%, 93%, 98%, 100% { opacity: 0; } 94.5%, 96.5% { opacity: 1; } }
.mata-f { transform-box: fill-box; transform-origin: 50% 55%; animation: kedip-fitur 4.4s infinite; }
@keyframes kedip-fitur { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }

/* ── gerak dasar: bernapas & bicara ── */
.kar[data-e="asli"] .kar-badan, .kar[data-e="gugup"] .kar-badan { animation: napas 3.8s ease-in-out infinite; }
@keyframes napas { 0%, 100% { transform: translateY(0) scale(1, 1); } 50% { transform: translateY(-.5%) scale(1.004, 1.012); } }
.kar[data-bicara="1"] .kar-badan { animation: bicara .46s ease-in-out infinite alternate !important; }
@keyframes bicara { from { transform: translateY(0) rotate(-.7deg); } to { transform: translateY(-1.3%) rotate(.7deg) scale(1.005); } }

/* ── BAHAGIA: loncat, miring, hati & kilau melayang ── */
.kar[data-e="bahagia"] .kar-badan { animation: loncat .74s cubic-bezier(.3, 0, .4, 1) infinite; }
@keyframes loncat { 0%, 100% { transform: translateY(0) scale(1, 1) rotate(-1.2deg); } 14% { transform: translateY(.8%) scale(1.02, .975) rotate(-1.2deg); } 52% { transform: translateY(-4.2%) scale(.99, 1.02) rotate(1.4deg); } 88% { transform: translateY(.3%) scale(1.01, .99) rotate(-.8deg); } }
.hati { transform-box: fill-box; transform-origin: 50% 50%; animation: melayang 2.3s ease-in infinite; }
.hati.h2 { animation-delay: -1.15s; }
@keyframes melayang { 0% { transform: translateY(40px) scale(.4); opacity: 0; } 22% { opacity: 1; } 100% { transform: translateY(-150px) scale(1.15); opacity: 0; } }
.kilau { transform-box: fill-box; transform-origin: 50% 50%; animation: kilau 1.3s ease-in-out infinite; }
.kilau.k2 { animation-delay: -.65s; }
@keyframes kilau { 0%, 100% { transform: scale(.25) rotate(0); opacity: .2; } 50% { transform: scale(1.15) rotate(45deg); opacity: 1; } }

/* ── SEDIH: lesu, menunduk, air mata, garis murung ── */
.kar[data-e="sedih"] .kar-badan { animation: lesu 3.6s ease-in-out infinite; }
@keyframes lesu { 0%, 100% { transform: translateY(1.8%) rotate(-1.6deg) scale(1, .985); } 50% { transform: translateY(2.6%) rotate(-.6deg) scale(1, .978); } }
.tetes { transform-box: fill-box; transform-origin: 50% 0; animation: jatuh 1.6s ease-in infinite; }
.tetes.t2 { animation-delay: -.8s; }
@keyframes jatuh { 0% { transform: translateY(-10px) scale(.4); opacity: 0; } 18% { opacity: 1; transform: translateY(0) scale(1); } 100% { transform: translateY(150px) scale(1, 1.2); opacity: 0; } }
.garis-murung { animation: murung 2.4s ease-in-out infinite alternate; }
@keyframes murung { from { opacity: .3; } to { opacity: .95; } }
.bibir-gemetar { transform-box: fill-box; transform-origin: 50% 50%; animation: bibir .36s linear infinite alternate; }
@keyframes bibir { from { transform: translateY(0) scaleX(1); } to { transform: translateY(2.5px) scaleX(.94); } }

/* ── MARAH: gemetar, condong, urat berdenyut, uap ── */
.kar[data-e="marah"] .kar-badan { animation: marah .16s linear infinite; }
@keyframes marah { 0% { transform: translate(-.5%, 0) scale(1.03); } 25% { transform: translate(.5%, -.2%) scale(1.03); } 50% { transform: translate(-.3%, .2%) scale(1.04); } 75% { transform: translate(.5%, 0) scale(1.03); } 100% { transform: translate(-.5%, 0) scale(1.03); } }
.kar[data-e="marah"][data-int="2"] .kar-badan { animation-duration: .12s; }
.kar[data-e="marah"][data-int="3"] .kar-badan { animation-duration: .09s; }
.urat { transform-box: fill-box; transform-origin: 50% 50%; animation: denyut .45s ease-in-out infinite alternate; }
@keyframes denyut { from { transform: scale(.75); } to { transform: scale(1.2); } }
.uap { transform-box: fill-box; transform-origin: 50% 100%; animation: uap 1s ease-out infinite; }
.uap.u2 { animation-delay: -.33s; } .uap.u3 { animation-delay: -.66s; }
@keyframes uap { 0% { transform: translateY(30px) scaleY(.5); opacity: 0; } 25% { opacity: .95; } 100% { transform: translateY(-70px) scaleY(1.2); opacity: 0; } }

/* ── KAGET ── */
.kar[data-e="kaget"] .kar-badan { animation: tersentak .42s cubic-bezier(.2, 1.6, .4, 1) 1, napas 3.8s ease-in-out .42s infinite; }
@keyframes tersentak { 0% { transform: translateY(0) scale(1); } 30% { transform: translateY(-3.5%) scale(1.06, 1.08); } 100% { transform: translateY(0) scale(1); } }
.keringat { transform-box: fill-box; transform-origin: 50% 0; animation: keringat 1.3s ease-in infinite; }
.keringat.k2 { animation-delay: -.65s; }
@keyframes keringat { 0% { transform: translateY(0) scale(.7); opacity: 0; } 25% { opacity: 1; } 100% { transform: translateY(70px) scale(1); opacity: 0; } }
.seru { transform-box: fill-box; transform-origin: 50% 100%; animation: seru .36s ease-in-out infinite alternate; }
@keyframes seru { from { transform: rotate(-9deg) scale(1); } to { transform: rotate(9deg) scale(1.14); } }

/* ── SENSIAN ── */
.kar[data-e="cemberut"] .kar-badan { animation: cemberut 3.4s ease-in-out infinite; }
@keyframes cemberut { 0%, 100% { transform: translateX(0) rotate(0); } 50% { transform: translateX(1.2%) rotate(1.1deg); } }
.kar[data-e="jutek"] .kar-badan { animation: jutek 2.8s ease-in-out infinite; }
@keyframes jutek { 0%, 100% { transform: translateX(1.5%) rotate(2.4deg); } 45% { transform: translateX(2.4%) rotate(3.3deg); } 75% { transform: translateX(1.2%) rotate(2deg); } }
.kar[data-e="sebel"] .kar-badan { animation: sebel .85s ease-in-out infinite; }
@keyframes sebel { 0%, 100% { transform: translate(0, 0) scale(1.012); } 25% { transform: translate(-.5%, 0) scale(1.02); } 75% { transform: translate(.5%, 0) scale(1.02); } }

/* ── GUGUP ── */
.kar[data-e="gugup"] .kar-badan { animation: gugup .5s ease-in-out infinite alternate; }
@keyframes gugup { from { transform: translateX(-.45%); } to { transform: translateX(.45%); } }

@media (prefers-reduced-motion: reduce) {
  .kar *, .kar { animation: none !important; transition: none !important; }
}