/* ============================================
   animations.css — WOW Scroll Animation System
   Elements appear with animation on scroll into view
   ============================================ */

/* ---- Base State: Hidden (opacity only, preserves layout) ---- */
.wow {
  opacity: 0;
  will-change: opacity, transform;
}

/* ---- Triggered State ---- */
.wow.animated {
  opacity: 1;
}

/* ========================================
   Animation Keyframes
   ======================================== */

/* Fade In Up */
@keyframes wowFadeInUp {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fade In Down */
@keyframes wowFadeInDown {
  from {
    opacity: 0;
    transform: translateY(-40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fade In Left */
@keyframes wowFadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-60px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Fade In Right */
@keyframes wowFadeInRight {
  from {
    opacity: 0;
    transform: translateX(60px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Fade In (opacity only) */
@keyframes wowFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Zoom In */
@keyframes wowZoomIn {
  from {
    opacity: 0;
    transform: scale(0.85);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Zoom In Up */
@keyframes wowZoomInUp {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Bounce In */
@keyframes wowBounceIn {
  0%   { opacity: 0; transform: scale(0.3); }
  50%  { opacity: 1; transform: scale(1.05); }
  70%  { transform: scale(0.95); }
  100% { opacity: 1; transform: scale(1); }
}

/* Flip In X */
@keyframes wowFlipInX {
  from {
    opacity: 0;
    transform: perspective(600px) rotateX(25deg);
  }
  to {
    opacity: 1;
    transform: perspective(600px) rotateX(0);
  }
}

/* ========================================
   Animation Applications
   ======================================== */

/* ---- Common timing for all animations ---- */
.wow.fadeInUp.animated,
.wow.fadeInDown.animated,
.wow.fadeInLeft.animated,
.wow.fadeInRight.animated,
.wow.fadeIn.animated,
.wow.zoomIn.animated,
.wow.zoomInUp.animated,
.wow.bounceIn.animated,
.wow.flipInX.animated {
  animation-duration: var(--wow-duration, 0.7s);
  animation-timing-function: cubic-bezier(0.22, 0.86, 0.39, 0.97);
  animation-fill-mode: both;
}

/* ---- Named animations ---- */
.wow.fadeInUp.animated    { animation-name: wowFadeInUp; }
.wow.fadeInDown.animated   { animation-name: wowFadeInDown; }
.wow.fadeInLeft.animated   { animation-name: wowFadeInLeft; }
.wow.fadeInRight.animated  { animation-name: wowFadeInRight; }
.wow.fadeIn.animated       { animation-name: wowFadeIn; }
.wow.zoomIn.animated       { animation-name: wowZoomIn; }
.wow.zoomInUp.animated     { animation-name: wowZoomInUp; }
.wow.bounceIn.animated     { animation-name: wowBounceIn; }
.wow.flipInX.animated      { animation-name: wowFlipInX; }

/* ---- Fallback: no JS ---- */
@media (prefers-reduced-motion: no-preference) {
  .wow-no-js .wow {
    opacity: 1;
    animation: none !important;
  }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .wow {
    opacity: 1;
    animation: none !important;
    transition: none !important;
  }
}