/* top eyecatch: flowing topia avatar cards (same look as topia.tv "NOW ON AIR") */
.avatar-band {
	--card-h: 31vw;
	position: relative;
	height: 100%;
	overflow: hidden;
	background: #1FCB95;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 1.2vw;
}

/* the band fills the eyecatch frame and does not use the parallax shift */
.eyecatch-band .parallax { position: absolute; inset: 0; height: 100%; }

/* comment chips: one row above and one below the cards (never over the avatars) */
.ab-row { flex: none; overflow: hidden; padding: 4px 0; }
.ab-row-track {
	display: flex;
	gap: 14px;
	width: max-content;
	animation: ab-marquee 70s linear infinite;
}
.ab-row.rev .ab-row-track { animation-direction: reverse; animation-duration: 80s; }
.ab-chip {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 6px 20px 6px 6px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .92);
	color: #0C2622;
	font-size: 15px;
	font-weight: 700;
	white-space: nowrap;
}
.ab-chip img { width: 34px; height: 34px; border-radius: 50%; }
.ab-chip:nth-child(4n+1) { transform: rotate(-2deg); }
.ab-chip:nth-child(4n+3) { transform: rotate(2deg); }

/* tilted avatar cards */
.ab-cards { position: relative; z-index: 1; flex: none; width: 100%; overflow: hidden; padding: .6vw 0 2.6vw; }
.ab-track {
	display: flex;
	gap: 2.2vw;
	width: max-content;
	animation: ab-marquee 50s linear infinite;
	will-change: transform;
	backface-visibility: hidden;
}
.ab-card {
	position: relative;
	flex: none;
	margin: 0;
	height: var(--card-h);
	aspect-ratio: 9 / 16;
	border-radius: 2.2vw;
	overflow: hidden;
	border: 7px solid #fff;
	outline: 3px solid #0C2622;
	box-shadow: 8px 10px 0 #0C2622;
	background-color: #E6FAF1;
	background-image: radial-gradient(rgba(54, 226, 174, .35) 2px, transparent 2.5px);
	background-size: 18px 18px;
	transform: rotate(-3deg);
}
.ab-card:nth-child(even) { transform: translateY(1.8vw) rotate(3deg); }
.ab-card:nth-child(3n+2) { background-color: #DDF7C9; }
.ab-card:nth-child(3n) { background-color: #D7F3FF; }
.ab-card img {
	position: absolute;
	left: 50%;
	bottom: -4%;
	height: 98%;
	width: auto;
	max-width: none;
	transform: translateX(-50%);
}

@keyframes ab-marquee {
	from { transform: translate3d(0, 0, 0); }
	to { transform: translate3d(-50%, 0, 0); }
}

@media (max-width: 767px) {
	.avatar-band { --card-h: 42vw; gap: 1.5vw; }
	.ab-card { border-width: 5px; border-radius: 4vw; box-shadow: 5px 6px 0 #0C2622; }
	.ab-track { gap: 3.5vw; animation-duration: 40s; }
	.ab-chip { font-size: 12px; padding: 4px 14px 4px 4px; gap: 6px; }
	.ab-chip img { width: 24px; height: 24px; }
}
@media (prefers-reduced-motion: reduce) {
	.ab-track, .ab-row-track { animation: none; }
}