/* Keep your existing rules above/below as you like:
   html/body, .frame, .area, @keyframes frames, etc. :contentReference[oaicite:3]{index=3} */

/* The scrolling container still moves left-to-right like your original */
.scroll {
	position: absolute;
	bottom: 5%;
	left: 0;
	height: 10%;
	animation: scroll 25s linear infinite;
	color: #adadff;
	opacity: 0.9;
}

.scroll .ch {
	position: absolute;
	top: 0;
	left: calc(var(--i) * 1em);
	animation: bounce 1s ease-out alternate infinite;
	animation-delay: calc(var(--i) * 100ms);
}

@keyframes scroll {
	0% {
		transform: translateX(var(--fromX, 280px));
	}

	100% {
		transform: translateX(var(--toX, -500px));
	}
}

@keyframes bounce {
	0% {
		transform: translateY(100%);
	}

	100% {
		transform: translateY(0%);
	}
}