/*
 * The strip of quarter shapes along the foot of the page. One tile is the designer's full
 * strip, 13.7 times as wide as it is tall; footer.php prints enough of them to pass the widest
 * window and the overflow is cut.
 */

.strip {
	display: flex;
	height: var(--strip-height);
	overflow: hidden;
}

.strip__tile {
	flex: none;
	width: auto;
	max-width: none;
	height: 100%;
}

/*
 * Each quarter grows out of its square corner, one after another from the left. --i is the
 * quarter's place in its tile, written on the path in strip.svg, and there are 14 to a tile.
 * It plays once on load: the strip is on screen from the start on the holding poster.
 */
@media (prefers-reduced-motion: no-preference) {
	.strip__q {
		transform-box: fill-box;
		animation: strip-grow var(--duration-reveal) var(--ease-out) both;
		animation-delay: calc(var(--strip-delay) + (var(--tile, 0) * 14 + var(--i)) * var(--strip-step));
	}

	.strip__q--tl {
		transform-origin: 0% 0%;
	}

	.strip__q--tr {
		transform-origin: 100% 0%;
	}

	.strip__q--bl {
		transform-origin: 0% 100%;
	}

	.strip__q--br {
		transform-origin: 100% 100%;
	}

	.strip__tile:nth-child(2) {
		--tile: 1;
	}

	.strip__tile:nth-child(3) {
		--tile: 2;
	}

	.strip__tile:nth-child(4) {
		--tile: 3;
	}
}

@keyframes strip-grow {
	from {
		transform: scale(0);
	}
}