/* ============================================================
   Fixed field of slow-moving gradient orbs — site background layer.
   Namespaced (mlx-orb-field / mlx-orb) so it never clashes with a
   generic "orb-field" class used inside the block editor.

   Palette: #c0392b orbs (with a deeper #7b0a06 for variety) drifting
   over a #0a0b14 field. Tune via the custom properties below.
   ============================================================ */

#mlx-orbs.mlx-orb-field {
	--orb-color: #c0392b;
	--orb-color-2: #7b0a06;
	--orb-bg: #0a0b14;
	--orb-blur: 100px;
	--orb-opacity: 0.5;
	--orb-speed: 1.4;

	position: fixed;
	inset: 0;
	overflow: hidden;
	background: var(--orb-bg);
	z-index: 0;
	pointer-events: none;
}

.mlx-orb {
	position: absolute;
	border-radius: 50%;
	opacity: var(--orb-opacity);
	filter: blur(var(--orb-blur));
	background: radial-gradient(circle at 50% 50%, var(--orb-color) 0%, transparent 70%);
	will-change: transform;
	pointer-events: none;
}

.mlx-orb:nth-of-type(1) {
	width: 48vw; height: 48vw; top: -12vw; left: -8vw;
	animation: mlx-orb-a calc(64s * var(--orb-speed)) ease-in-out infinite alternate;
}
.mlx-orb:nth-of-type(2) {
	width: 40vw; height: 40vw; top: 12vh; left: 58vw;
	background: radial-gradient(circle at 50% 50%, var(--orb-color-2) 0%, transparent 70%);
	animation: mlx-orb-b calc(82s * var(--orb-speed)) ease-in-out infinite alternate;
	animation-delay: -14s;
}
.mlx-orb:nth-of-type(3) {
	width: 34vw; height: 34vw; top: 46vh; left: 4vw;
	animation: mlx-orb-b calc(54s * var(--orb-speed)) ease-in-out infinite alternate;
	animation-delay: -30s;
}
.mlx-orb:nth-of-type(4) {
	width: 30vw; height: 30vw; top: 40vh; left: 62vw;
	background: radial-gradient(circle at 50% 50%, var(--orb-color-2) 0%, transparent 70%);
	animation: mlx-orb-a calc(72s * var(--orb-speed)) ease-in-out infinite alternate;
	animation-delay: -8s;
}
.mlx-orb:nth-of-type(5) {
	width: 26vw; height: 26vw; top: 68vh; left: 30vw;
	animation: mlx-orb-b calc(60s * var(--orb-speed)) ease-in-out infinite alternate;
	animation-delay: -22s;
}
.mlx-orb:nth-of-type(6) {
	width: 22vw; height: 22vw; top: 74vh; left: 78vw;
	animation: mlx-orb-a calc(68s * var(--orb-speed)) ease-in-out infinite alternate;
	animation-delay: -40s;
}

@keyframes mlx-orb-a {
	0%   { transform: translate3d(0, 0, 0) scale(1); }
	50%  { transform: translate3d(6vw, 4vh, 0) scale(1.18); }
	100% { transform: translate3d(-4vw, -6vh, 0) scale(0.94); }
}
@keyframes mlx-orb-b {
	0%   { transform: translate3d(0, 0, 0) scale(1.05); }
	50%  { transform: translate3d(-7vw, 5vh, 0) scale(0.9); }
	100% { transform: translate3d(5vw, -4vh, 0) scale(1.2); }
}

@media (prefers-reduced-motion: reduce) {
	.mlx-orb { animation: none; }
}