.fi {
  opacity: 0;
  transform: translateZ(0);
  will-change: transform, opacity;
}

.fi[data-dir="down"] {
  transform: translateY(-20px) translateZ(0);
}

.fi[data-dir="up"] {
  transform: translateY(20px) translateZ(0);
}

.fi.in {
  opacity: 1;
  transform: translateZ(0);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

/* prefers-reduced-motion: skip transforms entirely, fade opacity only */
html.fi-reduced-motion .fi {
  transform: translateZ(0);
}

html.fi-reduced-motion .fi.in {
  opacity: 1;
  transform: translateZ(0);
  transition: opacity 0.6s ease;
}