/* ====================================================================
   MDLR · Logo Wipe Animation v2.5
   ====================================================================
   Animación entre 2 PNGs (logo normal y logo sticky)
   - Banda roja barre horizontalmente cuando se hace toggle sticky
   - Bidireccional (cada cambio dispara el wipe)
   - Threshold scroll: 80px
   ==================================================================== */

/* Wrapper que envuelve los 2 logos superpuestos */
.mdlr-logo-pair{
	display:inline-block;
	position:relative;
	line-height:0;
	vertical-align:middle;
	overflow:visible;
	isolation:isolate; /* contiene la banda roja */
}

/* Logo principal (el que viene de Astra) */
.mdlr-logo-pair > img,
.mdlr-logo-pair__main{
	display:block;
	position:relative;
	z-index:1;
	transition:opacity 0.18s linear 0.18s;
	max-width:100%;
	height:auto;
}

/* Logo sticky inyectado por JS */
.mdlr-logo-pair__sticky{
	position:absolute !important;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	z-index:2;
	opacity:0;
	pointer-events:none;
	display:block;
	max-width:100%;
	max-height:100%;
	width:auto;
	height:auto;
	object-fit:contain;
	transition:opacity 0.18s linear 0.18s;
}

/* Estado sticky: cambiar visibilidad de los 2 logos */
.mdlr-logo-pair.mdlr-is-sticky > .mdlr-logo-pair__main,
.mdlr-logo-pair.mdlr-is-sticky > img:not(.mdlr-logo-pair__sticky){
	opacity:0;
}

.mdlr-logo-pair.mdlr-is-sticky .mdlr-logo-pair__sticky{
	opacity:1;
}

/* === BANDA ROJA WIPE === */
.mdlr-logo-pair__wipe{
	position:absolute;
	top:-8%;
	bottom:-8%;
	left:0;
	width:140%;
	background:#FF2A2A;
	z-index:3;
	transform:translateX(-100%);
	pointer-events:none;
	opacity:0;
	will-change:transform,opacity;
	box-shadow:
		0 0 0 1px #FF2A2A,
		-2px 0 0 #0A0A0A,
		2px 0 0 #0A0A0A;
}

/* Animación wipe (forward: izq → der) */
.mdlr-logo-pair.is-wiping-forward .mdlr-logo-pair__wipe{
	animation:mdlr-wipe-forward 420ms cubic-bezier(0.7,0,0.2,1) forwards;
}

/* Animación wipe (backward: der → izq) */
.mdlr-logo-pair.is-wiping-backward .mdlr-logo-pair__wipe{
	animation:mdlr-wipe-backward 420ms cubic-bezier(0.7,0,0.2,1) forwards;
}

@keyframes mdlr-wipe-forward{
	0%{
		transform:translateX(-100%) skewX(-12deg);
		opacity:1;
	}
	50%{
		transform:translateX(0%) skewX(-12deg);
		opacity:1;
	}
	100%{
		transform:translateX(100%) skewX(-12deg);
		opacity:1;
	}
}

@keyframes mdlr-wipe-backward{
	0%{
		transform:translateX(100%) skewX(12deg);
		opacity:1;
	}
	50%{
		transform:translateX(0%) skewX(12deg);
		opacity:1;
	}
	100%{
		transform:translateX(-100%) skewX(12deg);
		opacity:1;
	}
}

/* Cuando el wipe está pasando justo por el centro, los logos cambian */
.mdlr-logo-pair.is-wiping-forward > .mdlr-logo-pair__main,
.mdlr-logo-pair.is-wiping-forward > img:not(.mdlr-logo-pair__sticky){
	transition:opacity 0s linear 210ms; /* cambio instantáneo a la mitad del wipe */
}
.mdlr-logo-pair.is-wiping-forward .mdlr-logo-pair__sticky{
	transition:opacity 0s linear 210ms;
}

.mdlr-logo-pair.is-wiping-backward > .mdlr-logo-pair__main,
.mdlr-logo-pair.is-wiping-backward > img:not(.mdlr-logo-pair__sticky){
	transition:opacity 0s linear 210ms;
}
.mdlr-logo-pair.is-wiping-backward .mdlr-logo-pair__sticky{
	transition:opacity 0s linear 210ms;
}

/* === Mobile: wipe más rápido y menos pronunciado === */
@media (max-width:760px){
	.mdlr-logo-pair.is-wiping-forward .mdlr-logo-pair__wipe,
	.mdlr-logo-pair.is-wiping-backward .mdlr-logo-pair__wipe{
		animation-duration:340ms;
	}
	.mdlr-logo-pair__wipe{
		width:120%;
	}
	@keyframes mdlr-wipe-forward{
		0%{transform:translateX(-100%) skewX(-8deg);opacity:1}
		50%{transform:translateX(0%) skewX(-8deg);opacity:1}
		100%{transform:translateX(100%) skewX(-8deg);opacity:1}
	}
	@keyframes mdlr-wipe-backward{
		0%{transform:translateX(100%) skewX(8deg);opacity:1}
		50%{transform:translateX(0%) skewX(8deg);opacity:1}
		100%{transform:translateX(-100%) skewX(8deg);opacity:1}
	}
}

/* === Reduced motion: cross-fade limpio sin wipe === */
@media (prefers-reduced-motion:reduce){
	.mdlr-logo-pair__wipe{display:none !important}
	.mdlr-logo-pair > img,
	.mdlr-logo-pair__sticky{
		transition:opacity 0.3s ease !important;
	}
}