/* Motion — transform/opacity; @keyframes are global in CSS → unique km-v4-* names */
@keyframes km-v4-glow-pulse {
	0%,
	100% {
		box-shadow: 0 0 20px var(--v4-hl-35), 0 0 40px var(--v4-deep-15);
	}
	50% {
		box-shadow: 0 0 28px var(--v4-pk-45), 0 0 56px var(--v4-vi-35);
	}
}

@keyframes km-v4-shimmer {
	0% {
		background-position: 200% 0;
	}
	100% {
		background-position: -200% 0;
	}
}

@keyframes km-v4-mist-drift {
	0%,
	100% {
		opacity: 0.35;
		transform: translateX(0) scale(1);
	}
	50% {
		opacity: 0.55;
		transform: translateX(-2%) scale(1.02);
	}
}

.ui-v4 .km-x4-glow-pulse {
	animation: km-v4-glow-pulse 4s ease-in-out infinite;
}

.ui-v4 .km-x4-shimmer {
	background: linear-gradient(
		90deg,
		rgba(255, 255, 255, 0) 0%,
		rgba(251, 207, 232, 0.45) 50%,
		rgba(255, 255, 255, 0) 100%
	);
	background-size: 200% 100%;
	animation: km-v4-shimmer 3.5s linear infinite;
}

.ui-v4 .km-x4-hero-wrap__mist {
	animation: km-v4-mist-drift 18s ease-in-out infinite;
}

/* Không animate filter/hue trên wrap hero — gây moiré, “lưới chấm” trên poster */

@media (prefers-reduced-motion: reduce) {
	.ui-v4 .km-x4-glow-pulse,
	.ui-v4 .km-x4-shimmer,
	.ui-v4 .km-x4-hero-wrap__mist,
	.ui-v4 [data-km-x4-reveal] {
		animation: none !important;
		transition: none !important;
	}
}

.ui-v4 [data-km-x4-reveal] {
	opacity: 0;
	transform: translate3d(0, 18px, 0);
	transition: opacity 0.65s ease, transform 0.65s ease;
}

.ui-v4 [data-km-x4-reveal].km-x4-reveal--visible {
	opacity: 1;
	transform: translate3d(0, 0, 0);
}