/**
 * Kalunat — logotipo "JNM" (prueba, inc/jnm-logo.php).
 *
 * El monograma en Archivo 900 entre cuatro esquinas finas del color de
 * acento. Al pasar el cursor (o con el foco del teclado), las esquinas
 * se abren y se cierran varias veces cada vez menos, como un autoenfoque
 * buscando, mientras las letras pasan de desenfocadas a nítidas. Con
 * "reducir movimiento", sin animación.
 */

.kalunat-jnm .jnm-logo {
	--jnm-size: 28px;
	--jnm-corner: 2px;

	position: relative;
	display: inline-block;
	padding: 0.625em 0.4375em;
	color: inherit;
	font: 900 var(--jnm-size) / 1 Archivo, "Arial Black", sans-serif;
	letter-spacing: 0;
	text-decoration: none;
}

.kalunat-site-footer .kalunat-jnm .jnm-logo {
	--jnm-size: 32px;
}

.kalunat-jnm .jnm-logo i {
	position: absolute;
	width: 0.3125em;
	height: 0.3125em;
	border: 0 solid var(--wp--preset--color--accent);
}

.kalunat-jnm .jnm-logo i:nth-of-type(1) {
	--x: 1;
	--y: 1;

	top: 0;
	left: 0;
	border-width: var(--jnm-corner) 0 0 var(--jnm-corner);
}

.kalunat-jnm .jnm-logo i:nth-of-type(2) {
	--x: -1;
	--y: 1;

	top: 0;
	right: 0;
	border-width: var(--jnm-corner) var(--jnm-corner) 0 0;
}

.kalunat-jnm .jnm-logo i:nth-of-type(3) {
	--x: 1;
	--y: -1;

	bottom: 0;
	left: 0;
	border-width: 0 0 var(--jnm-corner) var(--jnm-corner);
}

.kalunat-jnm .jnm-logo i:nth-of-type(4) {
	--x: -1;
	--y: -1;

	right: 0;
	bottom: 0;
	border-width: 0 var(--jnm-corner) var(--jnm-corner) 0;
}

.kalunat-jnm .jnm-logo span {
	display: block;
}

.kalunat-jnm .jnm-logo:is(:hover, :focus-visible) i {
	animation: kalunat-jnm-hunt 0.55s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.kalunat-jnm .jnm-logo:is(:hover, :focus-visible) span {
	animation: kalunat-jnm-blur 0.55s linear;
}

.kalunat-jnm .jnm-logo:focus-visible {
	outline: none;
}

@keyframes kalunat-jnm-hunt {

	0%,
	100% {
		transform: none;
	}

	20% {
		transform: translate(calc(var(--x) * -9px), calc(var(--y) * -9px));
	}

	40% {
		transform: translate(calc(var(--x) * 7px), calc(var(--y) * 7px));
	}

	60% {
		transform: translate(calc(var(--x) * -4px), calc(var(--y) * -4px));
	}

	80% {
		transform: translate(calc(var(--x) * 2px), calc(var(--y) * 2px));
	}
}

@keyframes kalunat-jnm-blur {

	0%,
	100% {
		filter: none;
	}

	20% {
		filter: blur(2.2px);
	}

	40% {
		filter: blur(1.4px);
	}

	60% {
		filter: blur(0.7px);
	}

	80% {
		filter: blur(0.2px);
	}
}

@media (max-width: 781px) {

	.kalunat-jnm .jnm-logo {
		--jnm-size: 24px;
	}
}

@media (prefers-reduced-motion: reduce) {

	.kalunat-jnm .jnm-logo :is(i, span) {
		animation: none !important;
	}
}