/* Judantis fonas: lėti švytėjimai ir kylantys ženklai. Žymėjimas — live-bg.php.
   body reikia `isolation: isolate`, kitaip z-index: -1 nugrimzta po jo fonu.
   Ženklą keičia --live-bg-glyph. Tik transform ir opacity, kad telefone nestrigtų.
   Tekstas tiesiai ant šio fono turi būti bent #b4b4cc: tamsesnis, švytėjimams
   sutapus, 4,5:1 neišlaiko. */

.live-bg {
	position: fixed;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	pointer-events: none;
}

.live-bg b {
	position: absolute;
	width: 70vmax;
	height: 70vmax;
	border-radius: 50%;
	will-change: transform;
}

.live-bg b:nth-child(1) {
	top: -30vmax;
	left: -15vmax;
	background: radial-gradient(closest-side, rgba(251, 191, 36, 0.1), transparent);
	animation: live-bg-drift-a 26s ease-in-out infinite alternate;
}

.live-bg b:nth-child(2) {
	top: 20vh;
	right: -35vmax;
	background: radial-gradient(closest-side, rgba(52, 211, 153, 0.07), transparent);
	animation: live-bg-drift-b 34s ease-in-out infinite alternate;
}

.live-bg b:nth-child(3) {
	bottom: -40vmax;
	left: 10vw;
	background: radial-gradient(closest-side, rgba(248, 113, 113, 0.07), transparent);
	animation: live-bg-drift-c 30s ease-in-out infinite alternate;
}

.live-bg i {
	--size: 16px;
	--peak: 0.3;
	position: absolute;
	bottom: -40px;
	left: 10%;
	font-size: var(--size);
	font-style: normal;
	line-height: 1;
	color: #fbbf24;
	opacity: 0;
	will-change: transform, opacity;
	animation: live-bg-rise 18s linear infinite;
}

.live-bg i::before { content: var(--live-bg-glyph, '▲'); }
.live-bg i:nth-of-type(2) { left: 24%; --size: 11px; animation-duration: 23s; animation-delay: -6s; color: #34d399; }
.live-bg i:nth-of-type(3) { left: 37%; --size: 20px; --peak: 0.22; animation-duration: 27s; animation-delay: -14s; }
.live-bg i:nth-of-type(4) { left: 49%; --size: 12px; animation-duration: 20s; animation-delay: -3s; color: #34d399; }
.live-bg i:nth-of-type(5) { left: 61%; --size: 15px; animation-duration: 25s; animation-delay: -18s; }
.live-bg i:nth-of-type(6) { left: 73%; --size: 10px; animation-duration: 19s; animation-delay: -9s; color: #34d399; }
.live-bg i:nth-of-type(7) { left: 85%; --size: 18px; --peak: 0.24; animation-duration: 29s; animation-delay: -22s; }
.live-bg i:nth-of-type(8) { left: 94%; --size: 12px; animation-duration: 22s; animation-delay: -12s; }

@keyframes live-bg-drift-a { to { transform: translate3d(28vw, 22vh, 0) scale(1.15); } }
@keyframes live-bg-drift-b { to { transform: translate3d(-34vw, 26vh, 0) scale(0.9); } }
@keyframes live-bg-drift-c { to { transform: translate3d(30vw, -30vh, 0) scale(1.2); } }
@keyframes live-bg-rise {
	0% { transform: translate3d(0, 0, 0); opacity: 0; }
	12% { opacity: var(--peak); }
	80% { opacity: var(--peak); }
	100% { transform: translate3d(24px, -115vh, 0); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.live-bg b, .live-bg i { animation: none; }
}