/* База */
.reveal {
  --dist: 10px;         /* дистанция выезда */
  --dur: 1.6s;           /* длительность */
  --delay: 0s;          /* задержка */
  --dx: 0;              /* направление по X: -1, 0, 1 */
  --dy: 0;              /* направление по Y: -1, 0, 1 */

  opacity: 0;
  transform: translate(
    calc(var(--dx) * var(--dist)),
    calc(var(--dy) * var(--dist))
  );
  transition:
    opacity var(--dur) ease,
    transform var(--dur) ease;
  transition-delay: var(--delay);
  will-change: opacity, transform;
}

/* Направления */
.from-left  { --dx: -1; --dy: 0; }
.from-right { --dx:  1; --dy: 0; }
.from-up    { --dx:  0; --dy:-1; }
.from-down  { --dx:  0; --dy: 1; }

/* Когда во вьюпорте */
.reveal.in-view {
  opacity: 1;
  transform: translate(0, 0);
}

/* Доступность */
@media (prefers-reduced-motion: reduce) {
  .reveal { transition: none; transform: none; opacity: 1; }
}