/*
 * No hardcoded animation durations in this file — every timing value reads
 * var(--motion-duration)/var(--motion-ease)/var(--motion-distance)/
 * var(--motion-stagger), which ThemeVarsBuilder resolves server-side from
 * the admin's motion_preset/motion_speed/stagger_ms (§11.3). This is what
 * the "no hardcoded motion" test (§11.3) asserts.
 */

[data-scroll-reveal] { --mk-reveal-distance: var(--motion-distance); }

.mk-reveal {
	opacity: 0;
	transform: translateY(var(--mk-reveal-distance));
	transition: opacity var(--motion-duration) var(--motion-ease), transform var(--motion-duration) var(--motion-ease);
}
.mk-reveal.is-visible { opacity: 1; transform: none; }

html[data-scroll-reveal-style="none"] .mk-reveal,
html[data-motion-preset="off"] .mk-reveal { opacity: 1; transform: none; transition: none; }

html[data-card-hover-style="lift-shadow"] .mk-card {
	transition: transform var(--motion-duration) var(--motion-ease), box-shadow var(--motion-duration) var(--motion-ease);
}
html[data-card-hover-style="lift-shadow"] .mk-card:hover {
	transform: translateY(calc(var(--motion-distance) * -1));
	box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
}

html[data-image-hover-style="zoom"] .mk-card__media img {
	transition: transform var(--motion-duration) var(--motion-ease);
}
html[data-image-hover-style="zoom"] .mk-card:hover .mk-card__media img { transform: scale(1.06); }

html[data-scroll-progress="1"] .mk-scroll-progress {
	position: fixed;
	top: 0;
	left: 0;
	height: 3px;
	background: var(--accent);
	z-index: 999;
	width: var(--mk-scroll-progress, 0%);
}

html[data-cursor-style]:not([data-cursor-style="none"]) .mk-cursor {
	position: fixed;
	pointer-events: none;
	z-index: 998;
	border-radius: 50%;
	transform: translate(-50%, -50%);
}
@media (pointer: coarse) {
	.mk-cursor { display: none !important; }
}

html[data-loader-style="bar"] .mk-loader {
	position: fixed;
	inset: 0 0 auto 0;
	height: 3px;
	background: var(--accent);
	transition: width var(--motion-duration) var(--motion-ease);
}

@media (prefers-reduced-motion: reduce) {
	.mk-reveal, .mk-card, .mk-card__media img { transition: none !important; animation: none !important; }
	.mk-reveal { opacity: 1 !important; transform: none !important; }

	/* Autoplay is disabled for every video kind when the visitor prefers
	   reduced motion (§6.2) — the poster still is shown instead, and the
	   third-party embed is not rendered at all. */
	.mk-hero__slide video,
	.mk-hero__embed { display: none !important; }
	.mk-hero__media--reduced { display: block !important; }

	/* An animated GIF cannot be paused, so the stored first frame is
	   swapped in by the motion engine; suppress the Ken Burns drift too. */
	.mk-hero__media { animation: none !important; }
}

@media (max-width: 767px) {
	html[data-motion-on-mobile="off"] .mk-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
	html[data-motion-on-mobile="reduced"] { --motion-duration: calc(var(--motion-duration) * 0.6); }
}

/* ---------- Hero first-impression polish (§11.1 #18/#21) ----------
 * Above the fold, so this runs as a plain CSS animation on load rather
 * than the IntersectionObserver-driven scroll reveal above — no delay
 * waiting for a scroll event, and --motion-duration already collapses
 * to 0ms under reduced motion / motion_preset=off (tokens.css,
 * Theme\Motion::resolve_vars), so `both` fill-mode just snaps content
 * straight to its visible state with no extra guard needed here. */
@keyframes mk-kenburns {
	from { transform: scale(1); }
	to { transform: scale(1.08); }
}
html[data-hero-animation="ken-burns-drift"] .mk-hero__slide.is-active > .mk-hero__media-wrap .mk-hero__media {
	animation: mk-kenburns calc(var(--motion-duration) * 24) var(--motion-ease) both;
}

@keyframes mk-hero-reveal {
	from { opacity: 0; transform: translateY(var(--motion-distance)); }
	to { opacity: 1; transform: none; }
}
html:not([data-text-reveal-style="none"]) .mk-hero__eyebrow,
html:not([data-text-reveal-style="none"]) .mk-hero__headline,
html:not([data-text-reveal-style="none"]) .mk-hero__body,
html:not([data-text-reveal-style="none"]) .mk-hero__copy > .mk-btn {
	animation: mk-hero-reveal var(--motion-duration) var(--motion-ease) both;
}
html:not([data-text-reveal-style="none"]) .mk-hero__eyebrow { animation-delay: 0ms; }
html:not([data-text-reveal-style="none"]) .mk-hero__headline { animation-delay: var(--motion-stagger); }
html:not([data-text-reveal-style="none"]) .mk-hero__body { animation-delay: calc(var(--motion-stagger) * 2); }
html:not([data-text-reveal-style="none"]) .mk-hero__copy > .mk-btn { animation-delay: calc(var(--motion-stagger) * 3); }

/* ---------- Page transition (§11.1 #22) ----------
 * A soft whole-page fade-in on load is the safe subset of "page
 * transition" to do in pure CSS — intercepting link clicks to animate
 * *out* before navigating needs JS restraint (skipping new tabs,
 * modified clicks, hash links, external hosts) that isn't worth the
 * risk for a first pass. */
@keyframes mk-page-fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}
html[data-page-transition="fade"] body {
	animation: mk-page-fade-in var(--motion-duration) var(--motion-ease) both;
}