/* ============================================================
   XPERT STEEL — ANIMATED LOGO
   ------------------------------------------------------------
   Har page ka header/footer logo `XS` box + `XPERT STEEL` text tha.
   logo.js un sab ko dhoond kar yahan wale video logo se badal deta hai.
   Page ka HTML chhua nahi jata — sab kuch isi mu-plugin se.

   Asset: 448x194 VP9 + ASLI alpha channel (175 KB), 4.28s ka
   ping-pong loop (aage phir peeche) — is liye loop ka jor kahin
   mehsoos nahi hota.

   Background pehle hi video se nikal chuka hai (alpha), is liye
   `mix-blend-mode` ki zaroorat NAHI — aur yehi smoothness ki asal
   wajah hai: blend har frame par poora area dobara composite
   karwata hai, alpha nahi karwata.

   Agar JS na chale to purana text logo jaisa tha waisa hi rehta hai.
   ============================================================ */

/* JS ne is anchor ko sambhal liya: purana mark + word chhupa do */
.xsl-host > *:not(.xsl) { display: none !important; }

.xsl {
	position: relative;
	display: block;
	flex: 0 0 auto;
	width: var(--xsl-w, 132px);
	/* jagah pehle se reserved — image/video aane par layout nahi hilta */
	aspect-ratio: 448 / 194;
	line-height: 0;
}

.xsl > img,
.xsl > video {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	border: 0;
	background: none;
	/* apni compositor layer par — har frame par baqi page repaint na ho */
	transform: translateZ(0);
	backface-visibility: hidden;
}

/* Video tab tak chhupa rehta hai jab tak sach me chal na pare.
   Poster aur video ka pehla frame bilkul ek hi tasveer hai, is liye
   badalna nazar hi nahi aata. */
.xsl > video { opacity: 0; transition: opacity .3s ease; }
.xsl > video.is-on { opacity: 1; }
.xsl.is-live > img { opacity: 0; }
/* intro chalne wali hai: poora logo pehle se mat dikhao */
.xsl.is-arming > img { opacity: 0; }

/* ---- sizes ---- */
.xsl              { --xsl-w: clamp(116px, 11vw, 140px); }
.xsl--footer      { --xsl-w: 230px; }

@media (max-width: 1180px) {
	.xsl         { --xsl-w: 126px; }
	.xsl--footer { --xsl-w: 215px; }
}
@media (max-width: 700px) {
	.xsl         { --xsl-w: 112px; }
	.xsl--footer { --xsl-w: 196px; }
}
@media (max-width: 430px) {
	.xsl         { --xsl-w: 100px; }
	.xsl--footer { --xsl-w: 176px; }
}

@media (prefers-reduced-motion: reduce) {
	.xsl > video { display: none !important; }
	.xsl > img   { opacity: 1 !important; }
}