.steps {
	--height: 100vh;
	--height: 100lvh;
	/* scroll-snap-align: start; */
	counter-reset: step;
	height: calc(2 * var(--height));
	background-color: hsl(var(--hsl-black));
	color: hsl(var(--hsl-white));
}

/* .steps > h2 {
	position: sticky;
	top: var(--header);
} */

.steps__wrapper {
	display: grid;
	gap: var(--margin-double);
	grid-template-columns: 1fr 1fr;
	height: var(--height);
	position: sticky;
	top: 0;
}

.steps__steps {
	display: grid;
	align-items: start;
	gap: var(--margin-double);
	grid-template-columns: repeat(4, 1fr);
	height: var(--height);
	padding: var(--margin-double);
	position: absolute;
	inset: 0;
	z-index: 1;
	font-family: "Suisse Intl Mono";
	text-transform: uppercase;
	pointer-events: none;
}

.steps__steps > div {
	height: 100%;
}

/* .steps__steps > div:nth-child(3) {
	padding-left: 0.18em;
} */

.steps__steps > div > .animate {
	position: sticky;
	top: var(--header);
}

.steps__steps .animate > span {
	animation-name: none !important;
}

.steps--reveal .steps__steps .animate > span {
	animation-name: in !important;
}

.steps__coffees {
	grid-column: 1;
	display: flex;
	flex-direction: column;
	height: calc(var(--height) - var(--header) - 2 * var(--margin-double) - var(--fontsize));
	margin: calc(var(--header) + var(--margin-double) + var(--fontsize)) 0 var(--margin-double);
	padding: 0 var(--margin-double);
	overflow-x: hidden;
	overflow-y: hidden; /* scrolled by steps.js in step with the page */
	position: relative;
	opacity: 0;
	mask: linear-gradient(
		to bottom,
		transparent,
		black calc(2 * var(--margin-double)),
		black calc(100% - 2 * var(--margin-double)),
		transparent 100%
	);
}

.steps__coffees::before,
.steps__coffees::after {
	content: "";
	display: block;
	flex: 0 0 calc(50% - 1.5 * 2.5vw - var(--margin-double));
}

.steps--reveal .steps__coffees {
	animation: in 1s var(--delay) forwards;
}

.steps__coffee {
	-webkit-tap-highlight-color: transparent;
	--offsetY: 0;
	scroll-snap-align: center;
	display: flex;
	justify-content: space-between;
	margin-bottom: calc(2 * var(--margin-double));
	position: relative;
	transform: scale(0.5);
	transform-origin: left center;
	font-size: 2.5vw;
	line-height: 1;
	letter-spacing: -0.03em;
	white-space: nowrap;
	cursor: pointer;
	pointer-events: none;
	transition: transform 0.3s ease;
}

.steps__coffee--active {
	transform: scale(1);
	cursor: default;
}

.steps__coffee > div:not(.qr) {
	margin-left: -0.09em;
	color: hsl(var(--hsl-dark-grey));
	pointer-events: all;
	transition: color 0.5s;
}

.steps__coffee--active > div:not(.qr) {
	color: hsl(var(--hsl-white));
}

@media (hover: hover) {
	.steps__coffee:hover > div:not(.qr) {
		color: hsl(var(--hsl-white));
	}
}

.steps__flavors {
	display: none;
	gap: var(--margin-double);
	margin-top: var(--margin);
	position: absolute;
	top: 100%;
	left: 0;
}

.steps__coffee--active .steps__flavors {
	display: flex;
}

.steps__flavor[style*='--color'] {
	display: flex;
	align-items: baseline;
	position: relative;
	font-family: "Suisse Intl Mono";
	font-size: var(--fontsize);
	letter-spacing: 0.04em;
	line-height: 1.2;
	text-transform: uppercase;
}

.steps__flavor[style*='--color']::before {
	content: "";
	display: inline-block;
	width: 0.725em;
	height: 0.725em;
	margin-right: 1ch;
	animation: color 0s 0.5s forwards;
}

@keyframes color {
	from {
		background-color: transparent;
	}
	to {
		background-color: var(--color);
	}
}

.steps__coffee > .qr {
	display: none;
	width: auto;
	height: 100%;
	position: absolute;
	top: 0;
	right: 0;
	opacity: 0;
}

.steps__coffee--active > .qr {
	display: block;
	opacity: 1;
	transition: display 1s, opacity 0.5s 1s;
	transition-behavior: allow-discrete;
}

@starting-style {
	.steps__coffee--active > .qr {
		opacity: 0;
	}
}

.steps__coffee > .qr > svg {
	width: auto;
	height: 100%;
}

.steps__coffee > .qr > svg rect[fill="#ffffff"] {
	fill: currentColor;
}

.steps__flare {
	grid-column: 2;
	width: calc(100% + var(--margin-double));
	height: var(--height);
	margin-left: calc(-1 * var(--margin-double));
	overflow: hidden;
	position: relative;
	opacity: 0;
}

.steps--reveal .steps__flare {
	animation: in 1s var(--delay) forwards;
}

.steps__flare > canvas,
.steps__flare > noscript > video {
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	object-fit: cover;
}

@media (orientation: portrait) {
	.steps__wrapper {
		gap: 0;
		grid-template-columns: 1fr;
		grid-template-rows: 33% 1fr;
	}

	.steps__steps {
		grid-template-columns: 1fr;
		grid-template-rows: 33% 1fr 1fr 1fr;
		gap: 0;
		padding: 0;
	}

	.steps__steps > div {
		padding: var(--margin-double);
	}

	.steps__coffees {
		--height: 33vh;
		--height: 33svh;
		align-items: center;
		flex-direction: row;
		height: auto;
		margin-bottom: 0;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		mask: linear-gradient(
			to right,
			transparent,
			black var(--margin-double),
			black calc(100% - 2 * var(--margin-double)),
			transparent 100%
		);
	}

	.steps__coffees::before,
	.steps__coffees::after {
		display: none;
	}

	.steps__coffee {
		scroll-snap-align: start;
		scroll-margin-left: var(--margin-double);
		flex: 0 0 calc(100% - 2 * var(--margin-double));
		margin-bottom: 0;
		transform-origin: top left;
		transform: translateY(calc(-1 * var(--margin-double)));
		/* font-size: calc((var(--height) - var(--header) - 3 * var(--margin-double) - var(--fontsize)) / 3) !important; */
	}

	.steps__coffee:last-of-type {
		flex-basis: 100%;
	}

	.steps__coffee:not(.steps__coffee--active) {
		transform: translateY(calc(-1 * var(--margin-double))) scale(0.5);
	}

	.steps__flare {
		grid-column: 1;
		grid-row: 2;
		height: auto;
	}
}

@media (max-width: 1024px) {
	.steps__coffee {
		font-size: 3.6vw;
	}
}

@media (max-width: 600px) {
	.steps__coffee {
		font-size: 6vw;
	}
}

@media (max-width: 480px) {
	.steps__coffee {
		font-size: 2em;
	}
}