/**
 * Sabine Andrey - Scroll-driven vertical borders
 *
 * La sezione "progetti" e' composta da 3 righe sibling: #progetti (riga 1) +
 * 2 div con la stessa classe layout (righe 2 e 3). Il JS aggiunge la classe
 * .sa-progetti-row a tutte e tre per uniformare il targeting.
 *
 * Strategia:
 * - I bordi originali sono inline styles sui wp-block-group figli (border-left/right 1px).
 * - Li rendiamo trasparenti e disegniamo pseudo-elementi posizionati al loro posto.
 * - CSS variable --sa-progetti-progress alimentata dal JS via rAF, con freeze
 *   one-way: una volta raggiunto 1 la riga resta composta, no rewind.
 */

/* Container di posizionamento per gli pseudo-elementi sui figli con bordo */
.sa-progetti-row [style*="border-left-width:1px"],
.sa-progetti-row [style*="border-right-width:1px"] {
	position: relative;
}

/* Nasconde i bordi laterali originali ma mantiene il border-bottom della riga */
.sa-progetti-row [style*="border-left-width:1px"] {
	border-left-color: transparent !important;
}

.sa-progetti-row [style*="border-right-width:1px"] {
	border-right-color: transparent !important;
}

/* Linee verticali animate: ::before per il sinistro, ::after per il destro
   Si compongono dall'alto verso il basso, spariscono dal basso verso l'alto.
   Tecnica: clip-path inset bottom cresce/decresce, il top resta fisso. */
.sa-progetti-row [style*="border-left-width:1px"]::before,
.sa-progetti-row [style*="border-right-width:1px"]::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: 2px;
	background: var( --wp--preset--color--base );
	pointer-events: none;
	clip-path: inset( 0 0 calc( ( 1 - var( --sa-progetti-progress, 0 ) ) * 100% ) 0 );
	will-change: clip-path;
}

.sa-progetti-row [style*="border-left-width:1px"]::before {
	left: -1px;
}

.sa-progetti-row [style*="border-right-width:1px"]::after {
	right: -1px;
}

/* Bordo orizzontale (border-bottom della riga): si compone da sx->dx, sparisce da dx->sx
   Tecnica: clip-path inset right cresce/decresce, il lato sinistro resta fisso a 0. */
.sa-progetti-row[style*="border-bottom-width:1px"] {
	position: relative;
	border-bottom-color: transparent !important;
}

.sa-progetti-row[style*="border-bottom-width:1px"]::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 2px;
	background: var( --wp--preset--color--base );
	pointer-events: none;
	clip-path: inset( 0 calc( ( 1 - var( --sa-progetti-progress, 0 ) ) * 100% ) 0 0 );
	will-change: clip-path;
}

/* Accessibility: chi richiede meno animazioni vede i bordi pieni e statici */
@media ( prefers-reduced-motion: reduce ) {

	.sa-progetti-row [style*="border-left-width:1px"]::before,
	.sa-progetti-row [style*="border-right-width:1px"]::after {
		clip-path: inset( 0 0 0 0 );
		animation: none;
	}

	.sa-progetti-row[style*="border-bottom-width:1px"]::after {
		clip-path: inset( 0 0 0 0 );
		animation: none;
	}
}