/* Block entrance animations — desktop, tablet, mobile */

:root {
	--ws-enter-distance: clamp(20px, 4vw, 40px);
	--ws-enter-duration: 0.85s;
	--ws-enter-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Visible by default when JS is disabled */
html:not(.ws-js) .ws-block-enter-target,
html:not(.ws-js) .site-header {
	opacity: 1;
	transform: none;
}

/* Hidden until revealed (frontend with JS) */
html.ws-js .ws-block-enter-target:not(.is-entered),
html.ws-js .site-header:not(.is-entered) {
	opacity: 0;
	transform: translate3d(0, var(--ws-enter-distance), 0);
}

html.ws-js .ws-block-enter-target.is-entered,
html.ws-js .site-header.is-entered {
	opacity: 1;
	transform: none;
	transition:
		opacity var(--ws-enter-duration) var(--ws-enter-ease),
		transform var(--ws-enter-duration) var(--ws-enter-ease);
	transition-delay: var(--ws-enter-delay, 0ms);
}

/* Hero — slightly softer motion */
html.ws-js .ws-hero:not(.is-entered) {
	transform: translate3d(0, clamp(16px, 3vw, 28px), 0);
}

/* Marquee — horizontal slide */
html.ws-js .ws-marquee:not(.is-entered) {
	transform: translate3d(calc(var(--ws-enter-distance) * -0.6), 0, 0);
}

/* Cases — dark block, fade up from below */
html.ws-js .ws-cases:not(.is-entered) {
	transform: translate3d(0, calc(var(--ws-enter-distance) * 0.85), 0);
}

@media (prefers-reduced-motion: reduce) {
	html.ws-js .ws-block-enter-target,
	html.ws-js .site-header {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}