/* -----------------------------------------------------------
   Scroll Reveal Animations (PPT-style "muncul" per elemen)
   - Elemen akan fade + slide + sedikit blur saat masuk viewport
   - Class .reveal ditambahkan via JS agar tidak mengganggu SEO/No-JS
----------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translate3d(0, 24px, 0) scale(0.985);
  filter: blur(2px);
  transition:
    opacity 650ms cubic-bezier(0.2, 0.65, 0.2, 1) var(--reveal-delay, 0ms),
    transform 650ms cubic-bezier(0.2, 0.65, 0.2, 1) var(--reveal-delay, 0ms),
    filter 650ms cubic-bezier(0.2, 0.65, 0.2, 1) var(--reveal-delay, 0ms);
  will-change: opacity, transform, filter;
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
  filter: blur(0);
}

/* Variasi arah (opsional)
   JS bisa set data-reveal="left|right|zoom" jika perlu */
.reveal[data-reveal="left"] {
  transform: translate3d(-24px, 0, 0) scale(0.985);
}
.reveal[data-reveal="right"] {
  transform: translate3d(24px, 0, 0) scale(0.985);
}
.reveal[data-reveal="zoom"] {
  transform: translate3d(0, 0, 0) scale(0.94);
}

/* Aksesibilitas: hormati user yang tidak ingin animasi */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal.is-visible {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
}