/* Bari News: striscione "Liberate la Bari" in cima a tutte le pagine. Solo biancorosso. */

.bari-striscione {
	--bs-rosso: #c8102e;
	--bs-rosso-acceso: #e0213f;
	--bs-rosso-scuro: #7a0a1c;
	--bs-notte: #12030a;
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background: var(--bs-notte);
	color: #fff;
	text-align: center;
	font-family: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
	border-bottom: 4px solid var(--bs-rosso);
}

/* Fondo: fasce biancorosse in diagonale che scorrono piano, sotto un velo scuro e un bagliore rosso. */
.bari-striscione__fondo {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	background: var(--bs-notte);
}

.bari-striscione__fondo::before {
	/* fasce senza giunture: scorrono di un periodo esatto (146px / sin 55° = 178.23px) */
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: -200px;
	right: -200px;
	background: repeating-linear-gradient(-55deg, var(--bs-rosso) 0 46px, var(--bs-rosso-scuro) 46px 92px, #fff 92px 100px, var(--bs-rosso-scuro) 100px 146px);
	animation: bari-striscione-fasce 6s linear infinite;
}

.bari-striscione__fondo::after {
	/* velo scuro ai lati, bagliore rosso in basso, grana da stoffa */
	content: "";
	position: absolute;
	inset: 0;
	background:
		repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.12) 0 2px, transparent 2px 4px),
		radial-gradient(ellipse 60% 120% at 50% 110%, rgba(224, 33, 63, 0.45), transparent 70%),
		linear-gradient(90deg, var(--bs-notte) 0%, rgba(18, 3, 10, 0.6) 22%, rgba(18, 3, 10, 0.6) 78%, var(--bs-notte) 100%);
}

.bari-striscione__corpo {
	padding: clamp(14px, 2.6vw, 26px) 16px clamp(10px, 2vw, 18px);
}

.bari-striscione__sopra {
	margin: 0 0 4px;
	font-family: "Figtree", system-ui, sans-serif;
	font-weight: 700;
	font-size: clamp(0.66rem, 1.3vw, 0.8rem);
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.85);
}

.bari-striscione__sopra::before,
.bari-striscione__sopra::after {
	content: "";
	display: inline-block;
	width: 28px;
	height: 2px;
	margin: 0 12px;
	vertical-align: middle;
	background: var(--bs-rosso-acceso);
}

.bari-striscione__motto {
	margin: 0;
	display: flex;
	justify-content: center;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0;
	font-weight: 900;
	font-size: clamp(2.6rem, 9vw, 6.4rem);
	line-height: 0.9;
	text-transform: uppercase;
	letter-spacing: 0.01em;
}

.bari-striscione__parola {
	display: inline-block;
	color: #fff;
	text-shadow: 0 4px 0 var(--bs-rosso-scuro), 0 10px 30px rgba(0, 0, 0, 0.55);
	animation: bari-striscione-entra 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.bari-striscione__parola--la {
	/* tutto attaccato: LiberateLaBari = "Liberate la Bari" e "Liberatela, Bari" */
	color: var(--bs-rosso-acceso);
	text-shadow: 0 4px 0 var(--bs-notte), 0 10px 30px rgba(0, 0, 0, 0.55);
	margin-right: 0.1em;
	animation-delay: 0.12s;
}

.bari-striscione__parola--bari {
	padding: 0.02em 0.18em 0.04em;
	background: #fff;
	color: var(--bs-rosso);
	text-shadow: none;
	transform: skewX(-8deg);
	box-shadow: 0 6px 0 var(--bs-rosso-scuro), 0 14px 34px rgba(0, 0, 0, 0.45);
	animation: bari-striscione-entra-bari 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 0.24s both, bari-striscione-pulsa 3.2s ease-in-out 1.4s infinite;
}

/* Nastro che scorre sotto il motto. */
.bari-striscione__nastro {
	overflow: hidden;
	background: #fff;
	color: var(--bs-rosso);
	font-weight: 800;
	font-size: clamp(0.85rem, 1.6vw, 1.05rem);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
	padding: 6px 0;
}

.bari-striscione__scorre {
	display: inline-flex;
	align-items: center;
	animation: bari-striscione-scorre 40s linear infinite;
}

.bari-striscione__scorre span {
	padding: 0 18px;
}

.bari-striscione__scorre i {
	width: 8px;
	height: 8px;
	background: var(--bs-rosso);
	transform: rotate(45deg);
	flex: none;
}

@keyframes bari-striscione-fasce {
	from { transform: translateX(0); }
	to { transform: translateX(178.23px); }
}

@keyframes bari-striscione-scorre {
	to { transform: translateX(-50%); }
}

@keyframes bari-striscione-entra {
	from { opacity: 0; transform: translateY(0.4em); }
	to { opacity: 1; transform: none; }
}

@keyframes bari-striscione-entra-bari {
	from { opacity: 0; transform: skewX(-8deg) scale(0.6); }
	to { opacity: 1; transform: skewX(-8deg) scale(1); }
}

@keyframes bari-striscione-pulsa {
	0%, 100% { transform: skewX(-8deg) scale(1); }
	50% { transform: skewX(-8deg) scale(1.05); }
}

@media (prefers-reduced-motion: reduce) {
	.bari-striscione__fondo::before,
	.bari-striscione__scorre,
	.bari-striscione__parola {
		animation: none !important;
	}
}

@media print {
	.bari-striscione { display: none; }
}