/* anim.css - Elegant Scroll Entrance Animations */

/* Base class for all animatable elements */
.anim {
  opacity: 0;
  transition: all 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform, opacity;
}

/* 1. Fade Up */
.anim.anim-fade-up {
  transform: translateY(40px);
}

.anim.anim-fade-up.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* 2. Fade Left (moves from right to left) */
.anim.anim-fade-left {
  transform: translateX(40px);
}

.anim.anim-fade-left.in-view {
  opacity: 1;
  transform: translateX(0);
}

/* 3. Fade Right (moves from left to right) */
.anim.anim-fade-right {
  transform: translateX(-40px);
}

.anim.anim-fade-right.in-view {
  opacity: 1;
  transform: translateX(0);
}

/* 4. Zoom In */
.anim.anim-zoom-in {
  transform: scale(0.95);
}

.anim.anim-zoom-in.in-view {
  opacity: 1;
  transform: scale(1);
}

/* 5. Fade In (Opacity only) */
.anim.anim-fade-in {
  transition-duration: 0.7s;
  /* Sedikit lambat agar anggun */
}

.anim.anim-fade-in.in-view {
  opacity: 1;
}

/* Accessibility: Prefers Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .anim {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}