/* The page's one marquee: airport codes. Pauses on hover, on focus and when offscreen. */
.azb-marquee {
	overflow: hidden; padding-block: var(--s-6);
	-webkit-mask-image: linear-gradient(90deg, transparent, var(--azb-bg) 7%, var(--azb-bg) 93%, transparent);
	mask-image: linear-gradient(90deg, transparent, var(--azb-bg) 7%, var(--azb-bg) 93%, transparent);
}
.azb-marquee__track { display: flex; width: max-content; animation: azb-marquee 70s linear infinite; }
.azb-marquee:hover .azb-marquee__track, .azb-marquee:focus-within .azb-marquee__track, .azb-marquee.is-paused .azb-marquee__track { animation-play-state: paused; }
.azb-marquee__group { display: flex; align-items: baseline; gap: clamp(2.5rem, 6vw, 5rem); padding-right: clamp(2.5rem, 6vw, 5rem); list-style: none; margin: 0; }
.azb-marquee__item { display: inline-flex; align-items: baseline; gap: var(--s-3); color: var(--azb-ink) !important; text-decoration: none; white-space: nowrap; }
.azb-marquee__code { font: 400 clamp(1.75rem, 3.4vw, 2.75rem)/1 var(--font-mono); letter-spacing: 0.08em; }
.azb-marquee__name { font-size: var(--fs-small); color: var(--azb-muted); }
a.azb-marquee__item:hover .azb-marquee__code { color: var(--azb-accent-hi); }
@keyframes azb-marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
	.azb-marquee { -webkit-mask-image: none; mask-image: none; }
	.azb-marquee__track { animation: none; width: auto; justify-content: center; }
	.azb-marquee__group { flex-wrap: wrap; justify-content: center; gap: var(--s-6) var(--s-10); padding: 0 var(--gutter); }
	.azb-marquee__group[aria-hidden="true"] { display: none; }
}
