/* Live homepage illustrations (home-live.js). Each overlay sits exactly on top of the
   original <img>, which stays in the layout (hidden) so page sizing never changes. */

.bxl {
	position: absolute;
	pointer-events: none;
	z-index: 1;
}
.bxl svg {
	display: block;
	width: 100%;
	height: 100%;
}
/* opacity, not visibility: the overlay is aria-hidden, so the <img> and its alt text must stay in the
   accessibility tree for screen readers. It still paints nothing and keeps its box; pointer-events keeps it
   out of clicks and long-press menus, as visibility did. */
.bxl-src {
	opacity: 0;
	pointer-events: none;
}

/* One-shot entrance states (applied when .bxl-play is added) */
.bxl .d { stroke-dasharray: 1; stroke-dashoffset: 1; }
.bxl-play .d { animation: bxl-draw var(--t, 1.2s) var(--d, 0s) cubic-bezier(.6, 0, .2, 1) forwards; }
@keyframes bxl-draw { to { stroke-dashoffset: 0; } }

.bxl .p { opacity: 0; scale: .6; transform-box: fill-box; transform-origin: center; }
.bxl-play .p { animation: bxl-pop .7s var(--d, 0s) cubic-bezier(.3, 1.5, .5, 1) forwards; }
@keyframes bxl-pop { to { opacity: 1; scale: 1; } }

.bxl .f { opacity: 0; translate: 0 12px; }
.bxl .sl { opacity: 0; translate: -36px 0; }
.bxl .sr { opacity: 0; translate: 36px 0; }
.bxl .fd { opacity: 0; translate: 0 -24px; }
.bxl-play .f, .bxl-play .sl, .bxl-play .sr, .bxl-play .fd {
	animation: bxl-in .8s var(--d, 0s) cubic-bezier(.2, .8, .2, 1) forwards;
}
@keyframes bxl-in { to { opacity: 1; translate: 0 0; } }

.bxl .o { opacity: 0; }
.bxl-play .o { animation: bxl-o .8s var(--d, 0s) ease forwards; }
@keyframes bxl-o { to { opacity: 1; } }

.bxl .arc { stroke-dasharray: 0 1; }
.bxl-play .arc { animation: bxl-arc var(--t, 1.4s) var(--d, 0s) cubic-bezier(.6, 0, .2, 1) forwards; }
@keyframes bxl-arc { to { stroke-dasharray: var(--a, 1) 1; } }

/* Continuous loops (start once the illustration is in view) */
.bxl-play .blink { animation: bxl-blink 1.4s ease-in-out infinite; }
@keyframes bxl-blink { 50% { opacity: .25; } }

.bxl .pulse { transform-box: fill-box; transform-origin: center; opacity: 0; }
.bxl-play .pulse { animation: bxl-pulse var(--t, 2.4s) var(--d, 0s) ease-out infinite; }
@keyframes bxl-pulse { 0% { scale: 1; opacity: .8; } 100% { scale: var(--s, 1.8); opacity: 0; } }

.bxl-play .bob { animation: bxl-bob var(--t, 4s) var(--d, 0s) ease-in-out infinite; }
@keyframes bxl-bob { 50% { translate: 0 var(--y, -6px); } }

.bxl .wob { transform-box: fill-box; transform-origin: center; }
.bxl-play .wob { animation: bxl-wob 2.6s ease-in-out infinite; }
@keyframes bxl-wob { 0%, 60%, 100% { rotate: 0deg; } 70% { rotate: -12deg; } 80% { rotate: 10deg; } 90% { rotate: -6deg; } }

.bxl .spin { transform-box: view-box; transform-origin: var(--o); }
.bxl-play .spin { animation: bxl-spin var(--t, 4s) linear infinite; }
.bxl .spinS { transform-box: fill-box; transform-origin: center; }
.bxl-play .spinS { animation: bxl-spin 1s linear infinite; }
.bxl-play .rspin { animation: bxl-spin var(--t, 60s) linear infinite reverse; }
@keyframes bxl-spin { to { rotate: 360deg; } }

.bxl-play .glow { animation: bxl-glow 2.8s ease-in-out infinite; }
@keyframes bxl-glow { 50% { opacity: .45; } }

.bxl .flip { transform-box: fill-box; transform-origin: center; }
.bxl-play .flip { animation: bxl-flip 4s 1.5s ease-in-out infinite; }
@keyframes bxl-flip { 0%, 70%, 100% { scale: 1; } 80% { scale: 1.1; } 90% { scale: .97; } }

.bxl .bar { transform-box: fill-box; transform-origin: left center; scale: 0 1; }
.bxl-play .bar { animation: bxl-bar 2.4s .9s ease-in-out infinite; }
@keyframes bxl-bar { 0% { scale: 0 1; } 80%, 100% { scale: 1 1; } }

.bxl .ping { opacity: 0; }
.bxl-play .ping { animation: bxl-ping var(--t, 4s) var(--d, 0s) linear infinite; }
@keyframes bxl-ping { 0% { opacity: 1; } 22%, 100% { opacity: 0; } }

.bxl .lk { transform-box: fill-box; translate: 0 -4px; }
.bxl-play .lk { animation: bxl-lk .5s var(--d, 1.6s) cubic-bezier(.3, 1.6, .5, 1) forwards; }
@keyframes bxl-lk { to { translate: 0 0; } }

.bxl .caret { animation: bxl-blink 1s steps(1) infinite; }

/* JS-driven transitions */
.bxl .tr { transition: transform .6s cubic-bezier(.3, 1.3, .5, 1), fill .3s ease, opacity .3s ease; }
.bxl .needle { transition: transform 1.2s cubic-bezier(.3, 1.35, .5, 1); }

/* Phones: keep the float movement small */
@media (max-width: 767px) {
	.bxl-play .bob { --y: -3px; }
}

@media (prefers-reduced-motion: reduce) {
	.bxl *, .bxl *::before { animation: none !important; transition: none !important; }
	.bxl .d { stroke-dashoffset: 0; }
	.bxl .p, .bxl .f, .bxl .sl, .bxl .sr, .bxl .fd, .bxl .o { opacity: 1; scale: 1; translate: 0 0; }
	.bxl .arc { stroke-dasharray: var(--a, 1) 1; }
	.bxl .bar { scale: 1 1; }
	.bxl .lk { translate: 0 0; }
	.bxl .pulse, .bxl .ping { opacity: 0; }
}