/* =============================================================
   FX — efek masuk saat scroll (dipakai semua halaman publik)
   Pakai: class="reveal up|fx-fade|fx-rise|fx-rise-sm|fx-zoom [delay-1..5]"
   JS: assets/js/fx-reveal.js menambah .is-visible saat elemen terlihat,
   lalu melepas .reveal setelah animasi selesai agar hover/transisi normal lagi.
   Nama kelas sengaja unik (jangan .fade/.zoom: bentrok Bootstrap & rail partner).
   ============================================================= */
@keyframes fxFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fxSlideUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fxRise { from { opacity: 0; transform: translateY(200px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fxRiseSm { from { opacity: 0; transform: translateY(100px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fxZoom { from { opacity: 0; transform: scale(1.03); } to { opacity: 1; transform: scale(1); } }

.reveal { opacity: 0; will-change: transform, opacity; }
.reveal.up { transform: translateY(16px); }
.reveal.fx-rise { transform: translateY(200px); }
.reveal.fx-rise-sm { transform: translateY(100px); }
.reveal.fx-zoom { transform: scale(1.03); }

.reveal.is-visible.fx-fade { animation: fxFadeIn .8s ease forwards; }
.reveal.is-visible.up { animation: fxSlideUp .7s cubic-bezier(.22, 1, .36, 1) forwards; }
.reveal.is-visible.fx-rise { animation: fxRise 1.1s cubic-bezier(.3, 1.3, .5, 1) forwards; }
.reveal.is-visible.fx-rise-sm { animation: fxRiseSm 1s cubic-bezier(.3, 1.3, .5, 1) forwards; }
.reveal.is-visible.fx-zoom { animation: fxZoom .9s cubic-bezier(.22, 1, .36, 1) forwards; }

.delay-1 { animation-delay: .1s; }
.delay-2 { animation-delay: .2s; }
.delay-3 { animation-delay: .35s; }
.delay-4 { animation-delay: .5s; }
.delay-5 { animation-delay: .65s; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.up, .reveal.fx-rise, .reveal.fx-rise-sm, .reveal.fx-zoom { opacity: 1; transform: none !important; animation: none !important; }
}