/* Cancello di verifica: la pagina non chiede niente all'utente, quindi l'attesa e' tutto
   quello che c'e' da mostrare. Un biglietto che passa sotto lo scanner racconta cosa sta
   succedendo meglio di una rotellina.
   Qui i colori sono quelli del tema: il riquadro ha la tinta delle schede del sito e lo
   scanner l'accento, invece dell'azzurrino che il tema non usa da nessuna parte. */

/* Lo stacco dall'alto e' lo stesso di .eventi-item-area nella homepage (titoli.css): sotto
   c'e' la testata alta 400px in posizione assoluta, e con i 60px di prima il riquadro
   dell'attesa saliva molto piu' in alto del contenuto delle altre pagine. */
.gate-area {
	padding: 140px 0 110px;
}

.gate-attesa {
	--gate-accento: var(--primary-color, #0c59db);
	--gate-sfondo: #ede4e4;
	--gate-scheletro: #e0d3d3;
	background: var(--gate-sfondo);
	border-radius: 10px;
	padding: 50px 20px 45px;
	text-align: center;
}

/* Il caso in cui non ce l'abbiamo fatta: stessa cornice dell'attesa, tinta di allarme, e una
   via d'uscita da premere. */
.gate-errore {
	--gate-allarme: #dc3545;
	background: #fdf2f2;
	border: 1px solid #f3d2d5;
	border-radius: 10px;
	padding: 50px 20px 45px;
	text-align: center;
}

.gate-errore-segno {
	font-size: 44px;
	line-height: 1;
	margin-bottom: 20px;
	color: var(--gate-allarme);
}

.gate-errore .gate-sottotitolo {
	margin-bottom: 25px;
}

/*--- Il biglietto ---*/

.gate-biglietto {
	position: relative;
	display: flex;
	width: 300px;
	max-width: 100%;
	height: 130px;
	margin: 0 auto 34px;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 12px 30px rgba(23, 43, 77, .14);
	overflow: hidden;
	animation: gate-galleggia 3.2s ease-in-out infinite;
}

/* I due intagli della perforazione: sono cerchi del colore dello sfondo, quindi il loro
   colore va tenuto in riga con quello di .gate-attesa. */
.gate-biglietto::before, .gate-biglietto::after {
	content: "";
	position: absolute;
	left: 96px;
	width: 20px;
	height: 20px;
	margin-left: -10px;
	border-radius: 50%;
	background: var(--gate-sfondo);
	z-index: 2;
}

.gate-biglietto::before {
	top: -10px;
}

.gate-biglietto::after {
	bottom: -10px;
}

.gate-perforazione {
	position: absolute;
	left: 96px;
	top: 14px;
	bottom: 14px;
	border-left: 2px dashed #e0d3d3;
}

/*--- Matrice: il codice a barre che pulsa ---*/

.gate-matrice {
	flex: 0 0 96px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 3px;
}

.gate-matrice span {
	display: block;
	width: 3px;
	height: 52px;
	border-radius: 1px;
	background: #c9b6b6;
	animation: gate-barre 1.5s ease-in-out infinite;
}

.gate-matrice span:nth-child(2n) { width: 2px; }
.gate-matrice span:nth-child(3n) { width: 5px; }
.gate-matrice span:nth-child(1) { animation-delay: 0s; }
.gate-matrice span:nth-child(2) { animation-delay: .1s; }
.gate-matrice span:nth-child(3) { animation-delay: .2s; }
.gate-matrice span:nth-child(4) { animation-delay: .3s; }
.gate-matrice span:nth-child(5) { animation-delay: .4s; }
.gate-matrice span:nth-child(6) { animation-delay: .5s; }
.gate-matrice span:nth-child(7) { animation-delay: .6s; }
.gate-matrice span:nth-child(8) { animation-delay: .7s; }
.gate-matrice span:nth-child(9) { animation-delay: .8s; }

/*--- Corpo: le righe dei dati ancora da caricare ---*/

.gate-dati {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 10px;
	padding: 0 20px 0 24px;
	text-align: left;
}

.gate-riga {
	height: 9px;
	border-radius: 5px;
	background: linear-gradient(90deg, var(--gate-scheletro) 25%, #cbb5b5 37%, var(--gate-scheletro) 63%);
	background-size: 400% 100%;
	animation: gate-onda 1.6s linear infinite;
}

.gate-riga.gate-riga-titolo {
	height: 14px;
	width: 78%;
}

.gate-riga.gate-riga-media { width: 62%; }
.gate-riga.gate-riga-corta { width: 40%; }

/*--- Lo scanner che legge il biglietto ---*/

.gate-scanner {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 3px;
	background: var(--gate-accento);
	box-shadow: 0 0 16px 4px var(--gate-accento);
	z-index: 3;
	animation: gate-scansione 2.4s cubic-bezier(.45, 0, .55, 1) infinite;
}

/*--- Testi e barra di avanzamento ---*/

.gate-titolo {
	margin: 0;
	font-size: 28px;
	font-weight: 700;
	color: #2a1a1e;
}

.gate-sottotitolo {
	margin: 12px auto 0;
	max-width: 440px;
	font-size: 15px;
	line-height: 24px;
	color: #7a6a6d;
}

.gate-progresso {
	position: relative;
	width: 240px;
	max-width: 80%;
	height: 4px;
	margin: 28px auto 0;
	border-radius: 4px;
	background: #dcc9c9;
	overflow: hidden;
}

.gate-progresso span {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 40%;
	border-radius: 4px;
	background: var(--gate-accento);
	animation: gate-avanza 1.7s ease-in-out infinite;
}

/* Come la homepage, sugli schermi stretti lo stacco cresce invece di calare: la testata
   occupa piu' spazio in proporzione. */
@media (max-width: 991.98px) {
	.gate-area { padding-top: 170px; }
}

@media (max-width: 575px) {
	.gate-area { padding-bottom: 70px; }
	.gate-titolo { font-size: 23px; }
	.gate-biglietto { height: 116px; }
	.gate-matrice span { height: 44px; }
}

@keyframes gate-scansione {
	0%   { top: 0; opacity: 0; }
	10%  { opacity: .95; }
	50%  { top: calc(100% - 3px); opacity: .95; }
	60%  { top: calc(100% - 3px); opacity: 0; }
	100% { top: 0; opacity: 0; }
}

@keyframes gate-barre {
	0%, 100% { opacity: .35; transform: scaleY(.82); }
	50%      { opacity: 1; transform: scaleY(1); }
}

@keyframes gate-onda {
	0%   { background-position: 100% 0; }
	100% { background-position: 0 0; }
}

@keyframes gate-galleggia {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-6px); }
}

@keyframes gate-avanza {
	0%   { left: -40%; }
	100% { left: 100%; }
}

/* Chi ha chiesto meno movimento vede comunque che qualcosa sta lavorando, ma senza scatti. */
@media (prefers-reduced-motion: reduce) {
	.gate-biglietto, .gate-matrice span, .gate-riga, .gate-scanner {
		animation: none;
	}
	.gate-scanner {
		top: 50%;
		opacity: .5;
	}
	.gate-progresso span {
		animation: gate-pulsa 1.8s ease-in-out infinite;
		left: 0;
		width: 100%;
	}
	@keyframes gate-pulsa {
		0%, 100% { opacity: .35; }
		50%      { opacity: 1; }
	}
}