/* =============================================================
   CURSOR GLOBAL
   ============================================================= */

.griffon-cursor-ring,
.griffon-cursor-dot {
	position: fixed;
	top: 0;
	left: 0;
	pointer-events: none;
	z-index: 9999;
	mix-blend-mode: difference;
	border-radius: 50%;
	transform: translate3d(-50%, -50%, 0);
	will-change: transform, width, height;
}

/* =============================================================
   DOT (point central)
   ============================================================= */

.griffon-cursor-dot {
	width: 6px;
	height: 6px;
	background: var(--griffon-cursor-color, #ffffff);
	transition:
		width 300ms cubic-bezier(.22,.61,.36,1),
		height 300ms cubic-bezier(.22,.61,.36,1),
		opacity 300ms cubic-bezier(.22,.61,.36,1);
}

/* hover state dot */
.griffon-cursor-dot.is-hover {
	opacity: 1;
}

/* =============================================================
   RING (cercle externe)
   ============================================================= */

.griffon-cursor-ring {
	width: 36px;
	height: 36px;

	display: flex;
	align-items: center;
	justify-content: center;

	font-size: 9px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: #ffffff;

	border: 1px solid var(--griffon-cursor-color, #ffffff);

	transition:
		width 300ms cubic-bezier(.22,.61,.36,1),
		height 300ms cubic-bezier(.22,.61,.36,1),
		border-color 300ms cubic-bezier(.22,.61,.36,1),
		opacity 300ms cubic-bezier(.22,.61,.36,1);

	position: fixed;
}

/* =============================================================
   LABEL (data-label)
   ============================================================= */

.griffon-cursor-ring::before {
	content: attr(data-label);
	opacity: 0;
	position: absolute;
	transition: opacity 300ms cubic-bezier(.22,.61,.36,1);
}

/* visible label */
.griffon-cursor-ring.is-link::before {
	opacity: 1;
}

/* =============================================================
   HOVER STATE (links / boutons)
   ============================================================= */

.griffon-cursor-ring.is-hover {
	width: 88px;
	height: 88px;
	border-color: rgba(255,255,255,0.95);
}

/* =============================================================
   LINK STATE (label mode)
   ============================================================= */

.griffon-cursor-ring.is-link {
	width: 88px;
	height: 88px;
	border-color: rgba(255,255,255,0.95);
}

/* dot hide when link mode */
.griffon-cursor-dot.is-link {
	width: 0;
	height: 0;
	opacity: 0;
}

/* =============================================================
   RESPONSIVE / DISABLE
   ============================================================= */

@media (hover: none), (pointer: coarse) {
	.griffon-cursor-ring,
	.griffon-cursor-dot {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.griffon-cursor-ring,
	.griffon-cursor-dot {
		display: none;
	}
}

/* =============================================================
   GLOBAL CURSOR DISABLE NATIVE
   ============================================================= */

html.has-griffon-cursor {
    cursor: none;
}

@media (hover: none) {
    html.has-griffon-cursor {
        cursor: auto; /* option sécurité mobile */
    }
}