/* Base hidden state */
[data-animate] {
  opacity: 0;
  transition:
    opacity var(--animate-duration, 1000ms) ease,
    transform var(--animate-duration, 1000ms) ease;
  transition-delay: var(--animate-delay, 0ms);
}

/* Fade */
[data-animate="fade"] {
  transform: none;
}

/* Fade up/down */
[data-animate="fade-up"]   { transform: translateY(60px); }
[data-animate="fade-down"] { transform: translateY(-60px); }

/* Flip */
[data-animate="flip-left"]  { transform: perspective(2500px) rotateY(-100deg); backface-visibility: hidden; }
[data-animate="flip-right"] { transform: perspective(2500px) rotateY(100deg);  backface-visibility: hidden; }
[data-animate="flip-up"]    { transform: perspective(2500px) rotateX(-100deg); backface-visibility: hidden; }
[data-animate="flip-down"]  { transform: perspective(2500px) rotateX(100deg);  backface-visibility: hidden; }

/* Zoom */
[data-animate="zoom-in"]  { transform: scale(0.6); }
[data-animate="zoom-out"] { transform: scale(1.2); }

/* Visible state — JS adds this class */
[data-animate].is-visible {
  opacity: 1;
  transform: none;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  [data-animate],
  [data-animate].is-visible {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}