/* ===============================
   SCROLL ANIMATIONS (Universal)
   =============================== */

/* Base */
.animate-on-scroll {
  opacity: 0;
  transform: var(--aos-transform, translateY(30px));
  transition:
    opacity var(--aos-duration, 0.8s) ease-out,
    transform var(--aos-duration, 0.8s) ease-out;
  will-change: opacity, transform;
}
.animate-on-scroll.in-view {
  opacity: 1;
  transform: none;
}

/* Directions */
.fade-up    { --aos-transform: translateY(30px); }
.fade-down  { --aos-transform: translateY(-30px); }
.fade-left  { --aos-transform: translateX(-40px); }
.fade-right { --aos-transform: translateX(40px); }

/* Zoom Effects */
.zoom-in  { --aos-transform: scale(0.9); }
.zoom-out { --aos-transform: scale(1.1); }

/* Fancy */
.rotate-in { --aos-transform: rotateX(-15deg) translateY(15px); transform-origin: top; }
.blur-in   { filter: blur(10px); transition: all 1s ease-out; }
.in-view.blur-in { filter: blur(0); }

/* Delay Options */
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }
.delay-5 { transition-delay: 0.5s; }

/* Mobile fallback (avoid sideways shifts) */
@media (max-width: 768px) {
  .fade-left,
  .fade-right {
    --aos-transform: translateY(30px);
  }
}