/* THE HANGMAN motion (docs/spec/MOTION.md). Tokens live in tokens.css.
   Every frame has a still: outside prefers-reduced-motion: no-preference nothing moves and every
   element sits at its final frame. Only transform, opacity, clip-path and stroke-dashoffset animate.
   Loaded with media="(prefers-reduced-motion: no-preference)" (inc/assets.php), so it never blocks
   render for reduced-motion visitors. Layout bases and reduce-only rules live in components.css. */

/* ---------- 3.0 Reveal engine ---------- */
@media (prefers-reduced-motion: no-preference) {
	[data-reveal="land"]  { --hm-kf: hm-land; }
	[data-reveal="panel"] { --hm-kf: hm-panel-wipe; }
	[data-reveal="pop"]   { --hm-kf: hm-pop-in;   --hm-kf-ease: var(--hm-ease-pop); }
	[data-reveal="swing"] { --hm-kf: hm-swing-in; --hm-kf-ease: var(--hm-ease-swing); transform-origin: 50% 0; }
	[data-reveal="ink"]   { --hm-kf: hm-ink-draw; --hm-kf-ease: var(--hm-ease-ink); stroke-dasharray: 1; }
	[data-reveal="tv"]    { --hm-kf: hm-power-on; --hm-kf-ease: var(--hm-ease-standard); }

	@supports (animation-timeline: view()) {
		[data-reveal]:not([data-reveal="level"]) {
			animation: var(--hm-kf) var(--hm-kf-ease, var(--hm-ease-out)) both;
			animation-timeline: view();
			animation-range: entry calc(var(--i, 0) * 5%) entry calc(45% + var(--i, 0) * 5%);
		}
	}
	@supports not (animation-timeline: view()) {
		[data-reveal].is-armed:not([data-reveal="level"]) {
			animation: var(--hm-kf) var(--hm-dur-slam) var(--hm-kf-ease, var(--hm-ease-slam)) calc(var(--i, 0) * var(--hm-stagger)) both paused;
		}
		[data-reveal="swing"].is-armed { animation-duration: var(--hm-dur-sfx); }
		[data-reveal].is-in { animation-play-state: running; }
	}
}
@keyframes hm-land { from { translate: 0 var(--hm-shift-md); opacity: 0; } }
@keyframes hm-panel-wipe { from { clip-path: inset(-24px 100% -24px -24px); } to { clip-path: inset(-24px); } }
@keyframes hm-pop-in { from { scale: var(--hm-pop-from); rotate: var(--hm-tilt); opacity: 0; } }
@keyframes hm-swing-in { from { rotate: var(--hm-swing); } }
@keyframes hm-ink-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes hm-power-on { 0% { scale: 0 .006; } 35% { scale: 1 .006; } 100% { scale: 1 1; } }

