@import url(https://fonts.bunny.net/css?family=sixtyfour:400);

@layer base, demo;

@layer demo {
	section {
		align-content: center;
		font-family: "Sixtyfour", monospace;
	}
	.flip-text {
		--clr-1: brown;
		--clr-2: white;
		--clr-3: rgb(94 165 0);

		--translate-distance: 1lh;
		--duration: 3s;
		--timing-function: cubic-bezier(0.66, 0, 0.34, 1);

		overflow-y: hidden;
		width: min(100%, 1200px);
		margin-inline: auto;
		display: grid;
		grid-auto-columns: 1fr;
		grid-auto-flow: column;
		gap: 0;
		font-size: clamp(1rem, 4.5vw + 0.05rem, 5rem);
		font-weight: 700;
		color: var(--clr-1);
		line-height: 1;
		&:nth-child(2) {
			font-size: clamp(1rem, 3.5vw + 0.05rem, 3rem);
			font-weight: 300;
			color: var(--clr-2);
			--delay-factor: 300ms;
		}

		/* flipped items */
		& > * {
			--delay: calc(var(--i) * 100ms + var(--delay-factor, 0ms));
			--translate: calc(var(--translate-distance) * 2);

			display: grid;
			place-content: center;
			/* one day we will get sibling-index() which we so desperatly need */
			&:nth-child(1) {
				--i: 1;
			}
			&:nth-child(2) {
				--i: 2;
			}
			&:nth-child(3) {
				--i: 3;
			}
			&:nth-child(4) {
				--i: 4;
			}
			&:nth-child(5) {
				--i: 5;
			}
			&:nth-child(6) {
				--i: 6;
			}
			&:nth-child(7) {
				--i: 7;
			}
			&:nth-child(8) {
				--i: 8;
			}
			&:nth-child(9) {
				--i: 9;
			}
			&:nth-child(10) {
				--i: 10;
			}
			&:nth-child(11) {
				--i: 11;
			}
			&:nth-child(12) {
				--i: 12;
			}
			&:nth-child(13) {
				--i: 13;
			}
			&:nth-child(14) {
				--i: 14;
			}
			&:nth-child(15) {
				--i: 15;
			}
			&:nth-child(16) {
				--i: 16;
			}
			&:nth-child(17) {
				--i: 17;
			}
			&:nth-child(18) {
				--i: 18;
			}
			&:nth-child(19) {
				--i: 19;
			}
			&:nth-child(20) {
				--i: 20;
			}
			&:nth-child(21) {
				--i: 21;
			}
			&:nth-child(22) {
				--i: 22;
			}
			/* ... add more as required */

			@media not (prefers-reduced-motion) {
				animation-name: flip-transform, flip-translate;
				animation-duration: var(--duration);
				animation-timing-function: var(--timing-function);
				animation-iteration-count: infinite;
				animation-delay: var(--delay);
			}
		}
	}
	footer {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 1rem;
		font-size: 0.7rem;
		color: #aaa;
		& > a {
			color: dodgerblue;
			text-decoration: none;
			transition: color 150ms ease-in-out;
			&:hover {
				color: hotpink;
			}
		}
	}
	@keyframes flip-transform {
		25% {
			/*scale: 1 -1;*/
		}
		50%,
		100% {
			transform: translateY(calc(var(--translate) * -1));
		}
	}
	@keyframes flip-translate {
		24.999999% {
			opacity: 1;
			translate: 0 0;
		}
		25% {
			opacity: 0;
		}
		25.000001%,
		100% {
			opacity: 1;
			translate: 0 calc(var(--translate) * 1);
		}
	}
}

@layer base {
	* {
		box-sizing: border-box;
	}
	html {
		scroll-behavior: smooth;
	}
	body {
		background: #111;
		margin: 0;
		padding: 1rem;
		min-height: 100svh;
		font-family: system-ui, sans-serif;
		display: grid;
		place-content: center;
		grid-template-rows: 1fr auto;
	}
}