@font-face {
	font-family: "Big Shoulders Display";
	src: url("fonts/big-shoulders-display-900.woff2") format("woff2");
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Barlow Condensed";
	src: url("fonts/barlow-condensed-700.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

:root {
	--red: #e4002b;
	--red-deep: #b5001f;
	--foil: #ffffff;
	--foil-dim: rgba(255, 255, 255, 0.55);
}

* {
	box-sizing: border-box;
}

html,
body {
	height: 100%;
}

body {
	margin: 0;
	background: var(--red);
	color: var(--foil);
	font-family: "Barlow Condensed", sans-serif;
	overflow: hidden;
}

::selection {
	background: var(--foil);
	color: var(--red-deep);
}

:focus-visible {
	outline: 2px solid var(--foil);
	outline-offset: 4px;
}

/* label__fizz: a quiet field of rising carbonation bubbles — the surface's one
   authored motion, anchored to the lower third so it never competes with the
   wordmark. */
.label__fizz {
	position: fixed;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
	z-index: 0;
	-webkit-mask-image: linear-gradient(to top, black 0%, black 30%, transparent 62%);
	mask-image: linear-gradient(to top, black 0%, black 30%, transparent 62%);
}

.label__fizz::before,
.label__fizz::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		radial-gradient(circle, rgba(255, 255, 255, 0.16) 0 2px, transparent 3px),
		radial-gradient(circle, rgba(255, 255, 255, 0.12) 0 1.4px, transparent 2.4px),
		radial-gradient(circle, rgba(255, 255, 255, 0.2) 0 1.8px, transparent 2.8px);
	background-size:
		140px 220px,
		90px 160px,
		180px 260px;
	background-position:
		10% 100%,
		55% 100%,
		80% 100%;
	animation: rise 14s linear infinite;
}

.label__fizz::after {
	background-size:
		110px 200px,
		70px 140px,
		160px 240px;
	background-position:
		30% 100%,
		70% 100%,
		95% 100%;
	animation-duration: 19s;
	animation-delay: -6s;
}

@keyframes rise {
	from {
		background-position:
			10% 115%,
			55% 130%,
			80% 120%;
	}
	to {
		background-position:
			10% -20%,
			55% -35%,
			80% -25%;
	}
}

main.label {
	position: relative;
	z-index: 1;
	min-height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 6vh 6vw;
	text-align: center;
	gap: clamp(0.5rem, 2vh, 1.25rem);
}

.label__mark {
	display: flex;
	flex-direction: column;
	align-items: center;
	animation: settle 900ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes settle {
	from {
		opacity: 0;
		transform: translateY(14px) scale(0.98);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

.label__wordmark {
	margin: 0;
	font-family: "Big Shoulders Display", sans-serif;
	font-weight: 900;
	font-size: clamp(5rem, 32vw, 26rem);
	line-height: 0.85;
	letter-spacing: -0.01em;
	color: var(--foil);
	-webkit-text-stroke: 1.5px rgba(228, 0, 43, 0.35);
	text-shadow:
		0 2px 0 rgba(181, 0, 31, 0.9),
		0 10px 18px rgba(80, 0, 12, 0.45),
		0 1px 0 rgba(255, 255, 255, 0.4);
}

.label__band {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(0.6rem, 1.6vh, 1rem);
	margin-top: clamp(0.75rem, 2.5vh, 1.5rem);
}

.label__rule {
	width: min(72vw, 30rem);
	height: 2px;
	background: linear-gradient(
		90deg,
		transparent,
		var(--foil-dim) 20%,
		var(--foil) 50%,
		var(--foil-dim) 80%,
		transparent
	);
}

.label__tagline {
	margin: 0;
	font-family: "Barlow Condensed", sans-serif;
	font-weight: 700;
	font-size: clamp(1.05rem, 2.8vw, 1.6rem);
	letter-spacing: 0.04em; /* impeccable-disable-line wide-tracking -- short brand tagline, not body prose */
	text-transform: uppercase; /* impeccable-disable-line all-caps-body -- two-line, seven-word tagline is the committed can-label mechanism, not body copy */
	line-height: 1.5;
	color: var(--foil);
}

.label__batch {
	position: fixed;
	right: clamp(1rem, 3vw, 2rem);
	bottom: clamp(1rem, 3vh, 2rem);
	z-index: 1;
	font-family: "Barlow Condensed", sans-serif;
	font-weight: 700;
	font-size: 0.7rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.97);
}

@media (max-width: 520px) {
	.label__batch {
		position: static;
		margin-top: 1.5rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.label__fizz::before,
	.label__fizz::after {
		animation: none;
	}
	.label__mark {
		animation: none;
	}
}