/* ---------- 3.1 Hero entrance (signature), layered parallax ---------- */
.hm-hero { view-timeline: --hm-hero block; }
@media (prefers-reduced-motion: no-preference) {
	.hm-hero__sky {
		animation: hm-sky-in var(--hm-dur-slow) var(--hm-ease-slam) both, hm-sky-par linear both;
		animation-timeline: auto, --hm-hero;
		animation-range: normal, exit 0% exit 100%;
	}
	.hm-hero__clouds {
		animation: hm-clouds-in var(--hm-dur-slow) var(--hm-ease-slam) both, hm-clouds-par linear both;
		animation-timeline: auto, --hm-hero;
		animation-range: normal, exit 0% exit 100%;
	}
	.hm-hero--splash .hm-hero__img { animation: hm-mike-in 360ms var(--hm-ease-slam) 80ms both; }
	.hm-hero__title { animation: hm-title-stamp var(--hm-dur-slam) var(--hm-ease-slam) 120ms both; }
	.hm-hero__caption { animation: hm-wipe-x var(--hm-dur-base) var(--hm-ease-slam) 300ms backwards; }
	.hm-hero__punch > span { animation: hm-wipe-x var(--hm-dur-base) var(--hm-ease-slam) 380ms backwards; }
	.hm-hero__burst { animation: hm-pop-in var(--hm-dur-pop) var(--hm-ease-pop) 560ms both; }

	@supports (animation-timeline: view()) {
		.hm-hero.has-figure .hm-hero__img {
			animation: hm-mike-in 360ms var(--hm-ease-slam) 80ms both, hm-art-par linear both;
			animation-timeline: auto, --hm-hero;
			animation-range: normal, exit 0% exit 100%;
		}
	}

	/* The one idle: desktop only, single pass under 5s (WCAG 2.2.2), paused offscreen. */
	@media (min-width: 960px) and (hover: hover) {
		.hm-hero--splash .hm-hero__sky {
			animation:
				hm-sky-in var(--hm-dur-slow) var(--hm-ease-slam) both,
				hm-sky-par linear both,
				hm-sky-idle var(--hm-dur-idle) ease-in-out 1200ms 1 none;
			animation-timeline: auto, --hm-hero, auto;
			animation-range: normal, exit 0% exit 100%, normal;
		}
		.hm-hero.is-off .hm-hero__sky { animation-play-state: running, running, paused; }
		/* Pointer parallax: motion.js sets --px/--py in -1..1. transform composes with translate/rotate. */
		.hm-hero--splash .hm-hero__sky { transform: translate3d(calc(var(--px, 0) * 10px), calc(var(--py, 0) * 8px), 0); }
		.hm-hero--splash .hm-hero__clouds { transform: translate3d(calc(var(--px, 0) * 18px), calc(var(--py, 0) * 10px), 0); }
		.hm-hero--splash .hm-hero__img { transform: translate3d(calc(var(--px, 0) * -6px), calc(var(--py, 0) * -4px), 0); }
	}
}
@keyframes hm-sky-in { from { rotate: -10deg; scale: 1.15; } }
@keyframes hm-sky-par { to { translate: 0 18%; } }
@keyframes hm-clouds-in { from { translate: -4% 0; } }
@keyframes hm-clouds-par { to { translate: 0 30%; } }
@keyframes hm-art-par { to { translate: 0 8%; } }
@keyframes hm-sky-idle { 50% { rotate: 3deg; } }
@keyframes hm-mike-in { from { translate: 0 6%; scale: .96; } }
@keyframes hm-title-stamp { from { scale: var(--hm-slam-from); rotate: -4deg; } }
@keyframes hm-wipe-x { from { clip-path: inset(-12px 100% -12px -12px); } to { clip-path: inset(-12px); } }

/* ---------- 3.2 Level toy: the TV levels itself as the panel enters ---------- */
@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		.hm-level:not([data-touched]) [data-reveal="level"] {
			animation: hm-level-in var(--hm-ease-out) both;
			animation-timeline: view();
			animation-range: entry 10% cover 45%;
		}
	}
}
@keyframes hm-level-in { from { rotate: -6deg; } to { rotate: 0deg; } }

/* ---------- 3.4 Page turn between pages (View Transitions) ---------- */
@media (prefers-reduced-motion: no-preference) {
	@view-transition { navigation: auto; }
}
.hm-header { view-transition-name: hm-header; }
.hm-dock { view-transition-name: hm-dock; }
::view-transition-group(root) { animation-duration: var(--hm-dur-slow); }
::view-transition-old(root) { animation: hm-turn-out var(--hm-dur-base) var(--hm-ease-in) both; }
::view-transition-new(root) { animation: hm-turn-in var(--hm-dur-slow) var(--hm-ease-slam) both; }
html:active-view-transition-type(back)::view-transition-old(root) { animation-name: hm-turn-out-back; }
html:active-view-transition-type(back)::view-transition-new(root) { animation-name: hm-turn-in-back; }
@keyframes hm-turn-out { to { translate: -6% 0; opacity: .6; } }
@keyframes hm-turn-in { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0); } }
@keyframes hm-turn-out-back { to { translate: 6% 0; opacity: .6; } }
@keyframes hm-turn-in-back { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }

