/**
 * Animations — Light Design System §12 (400–800ms)
 */

.osram-fade-up {
	opacity: 0;
	transform: translateY(24px);
	transition:
		opacity var(--transition-smooth) ease,
		transform var(--transition-smooth) ease;
}

.osram-fade-up.is-visible,
.osram-fade-up.in-view {
	opacity: 1;
	transform: translateY(0);
}

.osram-reveal {
	overflow: hidden;
}

.osram-reveal > * {
	transition: transform var(--transition-slow) ease;
}

.osram-slow-zoom {
	transition: transform var(--transition-slow) ease;
}

.osram-slow-zoom:hover {
	transform: scale(1.03);
}

a,
.button,
.nav > li > a,
.product-small,
.box-image img {
	transition:
		color var(--transition-fast) ease,
		background-color var(--transition-fast) ease,
		border-color var(--transition-fast) ease,
		opacity var(--transition-fast) ease,
		transform var(--transition-smooth) ease;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.osram-fade-up {
		opacity: 1;
		transform: none;
	}

	.osram-slow-zoom:hover {
		transform: none;
	}
}