/* Initial hidden state */
.fade-up, .fade-left, .fade-right, .zoom-in {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .8s ease-out, transform .8s ease-out;
  will-change: opacity, transform;
}

/* Direction variants */
.fade-left  { transform: translateX(40px); }
.fade-right { transform: translateX(-40px); }
.zoom-in    { transform: scale(0.96); }

/* Active (revealed) */
.fade-up.active,
.fade-left.active,
.fade-right.active,
.zoom-in.active {
  opacity: 1;
  transform: none;
}