/* ---------- 3.5 Halftone shimmer on hover (CTAs) ---------- */
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
	.hm-btn::after, .hm-shimmer::after {
		content: "";
		position: absolute;
		inset: 0 -100% 0 auto;
		width: 300%;
		z-index: -1;
		pointer-events: none;
		background: radial-gradient(circle at center, color-mix(in srgb, white 55%, transparent) 1.2px, transparent 1.7px) 0 0 / 7px 7px;
		-webkit-mask: linear-gradient(100deg, transparent 38%, #000 46% 54%, transparent 62%);
		mask: linear-gradient(100deg, transparent 38%, #000 46% 54%, transparent 62%);
		translate: -66% 0;
		opacity: 0;
	}
	.hm-btn--dark::after { background-image: radial-gradient(circle at center, color-mix(in srgb, var(--hm-yellow) 40%, transparent) 1.2px, transparent 1.7px); }
	.hm-btn:hover::after, .hm-btn:focus-visible::after, .hm-shimmer:hover::after, .hm-shimmer:focus-visible::after { animation: hm-shimmer 520ms var(--hm-ease-standard) both; }
}
@keyframes hm-shimmer { 0% { translate: -66% 0; opacity: 1; } 100% { translate: 0 0; opacity: 1; } }

/* ---------- 3.6 Ink-draw underline (footer, prose and sign links) ---------- */
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
	.hm-inklink::after, .hm-footer__col li a::after {
		content: "";
		position: absolute;
		left: -2px;
		right: -2px;
		bottom: .35rem;
		height: .42em;
		background: var(--hm-orange);
		-webkit-mask: var(--hm-fx-swash) 0 0 / 100% 100% no-repeat;
		mask: var(--hm-fx-swash) 0 0 / 100% 100% no-repeat;
		clip-path: inset(0 100% 0 0);
		transition: clip-path var(--hm-dur-base) var(--hm-ease-ink);
		pointer-events: none;
	}
	.hm-inklink:hover, .hm-inklink:focus-visible, .hm-footer__col li a:hover, .hm-footer__col li a:focus-visible { text-decoration-color: transparent !important; }
	.hm-inklink:hover::after, .hm-inklink:focus-visible::after, .hm-footer__col li a:hover::after, .hm-footer__col li a:focus-visible::after { clip-path: inset(0); }
}

/* ---------- 3.8 Steps: the number badge pops after its panel lands ---------- */
@media (max-width: 767px) { .hm-steps__item[data-reveal], .hm-areas__item[data-reveal] { --i: 0 !important; } }
@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		.hm-steps__item[data-reveal]::before {
			animation: hm-pop-in var(--hm-ease-pop) both;
			animation-timeline: view();
			animation-range: entry calc(30% + var(--i, 0) * 5%) entry calc(60% + var(--i, 0) * 5%);
		}
	}
	@supports not (animation-timeline: view()) {
		.hm-steps__item.is-armed::before { animation: hm-pop-in var(--hm-dur-pop) var(--hm-ease-pop) calc(var(--i, 0) * var(--hm-stagger) + 200ms) both paused; }
		.hm-steps__item.is-in::before { animation-play-state: running; }
	}
}

/* ---------- 3.9 Price burst wind-up on hover ---------- */
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
	.hm-offer__burst { transition: scale var(--hm-dur-fast) var(--hm-ease-standard), rotate var(--hm-dur-fast) var(--hm-ease-standard); }
	.hm-offer__panel:hover .hm-offer__burst { scale: 1.04; rotate: -3deg; }
}

/* ---------- 3.11 FAQ: answers drop into place ---------- */
@media (prefers-reduced-motion: no-preference) {
	.hm-faq__item[open] .hm-faq__a { animation: hm-drop var(--hm-dur-fast) var(--hm-ease-out) backwards; }
}
@keyframes hm-drop { from { translate: 0 calc(var(--hm-shift-sm) * -1); opacity: 0; } }

/* ---------- 3.12 CTA band: rays sweep as it comes up ---------- */
@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		.hm-cta::before { animation: hm-rays-sweep linear both; animation-timeline: view(); animation-range: cover 0% cover 60%; }
	}
}
@keyframes hm-rays-sweep { from { rotate: -12deg; } to { rotate: 0deg; } }

/* ---------- 3.15 Buttons under reduced motion: feedback without movement ---------- */

/* ---------- 3.16 SFX onomatopoeia (decorative, aria-hidden, created by motion.js) ---------- */
.hm-sfx-pop {
	position: absolute;
	z-index: 5;
	top: -.6em;
	right: -.4em;
	pointer-events: none;
	font-family: var(--hm-font-display);
	font-size: clamp(1.6rem, 1.2rem + 2vw, 2.4rem);
	line-height: 1;
	color: var(--hm-yellow);
	-webkit-text-stroke: 2px var(--hm-ink);
	paint-order: stroke fill;
	text-shadow: 3px 3px 0 var(--hm-ink);
	rotate: -8deg;
	white-space: nowrap;
	animation: hm-sfx var(--hm-dur-sfx) linear both;
}
@keyframes hm-sfx {
	0%   { scale: .4; opacity: 1; animation-timing-function: steps(3, end); }
	25%  { scale: 1; }
	70%  { scale: 1.05; translate: 0 0; opacity: 1; animation-timing-function: cubic-bezier(.4, 0, 1, 1); }
	100% { scale: 1.1; translate: 0 -8px; opacity: 0; }
}

/* ---------- 3.21 Footer stamp ---------- */
@media print {
	*, *::before, *::after { animation: none !important; transition: none !important; clip-path: none !important; }
}