/*
 * Keruto — cursor personalizado (punto negro que crece a circunferencia).
 *
 * Solo se activa si el JS añade la clase .ker-cursor-on a <html>, y solo en
 * dispositivos con puntero fino (ratón). En táctil o con "reducir movimiento"
 * se mantiene el cursor nativo del sistema.
 *
 * Los divs .ker-cursor (punto) y .ker-ripple (ondas) los crea ker-cursor.js y
 * los centra siempre en el puntero con translate(-50%,-50%), así el cambio de
 * tamaño anima desde el centro.
 */

@media (hover: hover) and (pointer: fine) {
	html.ker-cursor-on,
	html.ker-cursor-on * {
		cursor: none !important;
	}
}

.ker-cursor {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;
	pointer-events: none;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	/* Blanco + "difference" = negro sobre fondos claros y blanco sobre fondos
	   negros (con negro el blend lo volvería blanco encima del fondo blanco). */
	background: #fff;
	mix-blend-mode: difference;
	opacity: 0;
	transform: translate3d(-100px, -100px, 0) translate(-50%, -50%);
	will-change: transform, width, height, border-radius;
	transition:
		width .35s cubic-bezier(.22, 1, .36, 1),
		height .35s cubic-bezier(.22, 1, .36, 1),
		border-radius .35s cubic-bezier(.22, 1, .36, 1),
		opacity .25s ease;
}

/* Aparece en el primer movimiento del ratón. */
.ker-cursor.is-ready {
	opacity: 1;
}

/* Al pasar sobre un elemento interactivo: crece a circunferencia. */
.ker-cursor.is-hover {
	width: 44px;
	height: 44px;
	border-radius: 50%;
}

/* Ondas: aros finos y sutiles que nacen pegados al punto y se expanden
   desvaneciendose. Aparecen SOLO al hacer click: el JS crea 3 escalonadas por
   click. Su centro es el del cursor (el JS les actualiza el transform cada
   frame mientras viven). Quedan por debajo del punto (z-index menor). */
@keyframes ker-ripple {
	from {
		width: 8px;
		height: 8px;
		opacity: .3;
	}
	to {
		width: 104px;
		height: 104px;
		opacity: 0;
	}
}

.ker-ripple {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9998;
	pointer-events: none;
	opacity: 0;
	border: 1px solid #fff;
	border-radius: 50%;
	mix-blend-mode: difference;
	will-change: transform, width, height, opacity;
	animation: ker-ripple 1.1s linear forwards;
}

/* Al salir de la ventana. */
.ker-cursor.is-hidden {
	opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
	.ker-cursor {
		display: none;
	}
	html.ker-cursor-on,
	html.ker-cursor-on * {
		cursor: auto !important;
	}
}