/* ==========================================================================
   PawCare Veterinary Theme - Animations
   Scroll-reveal and motion utilities
   ========================================================================== */

/* ---------------------------------------------------------------------------
   Scroll Reveal - Starting States
   --------------------------------------------------------------------------- */
[data-animate="fade-up"] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}

[data-animate="fade-in"] {
  opacity: 0;
  transition: opacity var(--transition-slow);
}

[data-animate="slide-left"] {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}

[data-animate="slide-right"] {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}

[data-animate="scale-in"] {
  opacity: 0;
  transform: scale(0.92);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}

/* ---------------------------------------------------------------------------
   Visible State
   --------------------------------------------------------------------------- */
[data-animate].is-visible {
  opacity: 1;
  transform: translate(0, 0) scale(1);
}

/* ---------------------------------------------------------------------------
   Stagger Delays
   --------------------------------------------------------------------------- */
[data-animate-delay="100"] { transition-delay: 100ms; }
[data-animate-delay="200"] { transition-delay: 200ms; }
[data-animate-delay="300"] { transition-delay: 300ms; }
[data-animate-delay="400"] { transition-delay: 400ms; }
[data-animate-delay="500"] { transition-delay: 500ms; }
[data-animate-delay="600"] { transition-delay: 600ms; }

/* ---------------------------------------------------------------------------
   CSS Fallback - Force visible after 4 seconds
   If JavaScript fails to load, elements become visible
   --------------------------------------------------------------------------- */
@keyframes animateFallback {
  to {
    opacity: 1;
    transform: none;
  }
}

[data-animate] {
  animation: animateFallback 0s 4s forwards;
}

[data-animate].is-visible {
  animation: none;
}

/* ---------------------------------------------------------------------------
   Reduced Motion Preference
   Respect user's system preference for reduced motion
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  [data-animate],
  [data-animate="fade-up"],
  [data-animate="fade-in"],
  [data-animate="slide-left"],
  [data-animate="slide-right"],
  [data-animate="scale-in"] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }

  html {
    scroll-behavior: auto;
  }
}

/* ---------------------------------------------------------------------------
   Global Animation Disable
   Applied when [data-no-animate] is on the body element
   --------------------------------------------------------------------------- */
body[data-no-animate] [data-animate],
body[data-no-animate] [data-animate="fade-up"],
body[data-no-animate] [data-animate="fade-in"],
body[data-no-animate] [data-animate="slide-left"],
body[data-no-animate] [data-animate="slide-right"],
body[data-no-animate] [data-animate="scale-in"] {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
}