/* ============================================================
   animations.css
   -----------------------------------------------------------
   Semua @keyframes + class .reveal/.revealed numpuk di sini.
   scroll.js yang nentuin KAPAN class .revealed ditambahin
   (pakai IntersectionObserver), file ini cuma nentuin
   GIMANA tampilannya pas ditambahin.
============================================================ */

/* -----------------------------------------
   Reveal-on-scroll — dipasang di section
   header, card, dst. Defaultnya nyembunyiin
   elemen + geser dikit ke bawah.
----------------------------------------- */
.reveal{
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal.revealed{
  opacity: 1;
  transform: translateY(0);
}

/* Varian delay buat reveal berantai (dipakai di grid kartu
   biar nongolnya gak barengan semua) */
.reveal-d1{ transition-delay: 0.08s; }
.reveal-d2{ transition-delay: 0.16s; }
.reveal-d3{ transition-delay: 0.24s; }
.reveal-d4{ transition-delay: 0.32s; }


/* -----------------------------------------
   Kursor ngeblink di build-console (hero)
----------------------------------------- */
@keyframes blinkCursor{
  0%, 50%{ opacity: 1; }
  51%, 100%{ opacity: 0; }
}


/* -----------------------------------------
   Dot kecil yang "berdenyut" — dipakai di
   eyebrow badge biar keliatan "live/aktif"
----------------------------------------- */
.eyebrow .dot{
  animation: pulseDot 2.2s ease-in-out infinite;
}
@keyframes pulseDot{
  0%, 100%{ opacity: 1; transform: scale(1); }
  50%{ opacity: 0.4; transform: scale(0.8); }
}


/* -----------------------------------------
   Ambient float — elemen dekoratif yang
   ngambang pelan di background hero
----------------------------------------- */
@keyframes floatSlow{
  0%, 100%{ transform: translateY(0) translateX(0); }
  50%{ transform: translateY(-14px) translateX(6px); }
}
.float-slow{
  animation: floatSlow 7s ease-in-out infinite;
}


/* -----------------------------------------
   Fade-in sederhana — dipakai buat elemen
   yang muncul pas load awal halaman (bukan
   pas di-scroll, tapi langsung pas page load)
----------------------------------------- */
@keyframes fadeInUp{
  from{ opacity: 0; transform: translateY(16px); }
  to{ opacity: 1; transform: translateY(0); }
}
.fade-in-up{
  animation: fadeInUp 0.6s var(--ease) both;
}