/* ============================================
   MaloBatPRO — Animations & Transitions
   Scroll-triggered appearances + parallax
   Requirements : 6.3
   ============================================ */

/* --- Keyframe Animations --- */
@keyframes fadeIn {
  from { opacity: 0; } to { opacity: 1; }
}
@keyframes slideUp {
  from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); }
}
@keyframes slideLeft {
  from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); }
}
@keyframes slideRight {
  from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: translateX(0); }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: scale(1); }
}
@keyframes parallaxDrift {
  0% { transform: translateY(0); } 100% { transform: translateY(-20px); }
}

/* --- Initial hidden state (JS adds .is-visible) --- */
.animate-fade-in,
.animate-slide-up,
.animate-slide-left,
.animate-slide-right,
.animate-scale-in { opacity: 0; }

.animate-slide-up    { transform: translateY(40px); }
.animate-slide-left  { transform: translateX(40px); }
.animate-slide-right { transform: translateX(-40px); }
.animate-scale-in    { transform: scale(0.85); }

/* --- Visible state — triggered by IntersectionObserver --- */
.animate-fade-in.is-visible    { animation: fadeIn 0.7s ease forwards; }
.animate-slide-up.is-visible   { animation: slideUp 0.7s ease forwards; }
.animate-slide-left.is-visible { animation: slideLeft 0.7s ease forwards; }
.animate-slide-right.is-visible { animation: slideRight 0.7s ease forwards; }
.animate-scale-in.is-visible    { animation: scaleIn 0.6s ease forwards; }

/* --- Parallax hero background --- */
.parallax-bg {
  animation: parallaxDrift 1s ease-out forwards;
  will-change: transform;
}

/* --- Respect prefers-reduced-motion --- */
@media (prefers-reduced-motion: reduce) {
  .animate-fade-in,
  .animate-slide-up,
  .animate-slide-left,
  .animate-slide-right,
  .animate-scale-in {
    opacity: 1;
    transform: none;
    animation: none !important;
    transition: none !important;
  }
  .parallax-bg {
    animation: none !important;
    transform: none;
  }
}