/**
 * Preloader video
 *
 * Prefisso kb-preloader-. Non condivide niente con le altre animazioni.
 *
 * Nessun !important: se qualcosa non si applica, la causa e' la
 * specificita' o l'ordine di caricamento, e va corretta li'.
 */

.kb-preloader {

	/* --- Aspetto --------------------------------------------------- */
	--kb-preloader-sfondo: #000000;
	--kb-preloader-z: 999999;
	--kb-preloader-dissolvenza: 600ms;

	/* --- Rifilo dei bordi -------------------------------------------
	 * Righe sacrificate sopra e sotto, in frazione dell'ALTEZZA del video.
	 *
	 * Il filmato e' 1498x844, e 844 non e' multiplo di 16: l'encoder ha
	 * riempito fino a 848 e ha segnalato un ritaglio di 4 righe in basso.
	 * Con lo scalaggio frazionario il filtro bilineare del compositore
	 * puo' pescare in quelle righe di riempimento, che escono come una
	 * linea chiara sul bordo inferiore. Si vede solo dove il bordo e' a
	 * schermo, cioe' con finestre piu' strette di 1.7749 - telefoni e
	 * tablet in verticale - perche' sul 16:9 il fondo e' gia' tagliato
	 * via da overflow: hidden.
	 *
	 * In percentuale e non in pixel di proposito: le righe da togliere
	 * sono righe della SORGENTE, e il loro spessore a schermo cambia con
	 * la larghezza della finestra. Una percentuale dell'altezza ne toglie
	 * sempre lo stesso numero, da 390px a 3440px di larghezza.
	 *
	 * 0.7% = circa 6 righe su 844, con le 4 di riempimento dentro e un
	 * margine per la portata del filtro. A 0 il rifilo e' disattivato.
	 */
	--kb-preloader-rifilo: 0.7%;

	/* --- Vie d'uscita, lette dal JavaScript --------------------------
	 * attesa-avvio     dal via fino a quando il video comincia davvero a
	 *                  scorrere. Copre l'autoplay rifiutato e il file che
	 *                  non arriva.
	 * margine-durata   quanto si concede OLTRE la durata vera del video,
	 *                  che il JavaScript legge dai metadati. Copre gli
	 *                  stalli di rete durante la riproduzione.
	 * timeout-massimo  tetto assoluto, non superabile da niente. Con un
	 *                  video piu' lungo di ~13s va alzato, altrimenti lo
	 *                  taglia.
	 */
	--kb-preloader-attesa-avvio: 3000ms;
	--kb-preloader-margine-durata: 2000ms;
	--kb-preloader-timeout-massimo: 15000ms;

	/*
	 * Visibile dal primo paint, non acceso dal JavaScript: altrimenti fra
	 * il momento in cui la pagina si disegna e quello in cui lo script gira
	 * si vedrebbe il contenuto, che e' esattamente cio' che un preloader
	 * deve impedire.
	 *
	 * Essere visibili di default sposta pero' il rischio: se lo script non
	 * arrivasse - file non caricato, errore di rete sul .js - l'overlay
	 * resterebbe su per sempre. Da qui il salvagente qui sotto, che e' puro
	 * CSS e non dipende da niente.
	 */
	display: block;
	animation: kb-preloader-salvagente 1ms linear var(--kb-preloader-timeout-massimo) forwards;
	position: fixed;
	inset: 0;
	z-index: var(--kb-preloader-z);
	background: var(--kb-preloader-sfondo);
	overflow: hidden;
	opacity: 1;
	transition: opacity var(--kb-preloader-dissolvenza) ease;
}

/*
 * Salvagente: se il JavaScript non gira affatto, l'overlay se ne va da solo
 * al tetto massimo. Non sostituisce le reti del JavaScript, che chiudono
 * molto prima e sanno anche perche': copre il caso in cui il JavaScript non
 * esiste proprio.
 */
@keyframes kb-preloader-salvagente {
	to {
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
	}
}

.kb-preloader--uscita {
	opacity: 0;
	pointer-events: none;
}

/* Fine corsa: fuori dal flusso e fuori dai conti del rendering. */
.kb-preloader--chiuso {
	display: none;
	animation: none;
}

/*
 * Larghezza piena sempre, altezza proporzionale, centrato in verticale.
 *
 * Posizionamento assoluto e non centratura flex: con flex, un elemento piu'
 * alto del contenitore dipende da come align-items gestisce la traboccatura,
 * che non e' uniforme. Cosi' invece il conto e' esplicito e vale in
 * entrambi i versi - video piu' basso della finestra (bande sopra e sotto)
 * e video piu' alto (tagliato in parti uguali sopra e sotto).
 *
 * width: 100% e non 100vw: 100vw comprende la larghezza della barra di
 * scorrimento e produrrebbe una traboccatura orizzontale. Il 100% e' quello
 * dell'overlay, che essendo fixed con inset: 0 misura esattamente la
 * finestra.
 *
 * Niente max-width, niente max-height, niente object-fit: servivano a
 * impedire il ritaglio, che adesso e' accettato.
 */
.kb-preloader__video {
	display: block;
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: auto;
	transform: translateY(-50%);

	/*
	 * Sfondo nero sull'elemento stesso: non serve al rifilo, che scopre
	 * comunque il nero dell'overlay, ma copre l'istante prima che il
	 * primo fotogramma sia decodificato, quando il riquadro e' vuoto.
	 */
	background: var(--kb-preloader-sfondo);

	/*
	 * Simmetrico sopra e sotto: la riga sospetta e' quella in basso, ma
	 * togliere solo da un lato sposterebbe il centro ottico, e il bordo
	 * superiore ha lo stesso tipo di confine. I lati NON si toccano: il
	 * video deve continuare a raggiungere entrambi i bordi laterali.
	 */
	clip-path: inset(var(--kb-preloader-rifilo) 0);
}

/*
 * Blocco dello scorrimento.
 *
 * Le classi le mette e le toglie SOLO il JavaScript, mai il CSS da solo:
 * una regola che blocca lo scroll in base alla presenza dell'overlay
 * bloccherebbe per sempre la pagina se il JavaScript non partisse.
 *
 * Selettore a due pezzi (elemento + classe) per battere il CSS del
 * Customizer, che su questo sito imposta overflow su html e body.
 */
html.kb-preloader-blocco,
body.kb-preloader-blocco {
	overflow: hidden;
}

/*
 * Niente animazioni: niente preloader. Il JavaScript esce prima di
 * accendere l'overlay, questa regola e' la seconda serratura.
 */
@media (prefers-reduced-motion: reduce) {
	.kb-preloader {
		display: none;
	}
}