/*
 * IDD — cursore decorativo "quadrato frizionato"
 * ----------------------------------------------------------------
 * Piccolo quadrato rosso con texture a grana (SVG noise) che segue il
 * puntatore con un leggero ritardo e ruota in proporzione alla distanza
 * percorsa dal mouse, come una ruota che rotola (vedi js/cursor.js). Il
 * cursore di sistema resta sempre visibile: questo è solo un elemento
 * decorativo aggiuntivo, non una sostituzione — per questo niente
 * "cursor: none" da nessuna parte. Solo desktop con mouse preciso (media
 * query sotto); disattivato via JS per chi ha richiesto animazioni
 * ridotte.
 */

.idd-cursor {
	position: fixed;
	top: 0;
	left: 0;
	width: 30px;
	height: 30px;
	margin: -15px 0 0 -15px;
	z-index: 9999;
	border-radius: 3px;
	background-color: #E20000;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.45'/%3E%3C/svg%3E");
	background-size: cover;
	background-blend-mode: overlay;
	box-shadow: 0 6px 16px rgba(21, 18, 15, 0.25);
	opacity: 0;
	pointer-events: none;
	will-change: transform;
	transition: opacity 0.25s ease;
}

.idd-cursor.is-visible {
	opacity: 1;
}

/* Sopra un <button> o un elemento con classe "*btn*" (es. idd-btn, idd-doc-btn)
   il quadrato sparisce: quegli elementi hanno già un loro stato hover, il
   quadrato sopra lo coprirebbe/confonderebbe. I link normali restano invariati. */
.idd-cursor.is-visible.is-over-button {
	opacity: 0;
}

@media (max-width: 1023px), (hover: none), (pointer: coarse) {
	.idd-cursor {
		display: none;
	}
}