/*
 * Sezioni a scorrimento agganciato (scroll snap) e indice rapido (widget "Indice sezioni Lab591").
 * Una sezione partecipa se il suo container ha la classe CSS "lab-snap" (Avanzate → Classi CSS).
 * La classe html.lab-snap-page la mette assets/js/snap.js solo se nella pagina ci sono sezioni.
 */

/* Desktop: aggancio deciso. Tablet: morbido. Telefono: nessun aggancio, si scorre libero. */
@media (min-width: 1025px) {
	html.lab-snap-page {
		scroll-snap-type: y mandatory;
	}
}

@media (min-width: 768px) and (max-width: 1024px) {
	html.lab-snap-page {
		scroll-snap-type: y proximity;
	}
}

html.lab-snap-page .lab-snap,
html.lab-snap-page .elementor-location-header {
	scroll-snap-align: start;
}

html.lab-snap-page .elementor-location-footer {
	scroll-snap-align: end;
}

/* Indice rapido: barra fissa in alto, compare quando si è dentro una sezione. */
.lab-snapnav {
	position: fixed;
	top: var(--wp-admin--admin-bar--height, 0px);
	left: 0;
	right: 0;
	z-index: 100;
	background: rgba(23, 20, 21, .78);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid rgba(64, 58, 59, .7);
	transform: translateY(-110%);
	opacity: 0;
	transition: transform .45s ease, opacity .45s ease;
}

.lab-snapnav.is-visible {
	transform: none;
	opacity: 1;
}

.lab-snapnav__inner {
	display: flex;
	justify-content: safe center;
	gap: 32px;
	padding: 0 64px;
	overflow-x: auto;
	scrollbar-width: none;
}

.lab-snapnav__inner::-webkit-scrollbar {
	display: none;
}

