.reveal-item {
	opacity: 0;
	transform: translateY(32px);
	transition: opacity 0.7s cubic-bezier(0.25, 0.1, 0.25, 1), transform 0.7s cubic-bezier(0.25, 0.1, 0.25, 1);
	will-change: opacity, transform;
}

.reveal-item.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* Nach dem Einblenden die Vorwarnung zuruecknehmen.
   -------------------------------------------------
   will-change haelt eine eigene Zeichenebene offen. Solange die steht, wird
   alles darin bei jeder Aenderung neu gerastert - auch Kindelemente wie die
   Videos in den Projektkarten. Genau daraus entsteht das Flimmern, wenn
   danach noch etwas anderes animiert wird.

   Die Vorwarnung wird nur fuer die 0,7 Sekunden des Einblendens gebraucht.
   Danach ist sie Ballast, und der Browser darf die Ebene wieder aufloesen. */
.reveal-item.is-visible {
	will-change: auto;
}

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