/* ============================================================
   05-animations.css  — semua @keyframes
   Ringan: hanya transform & opacity.
   ============================================================ */

/* ---------- transisi FADE antar slide ---------- */
@keyframes munculNaik{
  from{ opacity:0; transform: translateY(22px) scale(.94) rotate(1.5deg); }
  to  { opacity:1; transform: none; }
}

@keyframes goyangCrayon{
  from{ transform: rotate(-8deg) translateY(0); }
  to  { transform: rotate(8deg)  translateY(-6px); }
}
@keyframes goyang{
  0%,100%{ transform: rotate(-1.6deg) translateY(0); }
  50%    { transform: rotate(1.6deg)  translateY(-6px); }
}
@keyframes goyangLilin{
  from{ transform: translateX(-50%) rotate(-3deg); }
  to  { transform: translateX(-50%) rotate(3deg); }
}
@keyframes kedipApi{
  from{ transform: scale(1)    rotate(-2deg); opacity:.92; }
  to  { transform: scale(1.12) rotate(2deg);  opacity:1;   }
}
@keyframes naikAsap{
  0%  { transform: translate(0,0)      scale(.3);  opacity:0; }
  20% { opacity:.6; }
  100%{ transform: translate(14px,-70px) scale(2.2); opacity:0; }
}
@keyframes mengambang{
  0%,100%{ transform: rotate(-2deg) translateY(0); }
  50%    { transform: rotate(2deg)  translateY(-12px); }
}
@keyframes kadoTerbuka{
  0%  { transform: rotate(-2deg) scale(1); }
  40% { transform: rotate(6deg) scale(1.12); }
  100%{ transform: rotate(-2deg) scale(.1); opacity:0; }
}
@keyframes denyut{
  0%,100%{ transform: scale(1);    opacity:1; }
  50%    { transform: scale(1.08); opacity:.65; }
}
@keyframes fadeMasuk{ from{ opacity:0 } to{ opacity:1 } }
@keyframes pop{
  from{ opacity:0; transform: scale(.6) rotate(-6deg); }
  to  { opacity:1; transform: scale(1) rotate(0deg); }
}
@keyframes tagBob{
  0%,100%{ translate:0 0; }
  50%    { translate:0 -6px; }
}

/* helper: dipakai dari JS lewat class */
.anim-goyang{ animation: goyang 4s ease-in-out infinite; }
.anim-mengambang{ animation: mengambang 5s ease-in-out infinite; }

/* ---------- hormati setting "kurangi animasi" ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .confetti{ display:none; }
}
body.no-motion *,
body.no-motion *::before,
body.no-motion *::after{
  animation-duration:.001ms !important;
  animation-iteration-count:1 !important;
  transition-duration:.001ms !important;
}
body.no-motion .confetti{ display:none; }