/* Maskot FIKA: pose dan animasi. Dikendalikan lewat atribut data-eyes / data-mouth / data-arm / data-idea pada <svg class="robot">. */
.robot { display: block; width: 100%; height: 100%; overflow: visible; --ex: 0px; --ey: 0px; --tilt: 0deg; }
.robot * { transform-box: view-box; }

/* Mengambang pelan */
.robot .r-all { animation: r-float 5s ease-in-out infinite; }
.robot .r-shadow { transform-box: fill-box; transform-origin: center; animation: r-shadow 5s ease-in-out infinite; }
@keyframes r-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes r-shadow { 0%, 100% { transform: scaleX(1); opacity: .3; } 50% { transform: scaleX(.88); opacity: .2; } }

/* Kepala: miring mengikuti sentuhan, mengangguk saat bicara */
.robot .r-headpos { transform-origin: 200px 292px; transform: rotate(var(--tilt)); transition: transform .35s ease-out; }
.robot .r-nod { transform-origin: 200px 292px; }
.robot[data-mouth="talk"] .r-nod { animation: r-nod .45s ease-in-out infinite alternate; }
@keyframes r-nod { from { transform: translateY(0) rotate(-.6deg); } to { transform: translateY(3.5px) rotate(.6deg); } }

/* Wajah */
.robot .r-eyes { transform: translate(var(--ex), var(--ey)); transition: transform .22s ease-out; }
.robot .e, .robot .m, .robot .r-q { display: none; }
.robot[data-eyes="normal"] .e-normal, .robot[data-eyes="happy"] .e-happy, .robot[data-eyes="wink"] .e-wink,
.robot[data-eyes="wide"] .e-wide, .robot[data-eyes="think"] .e-think, .robot[data-eyes="load"] .e-load,
.robot[data-eyes="x"] .e-x { display: inline; }
.robot[data-mouth="smile"] .m-smile, .robot[data-mouth="talk"] .m-talk, .robot[data-mouth="listen"] .m-listen,
.robot[data-mouth="think"] .m-think, .robot[data-mouth="flat"] .m-flat { display: inline; }
.robot[data-eyes="think"] .r-q { display: inline; animation: r-pop .5s cubic-bezier(.3,1.6,.5,1) both; }

.robot .e-normal, .robot .e-happy, .robot .e-wide { transform-origin: 200px 174px; animation: r-blink 5.4s infinite; }
@keyframes r-blink { 0%, 92%, 100% { transform: scaleY(1); } 95.5% { transform: scaleY(.1); } }

.robot .m-talk ellipse { transform-box: fill-box; transform-origin: center; animation: r-talk .3s ease-in-out infinite alternate; }
@keyframes r-talk { from { transform: scaleY(.25); } to { transform: scaleY(1); } }
.robot .m-listen rect { transform-box: fill-box; transform-origin: 50% 50%; animation: r-bar .7s ease-in-out infinite; animation-delay: calc(var(--i) * .11s); }
@keyframes r-bar { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }
.robot .m-think circle { transform-box: fill-box; transform-origin: center; animation: r-dot 1s ease-in-out infinite; animation-delay: calc(var(--i) * .17s); }
@keyframes r-dot { 0%, 100% { transform: scale(.55); opacity: .45; } 50% { transform: scale(1.1); opacity: 1; } }

/* Antena, lampu telinga, inti dada */
.robot .r-ant { transform-origin: 200px 86px; animation: r-sway 3.8s ease-in-out infinite; }
@keyframes r-sway { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(4deg); } }
.robot .r-bulb, .robot .r-ear-glow, .robot .r-core { animation: r-glow 2.4s ease-in-out infinite; }
@keyframes r-glow { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.robot[data-mouth="listen"] .r-ear-glow, .robot[data-mouth="talk"] .r-ear-glow, .robot[data-mouth="listen"] .r-bulb, .robot[data-mouth="talk"] .r-bulb { animation-duration: .7s; }

/* Lengan kiri: melambai (data-arm="wave") atau turun */
.robot .r-pose { transform-origin: 50px 358px; transform: rotate(-194deg) scale(.8); transition: transform .6s cubic-bezier(.3, 1.35, .5, 1); }
.robot[data-arm="wave"] .r-pose { transform: rotate(0deg) scale(1); }
.robot .r-wave { transform-origin: 50px 358px; }
.robot[data-arm="wave"] .r-wave { animation: r-wave .55s ease-in-out infinite alternate; }
@keyframes r-wave { from { transform: rotate(-15deg); } to { transform: rotate(17deg); } }

.robot .r-fingers { transition: opacity .3s; }
.robot:not([data-arm="wave"]) .r-fingers { opacity: 0; }

/* Lampu ide */
.robot .r-idea { transform-origin: 338px 58px; opacity: 0; transform: scale(.3); transition: opacity .25s, transform .5s cubic-bezier(.3, 1.7, .5, 1); }
.robot[data-idea="1"] .r-idea { opacity: 1; transform: scale(1); }
@keyframes r-pop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
    .robot *, .robot { animation: none !important; }
    .robot .r-pose, .robot .r-headpos, .robot .r-eyes { transition: none; }
}