/* --------------------------------------------------------------------------
   17. ANIMATION REVEAL CLASSES
   -------------------------------------------------------------------------- */
.reveal-up,
.reveal-left,
.reveal-right,
.reveal-card {
  opacity: 0;
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal-up { transform: translateY(30px); }
.reveal-left { transform: translateX(-30px); }
.reveal-right { transform: translateX(30px); }
.reveal-card { transform: translateY(20px); }

.reveal-up.active,
.reveal-left.active,
.reveal-right.active,
.reveal-card.active {
  opacity: 1;
  transform: translate(0, 0);
}