/* Lunardraw home: the animation layer over the desktop stage (assets/js/stage-fx.js).
   Every position is in the artwork's design pixels, scaled by --ml-u like stage.css. */

.ml-fx {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
	contain: strict; /* repaints stay inside the animation layer */
}

.ml-fx > span,
.ml-fx-lane > span {
	position: absolute;
	display: block;
}

.ml-fx > span {
	left: calc(var(--x) * var(--ml-u));
	top: calc(var(--y) * var(--ml-u));
	width: calc(var(--w, 0) * var(--ml-u));
	height: calc(var(--h, 0) * var(--ml-u));
}

.ml-stage.is-fx-paused .ml-fx,
.ml-stage.is-fx-paused .ml-fx * {
	animation-play-state: paused !important;
}

/* a copy of the artwork, lined up exactly with the original underneath */
.ml-fx-sign,
.ml-fx-water {
	background-image: url("../images/stage.webp?v=5");
	background-image: image-set(url("../images/stage.webp?v=5") 1x, url("../images/stage@2x.webp?v=5") 2x);
	background-size: calc(1586 * var(--ml-u)) calc(992 * var(--ml-u));
	background-position: calc(var(--x) * var(--ml-u) * -1) calc(var(--y) * var(--ml-u) * -1);
	background-repeat: no-repeat;
	-webkit-mask-image: radial-gradient(closest-side, #000 72%, transparent);
	mask-image: radial-gradient(closest-side, #000 72%, transparent);
}

/* ------------------------------------------------------------------ stars */
.ml-fx-star {
	width: calc(3 * var(--ml-u)) !important;
	height: calc(3 * var(--ml-u)) !important;
	background: #f4f0ff;
	opacity: 0;
	animation: ml-twinkle 4s ease-in-out infinite;
}

.ml-fx-star.is-blue {
	background: var(--ml-electric-glow);
}

@keyframes ml-twinkle {
	0%, 100% { opacity: 0; }
	45% { opacity: 0.95; }
	55% { opacity: 0.6; }
	70% { opacity: 0; }
}

/* ------------------------------------------------------------------ neon signs */
.ml-fx-sign {
	filter: brightness(1.45) saturate(1.35);
	opacity: 0;
	mix-blend-mode: screen;
}

.ml-fx-sign.is-pulse {
	animation: ml-neon-pulse 4.5s ease-in-out infinite;
}

.ml-fx-sign.is-buzz {
	animation: ml-neon-buzz 7s steps(1, end) infinite;
}

@keyframes ml-neon-pulse {
	0%, 100% { opacity: 0.15; }
	50% { opacity: 0.7; }
}

/* mostly bright, with a short electrical stutter */
@keyframes ml-neon-buzz {
	0% { opacity: 0.6; }
	62% { opacity: 0.6; }
	63% { opacity: 0; }
	64% { opacity: 0.75; }
	66% { opacity: 0.05; }
	67% { opacity: 0.7; }
	90% { opacity: 0.55; }
	100% { opacity: 0.6; }
}

/* ------------------------------------------------------------------ water */
.ml-fx-water {
	opacity: 0.55;
	mix-blend-mode: screen;
	filter: brightness(1.2);
	animation: ml-water 3.6s ease-in-out infinite alternate;
}

@keyframes ml-water {
	0% { transform: translateX(calc(-2 * var(--ml-u))) scaleY(1); opacity: 0.35; }
	50% { opacity: 0.6; }
	100% { transform: translateX(calc(2 * var(--ml-u))) scaleY(1.02); opacity: 0.4; }
}

/* ------------------------------------------------------------------ number chamber */
.ml-fx-ring {
	border-radius: 50%;
	background: radial-gradient(circle, transparent 52%, rgba(150, 120, 255, 0.75) 60%, rgba(var(--ml-cyan-rgb), 0.45) 66%, transparent 74%);
	mix-blend-mode: screen;
	opacity: 0.2;
	animation: ml-ring 2.6s ease-in-out infinite;
}

@keyframes ml-ring {
	0%, 100% { opacity: 0.15; transform: scale(0.96); }
	30% { opacity: 0.95; transform: scale(1.03); }
	60% { opacity: 0.35; transform: scale(1); }
}

.ml-fx-tube {
	overflow: hidden;
	border-radius: calc(19 * var(--ml-u)) calc(19 * var(--ml-u)) calc(3 * var(--ml-u)) calc(3 * var(--ml-u));
	mix-blend-mode: screen;
}

/* the Moonball tube glows gold */
.ml-fx-ring.is-gold {
	background: radial-gradient(circle, transparent 52%, rgba(255, 196, 80, 0.8) 60%, rgba(255, 150, 40, 0.45) 66%, transparent 74%);
}

.ml-fx-tube.is-gold .ml-fx-energy {
	background: radial-gradient(ellipse at 50% 50%, rgba(255, 226, 150, 0.6), rgba(255, 160, 40, 0.28) 45%, transparent 70%);
}

.ml-fx-energy {
	position: absolute;
	left: 15%;
	right: 15%;
	height: 34%;
	bottom: -40%;
	background: radial-gradient(ellipse at 50% 50%, rgba(170, 190, 255, 0.55), rgba(110, 80, 255, 0.25) 45%, transparent 70%);
	animation: ml-energy 2.6s linear infinite;
}

@keyframes ml-energy {
	0% { transform: translateY(0); opacity: 0; }
	15% { opacity: 1; }
	85% { opacity: 0.8; }
	100% { transform: translateY(calc(-300% - 20%)); opacity: 0; }
}

/* ------------------------------------------------------------------ agent eyes */
.ml-fx-eyes {
	border-radius: 50%;
	background: radial-gradient(ellipse at 50% 50%, rgba(190, 150, 255, 0.85), rgba(var(--ml-violet-rgb), 0.35) 40%, transparent 70%);
	mix-blend-mode: screen;
	animation: ml-eyes 3.2s ease-in-out infinite;
}

@keyframes ml-eyes {
	0%, 100% { opacity: 0.25; }
	50% { opacity: 1; }
	92% { opacity: 0.9; }
	94% { opacity: 0; }  /* blink */
	96% { opacity: 0.9; }
}

/* ------------------------------------------------------------------ windows */
.ml-fx-win {
	background: rgba(8, 8, 28, 0.9);
	opacity: 0;
	transition: opacity 0.35s steps(2, end);
}

.ml-fx-win.is-off {
	opacity: 1;
}

/* ------------------------------------------------------------------ hover-cars */
.ml-fx-lane {
	overflow: hidden;
}

.ml-fx-car {
	left: 0;
	top: calc(var(--lane) * var(--ml-u));
	width: calc(64 * var(--ml-u));
	height: calc(20 * var(--ml-u));
	animation: ml-car-right 14s linear infinite;
}

.ml-fx-car.is-left {
	animation-name: ml-car-left;
}

.ml-fx-car.is-left .ml-fx-car-body {
	transform: scaleX(-1);
}

.ml-fx-car-body {
	position: absolute;
	inset: 0;
	animation: ml-bob 1.8s ease-in-out infinite alternate;
}

.ml-fx-car svg {
	display: block;
	width: 100%;
	height: 100%;
	image-rendering: pixelated;
	filter: drop-shadow(0 calc(2 * var(--ml-u)) calc(4 * var(--ml-u)) rgba(var(--ml-neon-rgb), 0.7));
}

/* headlight beam and tail-light trail */
.ml-fx-car-body::before,
.ml-fx-car-body::after {
	content: "";
	position: absolute;
	top: 40%;
	height: 20%;
}

.ml-fx-car-body::before {
	left: 100%;
	width: 120%;
	background: linear-gradient(90deg, rgba(255, 220, 120, 0.55), transparent);
	clip-path: polygon(0 35%, 100% 0, 100% 100%, 0 65%);
}

.ml-fx-car-body::after {
	right: 100%;
	width: 90%;
	background: linear-gradient(270deg, rgba(255, 61, 110, 0.6), transparent);
}

@keyframes ml-car-right {
	from { transform: translateX(calc(-80 * var(--ml-u))); }
	to { transform: translateX(calc((var(--span) + 80) * var(--ml-u))); }
}

@keyframes ml-car-left {
	from { transform: translateX(calc((var(--span) + 80) * var(--ml-u))); }
	to { transform: translateX(calc(-80 * var(--ml-u))); }
}

@keyframes ml-bob {
	from { transform: translateY(calc(-2 * var(--ml-u))); }
	to { transform: translateY(calc(2 * var(--ml-u))); }
}

.ml-fx-car.is-left .ml-fx-car-body {
	animation-name: ml-bob-left;
}

@keyframes ml-bob-left {
	from { transform: scaleX(-1) translateY(calc(-2 * var(--ml-u))); }
	to { transform: scaleX(-1) translateY(calc(2 * var(--ml-u))); }
}

@media (prefers-reduced-motion: reduce) {
	.ml-fx {
		display: none;
	}
}