/* Base hidden state */
[data-animate] {
  opacity: 0;
  transition: all 0.8s ease;
  will-change: opacity, transform;
}

/* When visible */
[data-animate].animated {
  opacity: 1;
  transform: none;
}

/* Direction-specific starting positions */
[data-animate="fade-bottom"] {
  transform: translateY(40px);
}

[data-animate="fade-top"] {
  transform: translateY(-40px);
}

[data-animate="fade-left"] {
  transform: translateX(-40px);
}

[data-animate="fade-right"] {
  transform: translateX(40px);
}