/* ============================================================
   css/animation.css — Kumpulan keyframes animasi tambahan
   (keyframes inti juga ada di style.css; file ini untuk efek ekstra)
   ============================================================ */

@keyframes sparkleFade{
  0%{opacity:0; transform:scale(.5) rotate(0deg);}
  40%{opacity:1; transform:scale(1.2) rotate(15deg);}
  100%{opacity:0; transform:scale(.8) rotate(-10deg);}
}
.sparkle-fx{animation:sparkleFade .8s ease-out;}

@keyframes flashScreen{
  0%{background:rgba(255,255,255,0);}
  30%{background:rgba(255,255,255,.55);}
  100%{background:rgba(255,255,255,0);}
}
.flash-fx{position:fixed; inset:0; pointer-events:none; z-index:40; animation:flashScreen .4s ease-out;}

@keyframes robotHop{
  0%,100%{transform:translateY(0) rotate(0);}
  30%{transform:translateY(-18px) rotate(-6deg);}
  60%{transform:translateY(0) rotate(4deg);}
}
.robot-hop{animation:robotHop .6s ease-in-out;}

@keyframes starPop{
  0%{transform:scale(0) rotate(0deg); opacity:0;}
  60%{transform:scale(1.3) rotate(20deg); opacity:1;}
  100%{transform:scale(1) rotate(0deg); opacity:1;}
}
.star-pop{animation:starPop .5s ease-out;}