/* ============================================
   IMAGE COMPARISON SOLID TW2
   Solo proprietà non gestibili da Tailwind:
   mask, css custom properties, backdrop-filter
   ============================================ */

/* Sovrapposizione grid */
.ics-compare > * {
	grid-area: 1 / 1;
}

/* Mask gradient — rivela immagine prima */
.ics-before {
	-webkit-mask: linear-gradient(
		to right,
		#000 0,
		#000 var(--pos, 50%),
		transparent var(--pos, 50%)
	);
	mask: linear-gradient(
		to right,
		#000 0,
		#000 var(--pos, 50%),
		transparent var(--pos, 50%)
	);
	z-index: 2;
}

.ics-after {
	z-index: 1;
}

/* Posizione handle agganciata a --pos */
.ics-handle {
	left: var(--pos, 50%);
	z-index: 5;
}

/* Linea verticale */
.ics-line {
	width: 2px;
	background: rgba(255,255,255,0.8);
	box-shadow: 0 0 4px rgba(0,0,0,0.2);
}

/* Cerchio: sfondo interno color crema/cipria */
.ics-circle {
	background: #e5d3ce;
	border: 2px solid rgba(255,255,255,0.9);
	pointer-events: all;
	z-index: 6;
}

.ics-circle:hover,
.ics-dragging .ics-circle {
	transform: scale(1.1);
	border-color: #fff;
}

.ics-circle:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px #2271b1;
}

.ics-circle svg {
	color: rgba(255,255,255,0.95);
	filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
}

/* Etichette — sfondo semitrasparente con blur */
.ics-label {
	background: rgba(0,0,0,0.38);
	color: rgba(255,255,255,0.9);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	line-height: 1.4;
}

/* Immagini non interagibili */
.ics-before,
.ics-after {
	pointer-events: none;
}

.ics-labels {
	z-index: 4;
}

/* ============================================
   GLOW ON VIEWPORT ENTRY
   Triggered once when the slider becomes 50% visible.
   Three subtle pulses on the divider line + circle.
   ============================================ */
@keyframes ics-line-glow {
	0%, 100% {
		background: rgba(255,255,255,0.8);
		box-shadow: 0 0 4px rgba(0,0,0,0.2);
	}
	50% {
		background: rgba(255,255,255,1);
		box-shadow:
			0 0 10px 2px rgba(255,255,255,0.75),
			0 0 22px 6px rgba(255,255,255,0.35);
	}
}

@keyframes ics-circle-glow {
	0%, 100% {
		border-color: rgba(255,255,255,0.9);
		box-shadow: 0 0 0 0 rgba(255,255,255,0);
	}
	50% {
		border-color: #fff;
		box-shadow:
			0 0 0 6px rgba(255,255,255,0.28),
			0 0 18px 4px rgba(255,255,255,0.5);
	}
}

.ics-compare.ics-attention .ics-line {
	animation: ics-line-glow 0.7s ease-in-out 0s 3;
}

.ics-compare.ics-attention .ics-circle {
	animation: ics-circle-glow 0.7s ease-in-out 0s 3;
}

@media (prefers-reduced-motion: reduce) {
	.ics-compare.ics-attention .ics-line,
	.ics-compare.ics-attention .ics-circle {
		animation: none;
	}
}