/* Transmultimedia Page Motion v1
   Default behavior: restrained rise + fade on first viewport entry. */

:root {
	--tm-motion-distance: 24px;
	--tm-motion-duration: 900ms;
	--tm-motion-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

[data-motion].motion-initialized {
	opacity: 0;
	transform: translate3d(0, var(--tm-motion-distance), 0);
	transition:
		opacity var(--tm-motion-duration) var(--tm-motion-ease),
		transform var(--tm-motion-duration) var(--tm-motion-ease);
	will-change: opacity, transform;
}

[data-motion="fade"].motion-initialized {
	transform: none;
}

[data-motion].motion-initialized.motion-visible {
	opacity: 1;
	transform: translate3d(0, 0, 0);
	will-change: auto;
}

.motion-delay-1 { transition-delay: 110ms !important; }
.motion-delay-2 { transition-delay: 220ms !important; }
.motion-delay-3 { transition-delay: 330ms !important; }
.motion-delay-4 { transition-delay: 440ms !important; }
.motion-delay-5 { transition-delay: 550ms !important; }
.motion-delay-6 { transition-delay: 660ms !important; }
.motion-delay-7 { transition-delay: 770ms !important; }
.motion-delay-8 { transition-delay: 880ms !important; }

@media (prefers-reduced-motion: reduce) {
	[data-motion].motion-initialized,
	[data-motion].motion-initialized.motion-visible {
		opacity: 1;
		transform: none;
		transition: none !important;
		will-change: auto;
	}
}

/* Load reveal: for hero/banner imagery that should animate on first paint,
   independently of the scroll-triggered IntersectionObserver system. */
[data-motion-load="rise"] {
	animation: tm-motion-load-rise var(--tm-motion-duration) var(--tm-motion-ease) 120ms both;
}

@keyframes tm-motion-load-rise {
	from {
		opacity: 0;
		transform: translate3d(0, 16px, 0);
	}
	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

@media (prefers-reduced-motion: reduce) {
	[data-motion-load="rise"] {
		animation: none !important;
		opacity: 1;
		transform: none;
	}
}