.lab-snapnav a.lab-snapnav__item {
	display: inline-flex;
	gap: .6em;
	padding: 16px 0;
	font-family: 'Share Tech Mono', ui-monospace, monospace;
	font-size: 13px;
	letter-spacing: .04em;
	line-height: 1.2;
	white-space: nowrap;
	color: var(--lab-snapnav-color, #9c9697);
	text-decoration: none;
	transition: color .25s ease;
}

.lab-snapnav a.lab-snapnav__item:hover,
.lab-snapnav a.lab-snapnav__item:focus-visible,
.lab-snapnav a.lab-snapnav__item.is-active {
	color: var(--lab-snapnav-active, #ffffff);
}

.lab-snapnav__num {
	color: var(--lab-snapnav-num, #5ac134);
}

/* Indicatore: numeri solo con "Numeri"; con "Puntino" un punto grigio, verde sulla voce attiva. */
.lab-snapnav:not(.lab-snapnav--marker-numbers) .lab-snapnav__num {
	display: none;
}

.lab-snapnav--marker-dot a.lab-snapnav__item {
	align-items: center;
}

.lab-snapnav--marker-dot a.lab-snapnav__item::before {
	content: "";
	flex: none;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
	opacity: .5;
	transition: background-color .25s ease, opacity .25s ease;
}

.lab-snapnav--marker-dot a.lab-snapnav__item.is-active::before {
	background: var(--lab-snapnav-num, #5ac134);
	opacity: 1;
}

@media (max-width: 1024px) {
	.lab-snapnav__inner {
		justify-content: flex-start;
		gap: 24px;
		padding: 0 40px;
	}
}

@media (max-width: 767px) {
	.lab-snapnav__inner {
		padding: 0 24px;
	}

	.lab-snapnav a.lab-snapnav__item {
		padding: 14px 0;
	}
}

/* Nell'editor l'indice si vede come riquadro fermo, per poterlo selezionare. */
.lab-snapnav--editor {
	position: static;
	transform: none;
	opacity: 1;
	border: 1px dashed rgba(90, 193, 52, .5);
}

@media (prefers-reduced-motion: reduce) {
	.lab-snapnav {
		transition: none;
	}
}

/*
 * "Ci sono altre slide": linea con goccia al centro, in basso, di ogni sezione agganciata tranne l'ultima
 * (creata da snap.js). Stile e colore della linea delle card in mobile: linea verde (nessuna traccia quando non
 * c'è) e goccia luminosa. Ciclo di circa 2,8 s finché la sezione è a schermo: la goccia scende disegnando la
 * linea, molleggia in fondo, poi risale cancellandola e riparte da zero. Solo desktop (aggancio deciso).
 */
.lab-snap-more {
	display: none;
}

@media (min-width: 1025px) {
	html.lab-more-page button.lab-snap-more {
		--lab-more-len: 48px;
		display: block;
		position: absolute;
		left: 50%;
		bottom: 30px;
		z-index: 2;
		width: 24px;
		height: calc(var(--lab-more-len) + 18px);
		margin: 0;
		padding: 0;
		border: 0;
		border-radius: 0;
		background: none;
		box-shadow: none;
		cursor: pointer;
		/* Lo stile dei bottoni del kit ha "transition: all": la posizione non deve scivolare. */
		transition: none;
	}

	html.lab-more-page button.lab-snap-more.is-hidden {
		display: none;
	}

	.lab-snap-more__line {
		position: absolute;
		top: 0;
		left: 11px;
		width: 2px;
		height: var(--lab-more-len);
		background: var(--lab-green, #5ac134);
		opacity: 0;
		transform: scaleY(0);
		transform-origin: top;
	}

	.lab-snap-more__drop {
		position: absolute;
		top: -2px;
		left: 8px;
		width: 8px;
		height: 10px;
		border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
		background: var(--lab-green, #5ac134);
		box-shadow: 0 0 8px rgba(90, 193, 52, .7);
		opacity: 0;
		transform-origin: 50% 0;
		transition: box-shadow .25s ease;
	}

	.lab-snap-more:hover .lab-snap-more__drop,
	.lab-snap-more:focus-visible .lab-snap-more__drop {
		box-shadow: 0 0 14px rgba(90, 193, 52, .95);
	}

	.lab-snap-more.is-visible .lab-snap-more__line {
		animation: lab-more-line 2.8s cubic-bezier(.4, 0, .2, 1) .3s infinite;
	}

	.lab-snap-more.is-visible .lab-snap-more__drop {
		animation: lab-more-drop 2.8s cubic-bezier(.4, 0, .2, 1) .3s infinite;
	}
}

/* La linea si disegna (0-45%), resta (fino al 65%), poi si ritira verso l'alto (65-85%) insieme alla goccia. */
@keyframes lab-more-line {
	0% { opacity: 1; transform: scaleY(0); }
	45% { opacity: 1; transform: scaleY(1); }
	65% { opacity: 1; transform: scaleY(1); }
	85% { opacity: 1; transform: scaleY(0); }
	100% { opacity: 0; transform: scaleY(0); }
}

@keyframes lab-more-drop {
	0% { opacity: 0; transform: translateY(0) scale(1, 1); }
	4% { opacity: 1; transform: translateY(0) scale(1, 1); }
	45% { opacity: 1; transform: translateY(var(--lab-more-len, 48px)) scale(1, 1); }
	52% { opacity: 1; transform: translateY(var(--lab-more-len, 48px)) scale(.92, 1.1); }
	58% { opacity: 1; transform: translateY(var(--lab-more-len, 48px)) scale(1.08, .92); }
	65% { opacity: 1; transform: translateY(var(--lab-more-len, 48px)) scale(1, 1); }
	85% { opacity: 1; transform: translateY(0) scale(1, 1); }
	92% { opacity: 1; transform: translateY(0) scale(1, 1); }
	100% { opacity: 0; transform: translateY(0) scale(1, 1); }
}

@media (prefers-reduced-motion: reduce) {
	.lab-snap-more.is-visible .lab-snap-more__line,
	.lab-snap-more.is-visible .lab-snap-more__drop {
		animation: none;
	}

	.lab-snap-more.is-visible .lab-snap-more__line {
		opacity: 1;
		transform: none;
	}

	.lab-snap-more.is-visible .lab-snap-more__drop {
		opacity: 1;
		transform: translateY(var(--lab-more-len, 48px));
	}
}