.crystal-drift {
	position: absolute;
	inset-inline: 0;
	top: 0;
	z-index: 40;
	overflow-x: hidden;
	pointer-events: none;
}

/* Kristalle stehen an fester Stelle im Dokument (wandern also mit dem
   normalen Scrollen "hoch", ganz ohne JS) und drehen sich dabei über eine
   native CSS scroll-Timeline weiter — läuft auf dem Compositor-Thread,
   dadurch kein Hinterherhinken/Nachschnappen wie bei JS-Scroll-Handlern
   auf Mobile. scroll(root) mit einer PRO KRISTALL individuellen
   animation-range (gesetzt inline via mk_crystal_drift(), relativ zur
   eigenen top-Position) statt einer für die ganze Seite fixen Range. */
.crystal-float {
	position: absolute;
	animation: crystal-spin linear;
	animation-timeline: scroll(root);
	will-change: transform;
}

.crystal-float__img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.15));
}

@keyframes crystal-spin {
	from {
		transform: translateY(0) rotate(var(--rotate-start));
	}
	to {
		/* zusätzlicher Eigenauftrieb nach oben, obendrauf auf das normale
		   Mitscrollen. -52vh = -40vh * 1.3 */
		transform: translateY(-52vh) rotate(var(--rotate-end));
	}
}

/* Browser ohne scroll()-Timeline (z.B. ältere Safari): Kristalle bleiben
   einfach an ihrer Stelle stehen, ohne kaputte/statische Rotation zu zeigen. */
@supports not (animation-timeline: scroll()) {
	.crystal-float {
		animation: none;
		transform: rotate(var(--rotate-start));
	}
}