/* 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.
   L'accento segue il tema: discobot definisce --primary-color, cinebot no e resta sul blu. */

.gate-area {
	padding: 60px 0 110px;
}

.gate-attesa {
	--gate-accento: var(--primary-color, #0c59db);
	--gate-sfondo: #edf3fb;
	--gate-scheletro: #e6edf7;
	background: var(--gate-sfondo);
	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;
	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 #dfe6f1;
}

/*--- 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: #c3cfe2;
	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%, #cfdaea 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: #1b2a41;
}

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

.gate-progresso {
	position: relative;
	width: 240px;
	max-width: 80%;
	height: 4px;
	margin: 28px auto 0;
	border-radius: 4px;
	background: #e2eaf5;
	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;
}

@media (max-width: 575px) {
	.gate-area { padding: 40px 0 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; }
	}
}