/* =============================================================
   SL Interactions — v1.0.0
   Loader de transition + particules CTA
   ============================================================= */

:root {
	/* Surcharger depuis le child theme si besoin */
	--uu-sl-accent:     #0ea5e9;
	--uu-sl-loader-bg:  rgba(255, 255, 255, 0.92);
	--uu-sl-label-size: 0.875rem;
}

/* ── Page loader ─────────────────────────────────────────── */

#uu-sl-loader {
	position:        fixed;
	inset:           0;
	z-index:         99999;
	display:         flex;
	flex-direction:  column;
	align-items:     center;
	justify-content: center;
	gap:             1.75rem;
	background:      var(--uu-sl-loader-bg);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter:         blur(6px);
	opacity:         0;
	pointer-events:  none;
	transition:      opacity 0.22s ease;
}

#uu-sl-loader.uu-sl-visible {
	opacity:        1;
	pointer-events: auto;
}

/* Anneau conic-gradient — CSS pur, pas d'image */
.uu-sl-loader__ring {
	width:         52px;
	height:        52px;
	border-radius: 50%;
	background: conic-gradient(
		from 0deg,
		transparent 0%,
		var(--uu-sl-accent) 100%
	);
	-webkit-mask: radial-gradient(
		farthest-side,
		transparent calc(100% - 4px),
		#000       calc(100% - 4px)
	);
	mask: radial-gradient(
		farthest-side,
		transparent calc(100% - 4px),
		#000       calc(100% - 4px)
	);
	animation: uu-sl-spin 0.85s linear infinite;
}

.uu-sl-loader__label {
	margin:          0;
	font-size:       var(--uu-sl-label-size);
	font-family:     inherit;
	color:           #374151;
	letter-spacing:  0.03em;
	opacity:         0;
	transform:       translateY(5px);
	transition:      opacity 0.3s ease 0.12s, transform 0.3s ease 0.12s;
}

#uu-sl-loader.uu-sl-visible .uu-sl-loader__label {
	opacity:   1;
	transform: translateY(0);
}

@keyframes uu-sl-spin {
	to { transform: rotate(360deg); }
}

/* ── Particules de clic ──────────────────────────────────── */

.uu-sl-spark {
	position:       fixed;
	pointer-events: none;
	z-index:        99998;
	width:          0;
	height:         0;
}

.uu-sl-spark__dot {
	position:         absolute;
	width:            7px;
	height:           7px;
	border-radius:    50%;
	background:       var(--uu-sl-accent);
	transform-origin: center;
	transform:
		translate(-50%, -50%)
		rotate(var(--uu-sl-angle))
		translateY(0);
	opacity: 1;
	animation: uu-sl-burst 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Alternance de couleurs pour un effet multi-gouttes */
.uu-sl-spark__dot:nth-child(odd) {
	background: color-mix(in srgb, var(--uu-sl-accent) 70%, white);
	width:  5px;
	height: 5px;
}

@keyframes uu-sl-burst {
	0%   {
		transform: translate(-50%, -50%) rotate(var(--uu-sl-angle)) translateY(0);
		opacity: 1;
	}
	100% {
		transform: translate(-50%, -50%) rotate(var(--uu-sl-angle)) translateY(-48px);
		opacity: 0;
	}
}

/* Mot qui pop */
.uu-sl-spark__word {
	position:    absolute;
	font-family: inherit;
	font-size:   0.78rem;
	font-weight: 700;
	color:       var(--uu-sl-accent);
	white-space: nowrap;
	animation:   uu-sl-word-pop 0.7s ease-out forwards;
}

@keyframes uu-sl-word-pop {
	0%   { opacity: 0; transform: translate(-50%, -180%) scale(0.5); }
	30%  { opacity: 1; transform: translate(-50%, -230%) scale(1.15); }
	100% { opacity: 0; transform: translate(-50%, -290%) scale(0.9); }
}

/* ── Accessibilité : mouvement réduit ────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.uu-sl-loader__ring {
		animation: none;
		border:    3px solid var(--uu-sl-accent);
		opacity:   0.6;
	}

	.uu-sl-spark__dot,
	.uu-sl-spark__word {
		display: none;
	}
}