/* ============================================================
   ANIMATIONS - PETIR Web App
   Ringan, tidak membebani HP low-end.
   ============================================================ */

/* -------- FADE IN -------- */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* -------- SLIDE IN FROM RIGHT (masuk step berikutnya) -------- */
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(30px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* -------- SLIDE IN FROM LEFT (kembali ke step sebelumnya) -------- */
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-30px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* -------- SLIDE UP (dari bawah) -------- */
@keyframes slideUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* -------- POP (untuk konfirmasi / sukses) -------- */
@keyframes pop {
  0%   { transform: scale(0.8); opacity: 0; }
  60%  { transform: scale(1.05); opacity: 1; }
  100% { transform: scale(1); }
}

/* -------- PULSE (untuk indikator loading) -------- */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}

/* -------- SPIN (spinner loading) -------- */
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* -------- TOAST IN -------- */
@keyframes toastIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   CLASS PRAKTIS
   ============================================================ */

.anim-fade-in   { animation: fadeIn 250ms ease both; }
.anim-slide-right { animation: slideInRight 300ms ease both; }
.anim-slide-left  { animation: slideInLeft  300ms ease both; }
.anim-slide-up    { animation: slideUp 300ms ease both; }
.anim-pop         { animation: pop 300ms ease both; }
.anim-pulse       { animation: pulse 1.5s ease-in-out infinite; }

/* Delay bertahap untuk list */
.anim-delay-1 { animation-delay: 100ms; }
.anim-delay-2 { animation-delay: 200ms; }
.anim-delay-3 { animation-delay: 300ms; }
.anim-delay-4 { animation-delay: 400ms; }

/* Spinner */
.spinner {
  width: 20px;
  height: 20px;
  border: 2.5px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 700ms linear infinite;
  display: inline-block;
}

.spinner-dark {
  border-color: rgba(0,0,0,0.1);
  border-top-color: var(--color-primary);
}

/* Kurangi animasi untuk pengguna yang tidak suka */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}