/* ============================================================================
 * DS2+ Extensions — 4-motion.css
 *
 * Hover states (.hover-lift, .hover-glow, .hover-underline-slide, .hover-brighten)
 * Reveal on scroll via animation-timeline: view() (CSS-only, Firefox assumes
 *   content visible without animation)
 * Loading states (.is-loading skeleton, .spinner)
 * Global prefers-reduced-motion: reduce overrides (last section).
 *
 * Depends on --transition-smooth, --shadow-hover, --hover-glow-ring,
 * --shimmer-stop from 1-tokens.css, and --color-brand, --color-brand-active
 * from tokens.css.
 * ==========================================================================*/

/* === Hover states === */
.hover-lift {
	transition:
		transform var(--transition-smooth),
		box-shadow var(--transition-smooth);
}
.hover-lift:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-hover);
}

.hover-glow {
	transition: box-shadow var(--transition-smooth);
}
.hover-glow:hover {
	box-shadow: 0 0 0 4px var(--hover-glow-ring);
}

.hover-underline-slide {
	position: relative;
	text-decoration: none;
}
.hover-underline-slide::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 0;
	height: 1px;
	background: currentColor;
	transition: width var(--transition-smooth);
}
.hover-underline-slide:hover::after {
	width: 100%;
}

.hover-brighten {
	transition: filter var(--transition-smooth);
}
.hover-brighten:hover {
	filter: brightness(1.05);
}

/* === Reveal on scroll — CSS-only, Firefox degrades to immediate visibility ===
   Transform-only (no opacity) so text remains at full contrast throughout the
   animation — axe-core flags mid-opacity as WCAG AA color-contrast violations
   on scroll-driven animations. Slide-up alone still reads as "reveal" motion
   while keeping WCAG AA clean.

   Auto-applied on marketing surfaces (.mk-section descendants .card--feature,
   .card--outlined, .mk-cta-card, .vitrine-proof-numbers children) so route
   authors don't hand-annotate every article. Opt-out with .no-motion on a
   specific element if needed. The legacy .reveal-fade-up class stays
   supported for non-.mk-section contexts. */
@supports (animation-timeline: view()) {
	.reveal-fade-up,
	.mk-section .card--feature:not(.no-motion),
	.mk-section .card--outlined:not(.no-motion),
	.mk-section .mk-cta-card:not(.no-motion),
	.vitrine-proof-numbers > .card:not(.no-motion) {
		animation: reveal-fade-up linear;
		animation-timeline: view();
		animation-range: entry 10% cover 30%;
	}
	@keyframes reveal-fade-up {
		from {
			transform: translateY(20px);
		}
		to {
			transform: translateY(0);
		}
	}
}

/* Auto-apply hover-lift to marketing cards (same surface contract as above). */
.mk-section .card--feature:not(.no-motion),
.mk-section .card--outlined:not(.no-motion) {
	transition:
		transform var(--transition-smooth),
		box-shadow var(--transition-smooth);
}
.mk-section .card--feature:not(.no-motion):hover,
.mk-section .card--outlined:not(.no-motion):hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-hover);
}

/* === Loading states === */
.is-loading {
	position: relative;
	pointer-events: none;
}
.is-loading::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		90deg,
		transparent,
		var(--shimmer-stop),
		transparent
	);
	background-size: 200% 100%;
	animation: shimmer 1.5s linear infinite;
}
@keyframes shimmer {
	from {
		background-position: 200% 0;
	}
	to {
		background-position: -200% 0;
	}
}

.spinner {
	display: inline-block;
	width: 1rem;
	height: 1rem;
	border: 2px solid var(--color-brand-active);
	border-top-color: var(--color-brand);
	border-radius: 50%;
	animation: spin 900ms linear infinite;
}
@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}

/* === Respect reduced-motion (global override — last in file intentionally) === */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
	.hover-lift,
	.hover-glow {
		transform: none !important;
	}
	.reveal-fade-up {
		transform: none !important;
	}
	.is-loading::before {
		animation: none !important;
		background: none;
	}
	.spinner {
		animation: none !important;
		border-color: var(--color-brand);
	}
}