/* Toscano – Cursor personalizado (ver includes/class-cursor.php y cursor.js).
   El cursor del sistema sólo se oculta con html.tkcur-on, que pone el JS al moverse
   el ratón por primera vez: si el JS falla, se ve el cursor normal. */

.tkcur {
	--tkcur-c: var(--tkcur-color, #009a9d);
	position: fixed;
	top: 0;
	left: 0;
	z-index: 2147483600;
	width: 0;
	height: 0;
	pointer-events: none;
	opacity: 0;
	transition: opacity .25s ease;
}

.tkcur.is-visible {
	opacity: 1;
}

/* Sobre campos de texto, iframes y vídeos: cursor normal del sistema */
.tkcur.is-native {
	opacity: 0;
}

.tkcur__ring,
.tkcur__dot,
.tkcur__bolt {
	position: fixed;
	top: 0;
	left: 0;
	pointer-events: none;
	will-change: transform;
}

/* ---------- Rayo ---------- */

.tkcur__bolt {
	width: 21px;
	height: 25.7px;
	/* la punta (0,0 del viewBox, a 8.17px/2.33px del borde) cae justo en el puntero */
	margin: -2.33px 0 0 -8.17px;
	transform-origin: 8.17px 2.33px;
}

.tkcur__bolt svg {
	display: block;
	overflow: visible;
	transition: transform .25s cubic-bezier(.2, .7, .2, 1);
	transform-origin: 8.17px 2.33px;
}

.tkcur__bolt-body {
	fill: var(--tkcur-c);
	/* contorno claro: se ve sobre fotos, fondos oscuros y botones del mismo color */
	stroke: #ffffff;
	stroke-width: 1.3;
	stroke-linejoin: round;
}

.tkcur__bolt-glow {
	fill: none;
	stroke: var(--tkcur-c);
	stroke-width: 5;
	stroke-linejoin: round;
	opacity: .18;
	transition: opacity .25s ease, stroke-width .25s ease;
	animation: tkcur-flicker 3.2s steps(1, end) infinite;
}

/* Parpadeo eléctrico ocasional del halo */
@keyframes tkcur-flicker {
	0%, 86%, 100% { opacity: .18; }
	88% { opacity: .5; }
	90% { opacity: .12; }
	92% { opacity: .42; }
}

/* Sobre enlaces: el rayo crece y se "carga" */
.tkcur.is-link .tkcur__bolt svg {
	transform: scale(1.2);
}

.tkcur.is-link .tkcur__bolt-glow {
	stroke-width: 7;
	animation: tkcur-charge .9s ease-in-out infinite alternate;
}

@keyframes tkcur-charge {
	from { opacity: .28; }
	to { opacity: .55; }
}

.tkcur.is-down .tkcur__bolt svg {
	transform: scale(.8);
}

/* ---------- Punto (estilos 'ring' y 'dot') ---------- */

.tkcur__dot {
	width: 8px;
	height: 8px;
	margin: -4px 0 0 -4px;
	border-radius: 50%;
	background: var(--tkcur-c);
	box-shadow: 0 0 0 2px rgba(255, 255, 255, .6), 0 0 10px color-mix(in srgb, var(--tkcur-c) 55%, transparent);
	transition: opacity .2s ease, width .2s ease, height .2s ease, margin .2s ease;
}

.tkcur--ring.is-link .tkcur__dot {
	opacity: 0;
}

.tkcur--dot.is-link .tkcur__dot {
	width: 18px;
	height: 18px;
	margin: -9px 0 0 -9px;
	opacity: .85;
}

.tkcur--dot.is-down .tkcur__dot {
	width: 6px;
	height: 6px;
	margin: -3px 0 0 -3px;
}

/* ---------- Anillo (estilo 'ring'; tamaño y posición desde el JS) ---------- */

.tkcur__ring {
	width: 36px;
	height: 36px;
	border: 1.5px solid color-mix(in srgb, var(--tkcur-c) 65%, transparent);
	border-radius: 50%;
	background: transparent;
	box-sizing: border-box;
	transition: background-color .3s ease, border-color .3s ease;
}

.tkcur.is-link .tkcur__ring {
	border-color: var(--tkcur-c);
	background: color-mix(in srgb, var(--tkcur-c) 12%, transparent);
}

.tkcur.is-down .tkcur__ring {
	background: color-mix(in srgb, var(--tkcur-c) 22%, transparent);
}

/* ---------- Chispas del clic ---------- */

.tkcur__sparks {
	position: fixed;
	inset: 0;
	z-index: 2147483600;
	width: 100vw;
	height: 100vh;
	overflow: visible;
	pointer-events: none;
}

.tkcur__spark {
	fill: none;
	stroke: var(--tkcur-c);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	opacity: .55;
}

.tkcur__spark--core {
	stroke: #ffffff;
	stroke-width: .9;
	opacity: 1;
}

/* ---------- Cursor del sistema oculto… salvo donde se escribe ---------- */

html.tkcur-on,
html.tkcur-on * {
	cursor: none !important;
}

html.tkcur-on input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
html.tkcur-on textarea,
html.tkcur-on [contenteditable]:not([contenteditable="false"]) {
	cursor: text !important;
}

@media (hover: none), (pointer: coarse) {
	.tkcur,
	.tkcur__sparks {
		display: none !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tkcur__bolt-glow,
	.tkcur.is-link .tkcur__bolt-glow {
		animation: none;
	}
}