/* ==========================================================================
   scroll-animate.css
   Styles for the custom "Animate On Scroll" library.
   Each [data-animate] element starts hidden/offset, then transitions to its
   final resting state once the ".is-visible" class is added by the JS.
   ========================================================================== */

[data-animate] {
  opacity: 0;
  will-change: opacity, transform;
  transition-property: opacity, transform;
  transition-duration: var(--sa-duration, 700ms);
  transition-timing-function: var(--sa-easing, cubic-bezier(0.25, 0.8, 0.25, 1));
  transition-delay: var(--sa-delay, 0ms);
}

/* ---- fade-in: simple opacity fade, no movement ---- */
[data-animate="fade-in"] {
  transform: translateY(0) scale(1);
}

/* ---- fade-up: fades in while rising up from below ---- */
[data-animate="fade-up"] {
  transform: translateY(var(--sa-distance, 40px));
}

/* ---- zoom-in: fades in while scaling up from smaller ---- */
[data-animate="zoom-in"] {
  transform: scale(var(--sa-zoom-start, 0.6));
}

/* ---- zoom-in-up: fades in while scaling up AND rising from below ---- */
[data-animate="zoom-in-up"] {
  transform: translateY(var(--sa-distance, 40px)) scale(var(--sa-zoom-start, 0.6));
}
flip-up
/* ---- flip-up: fades in while scaling up AND rising from below ---- */
[data-animate="flip-up"] {
  transform: translateY(var(--sa-distance, 40px)) scale(var(--sa-zoom-start, 0.6));
}

/* ---- flip-up: fades in while rotating up around its bottom edge ---- */
[data-animate="flip-up"] {
  transform-origin: bottom center;
  transform: perspective(1000px) rotateX(var(--sa-flip-angle, -80deg));
}

/* ---- Final visible state: applied by JS when element enters viewport ---- */
[data-animate].is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ---- Respect users who prefer less motion ---- */
@media (prefers-reduced-motion: reduce) {
  [data-animate] {
    transition-duration: 1ms !important;
    transform: none !important;
  }
}