/* Page entrance motion is applied only after JavaScript marks individual
 * content elements. Header, navigation and footer remain static. */
body.fase-page-motion { overflow-x: clip; }

body.fase-page-motion .fase-motion-item {
	opacity: 0;
	transition:
		opacity .64s cubic-bezier(.2, .7, .2, 1),
		transform .64s cubic-bezier(.2, .7, .2, 1);
	transition-delay: var(--fase-motion-delay, 0ms);
	will-change: opacity, transform;
}

body.fase-page-motion .fase-motion-item--up { transform: translate3d(0, 28px, 0); }
body.fase-page-motion .fase-motion-item--left { transform: translate3d(-34px, 0, 0); }
body.fase-page-motion .fase-motion-item--right { transform: translate3d(34px, 0, 0); }
body.fase-page-motion .fase-motion-item--zoom { transform: scale(.965); }
body.fase-page-motion .fase-motion-item--pop { transform: translate3d(0, 16px, 0) scale(.97); }

body.fase-page-motion .fase-motion-item.is-visible {
	opacity: 1;
	transform: none;
	will-change: auto;
}

/* Mobile safety: content must never depend on JavaScript or observer support
 * to become visible. Entrance motion remains a desktop-only enhancement. */
@media (max-width: 767px) {
	body.fase-page-motion .fase-motion-item {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
		will-change: auto !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.fase-page-motion .fase-motion-item {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}