/* Destinations ribbon: endless band of country names, solid/outlined, parcel markers between. */
.ribbon {
	position: relative; overflow: hidden;
	padding: clamp(18px, 2.4vw, 30px) 0;
	border-block: 1px solid var(--line);
	background: linear-gradient(180deg, var(--ink-2), var(--ink));
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.ribbon__track { display: flex; width: max-content; animation: ribbon 90s linear infinite; }
.ribbon:hover .ribbon__track { animation-play-state: paused; }
.ribbon__row { display: flex; align-items: center; flex: none; }
.ribbon__row li {
	display: flex; align-items: center; white-space: nowrap;
	font-size: clamp(1.9rem, 1rem + 3vw, 3.6rem); font-weight: 600; letter-spacing: -.04em; line-height: 1.15;
}
.ribbon__row li::after { /* parcel marker */
	content: ""; flex: none; width: .22em; height: .22em; margin: 0 .7em; border-radius: .05em;
	background: var(--amber); box-shadow: 0 0 .4em rgba(255, 176, 84, .6);
	transform: rotate(45deg);
}
.ribbon__row .is-solid { color: var(--paper); }
.ribbon__row .is-outline { color: transparent; -webkit-text-stroke: 1px rgba(238, 241, 248, .38); }
@keyframes ribbon { to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
	.ribbon__track { animation: none; }
}