/*
 * Estilos y animaciones de <bamze-logo>.
 * Los tiempos de cada pieza llegan desde bamze-logo.json como --bl-ret y --bl-dur.
 * El estado final de cada animación es el logo quieto, idéntico al estático.
 */

bamze-logo {
	--bl-color-marca: #01116E;
	--bl-color-texto: #001062;
	--bl-curva: cubic-bezier(0.22, 0.61, 0.36, 1);
	display: inline-block;
	width: 200px;
	aspect-ratio: 300 / 146;
	line-height: 0;
	vertical-align: middle;
}

bamze-logo[tono="claro"] {
	--bl-color-marca: #FFFFFF;
	--bl-color-texto: #FFFFFF;
}

bamze-logo > img,
bamze-logo > .bl-svg {
	display: block;
	width: 100%;
	height: 100%;
}

bamze-logo .bl-svg {
	overflow: visible;
}

.bl-pieza--monograma,
.bl-pieza--barra {
	fill: var(--bl-color-marca);
}

.bl-pieza--texto {
	fill: var(--bl-color-texto);
}

.bl-pieza,
.bl-letra,
.bl-franja {
	transform-box: fill-box;
	transform-origin: 50% 50%;
}

.bl-barra-sup {
	transform-origin: 50% 0;
}

.bl-barra-inf {
	transform-origin: 50% 100%;
}

/* ---------- Mecánica común: solo mientras hay estado ---------- */

bamze-logo[data-bl-estado] .bl-pieza,
bamze-logo[data-bl-estado] .bl-letra,
bamze-logo[data-bl-estado] .bl-franja {
	animation-duration: var(--bl-dur, 0ms);
	animation-delay: var(--bl-ret, 0ms);
	animation-timing-function: var(--bl-curva);
	animation-fill-mode: both;
}

/* En espera se queda en el primer cuadro hasta que se dispare. */
bamze-logo[data-bl-estado="espera"] .bl-pieza,
bamze-logo[data-bl-estado="espera"] .bl-letra,
bamze-logo[data-bl-estado="espera"] .bl-franja {
	animation-play-state: paused;
}

/* ---------- Trazo ---------- */

bamze-logo[data-bl-estado][data-bl-animacion="trazo"] .bl-pieza--monograma,
bamze-logo[data-bl-estado][data-bl-animacion="trazo"] .bl-pieza--barra {
	animation-name: bl-trazo;
	stroke: var(--bl-color-marca);
	stroke-width: 1.2;
	stroke-linejoin: round;
	stroke-dasharray: 1;
}

bamze-logo[data-bl-estado][data-bl-animacion="trazo"] .bl-pieza--texto {
	animation-name: bl-subir;
}

/* ---------- Apertura ---------- */

bamze-logo[data-bl-estado][data-bl-animacion="apertura"] .bl-letra {
	animation-name: bl-aparecer;
}

bamze-logo[data-bl-estado][data-bl-animacion="apertura"] .bl-franja {
	animation-name: bl-abrir;
	animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
}

bamze-logo[data-bl-estado][data-bl-animacion="apertura"] .bl-pieza--barra {
	animation-name: bl-crecer;
}

bamze-logo[data-bl-estado][data-bl-animacion="apertura"] .bl-pieza--texto {
	animation-name: bl-nacer;
}

/* ---------- Entrada ---------- */

bamze-logo[data-bl-estado][data-bl-animacion="entrada"] .bl-letra-u {
	animation-name: bl-desde-izquierda;
}

bamze-logo[data-bl-estado][data-bl-animacion="entrada"] .bl-letra-k {
	animation-name: bl-desde-derecha;
}

bamze-logo[data-bl-estado][data-bl-animacion="entrada"] .bl-pieza--barra {
	animation-name: bl-crecer;
}

bamze-logo[data-bl-estado][data-bl-animacion="entrada"] .bl-pieza--texto {
	animation-name: bl-subir;
}

/* ---------- Destello ---------- */

bamze-logo .bl-brillo {
	opacity: 0;
}

bamze-logo[data-bl-brillo] .bl-brillo {
	animation: bl-destello var(--bl-dur-brillo, 1300ms) cubic-bezier(0.45, 0, 0.25, 1) both;
}

bamze-logo[tono="claro"] .bl-capa-brillo {
	display: none;
}

/* ---------- Cuadros clave ---------- */

@keyframes bl-trazo {
	0% {
		stroke-dashoffset: 1;
		fill-opacity: 0;
		stroke-opacity: 1;
	}
	62% {
		stroke-dashoffset: 0;
		fill-opacity: 0;
		stroke-opacity: 1;
	}
	100% {
		stroke-dashoffset: 0;
		fill-opacity: 1;
		stroke-opacity: 0;
	}
}

@keyframes bl-subir {
	from {
		opacity: 0;
		transform: translateY(7px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes bl-aparecer {
	from {
		opacity: 0;
		transform: scale(0.94);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes bl-abrir {
	from {
		transform: scaleY(0);
	}
	to {
		transform: none;
	}
}

@keyframes bl-crecer {
	from {
		transform: scaleY(0);
	}
	to {
		transform: none;
	}
}

@keyframes bl-nacer {
	from {
		opacity: 0;
		transform: scale(0.6);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes bl-desde-izquierda {
	from {
		opacity: 0;
		transform: translateX(-34px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes bl-desde-derecha {
	from {
		opacity: 0;
		transform: translateX(34px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes bl-destello {
	from {
		opacity: 1;
		transform: translateX(0);
	}
	to {
		opacity: 1;
		transform: translateX(440px);
	}
}

/* Quien pidió menos movimiento ve el logo quieto aunque el JS no lo detecte. */
@media (prefers-reduced-motion: reduce) {
	bamze-logo .bl-pieza,
	bamze-logo .bl-letra,
	bamze-logo .bl-franja,
	bamze-logo .bl-brillo {
		animation: none !important;
	}

	bamze-logo .bl-brillo {
		opacity: 0;
	}
}