.fade-in {
  opacity: 0;
  transform: translateY(20px); /* default fallback */
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  will-change: opacity, transform;
}

/* Direction-based transforms */
.fade-in[data-direction=top] {
  transform: translateY(-20px);
}

.fade-in[data-direction=bottom] {
  transform: translateY(20px);
}

.fade-in[data-direction=left] {
  transform: translateX(-20px);
}

.fade-in[data-direction=right] {
  transform: translateX(20px);
}

.fade-in.visible {
  opacity: 1;
  transform: translate(0, 0);
}

.fade-group > * {
  opacity: 0;
  transform: translateY(20px); /* default direction */
  transition: opacity 0.6s ease, transform 0.6s ease;
  will-change: opacity, transform;
}

/* Direction-based offsets */
.fade-group[data-direction=top] > * {
  transform: translateY(-20px);
}

.fade-group[data-direction=bottom] > * {
  transform: translateY(20px);
}

.fade-group[data-direction=left] > * {
  transform: translateX(-20px);
}

.fade-group[data-direction=right] > * {
  transform: translateX(20px);
}

.fade-in-visible {
  opacity: 1;
  transform: translate(0, 0);
}