/* Basis-Funktion */
.reveal{
  opacity:0; transform:translate3d(0,0,0);
  --a-ease:cubic-bezier(.22,.61,.36,1);
  --a-delay:0ms;
  --a-dist:30px; /* Slide-Distanz */
  transition:
    opacity var(--a-dur) var(--a-ease) var(--a-delay),
    transform var(--a-dur) var(--a-ease) var(--a-delay);
  will-change: opacity, transform;
}
.reveal.in{ opacity:1; transform:none }

/* Zusatz-Funktionen */
.slide-up    { transform:translate3d(0, var(--a-dist), 0) }
.slide-down  { transform:translate3d(0, calc(var(--a-dist)*-1), 0) }
.slide-left  { transform:translate3d(var(--a-dist), 0, 0) }
.slide-right { transform:translate3d(calc(var(--a-dist)*-1), 0, 0) }
.fade-in     { opacity:0 }

/* Geschwindigkeiten */
.fast { --a-dur:800ms }
.slow { --a-dur:1700ms }
.ultra-slow { --a-dur:3500ms }

/* optionale Delays für Staffelung */
.delay-1{ --a-delay:140ms } .delay-2{ --a-delay:280ms } .delay-3{ --a-delay:420ms }

@media (prefers-reduced-motion: reduce){
  .reveal, .reveal.in{ transition:none; transform:none; opacity:1 }
}