/*
 * Food Sock Hero Banner.
 * The stage is a fixed 16:9 frame (4:5 on portrait screens) that scales as one
 * piece: every size below is the artwork's pixel value times --u, one artwork
 * pixel at the current stage width (1920 wide on 16:9, 1080 wide on 4:5).
 * On landscape screens the stage is also capped to the screen height (so the
 * whole banner fits below the site header) and to the normal homepage hero's
 * height, so swapping in a banner never makes the hero taller.
 */

.fshb {
	--fshb-offset: 152px; /* site header + utility bar */
	--fshb-max-h: 700px; /* the normal hero's height on desktop */
	--fshb-h: min(100svh - var(--fshb-offset), var(--fshb-max-h));
	--fshb-orange: #DB7300;
	--fshb-cream: #F9D89E;
	--fshb-page: #FFF4DD;
	--fshb-olive-dark: #2F3F10;
	--fshb-centre: #3A2A1A;
	--fshb-mid: #1B1714;
	--fshb-edge: #0D0C0B;
	--fshb-fine: #BDB5A6;
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background: var(--fshb-edge);
	color: #fff;
	font-family: Poppins, system-ui, sans-serif;
}
.fshb--olive {
	--fshb-centre: #4F6A1F;
	--fshb-mid: #2F3F10;
	--fshb-edge: #1F2A0A;
	--fshb-fine: #D9DCC8;
}
@media (max-width: 999px) {
	.fshb { --fshb-offset: 112px; }
}
/* Zero-specificity reset, so the element rules below always win. */
.fshb :where(h1, p) {
	margin: 0;
	padding: 0;
	font-family: inherit;
	text-shadow: none;
	text-transform: none;
}

.fshb__stage {
	--u: calc(100cqw / 1920);
	position: relative;
	z-index: 0;
	container-type: inline-size;
	width: min(100%, max(640px, calc(var(--fshb-h) * 16 / 9)));
	aspect-ratio: 16 / 9;
	margin-inline: auto;
}

/* ---------- Background: glow, slow rays, stripes ---------- */

.fshb__bg {
	position: absolute;
	z-index: -1;
	left: calc(62% - 75vmax);
	top: calc(50% - 75vmax);
	width: 150vmax;
	height: 150vmax;
	pointer-events: none;
	background: radial-gradient(circle 75cqw at 50% 50%, var(--fshb-centre) 0%, var(--fshb-mid) 55%, var(--fshb-edge) 100%);
}
.fshb__rays {
	position: absolute;
	inset: 0;
	will-change: rotate; /* keeps the slow turn on the GPU, like the normal hero's rays */
	background: repeating-conic-gradient(rgba(255, 255, 255, .045) 0deg 10deg, transparent 10deg 20deg);
}

.fshb__stripes span {
	position: absolute;
	top: 0;
	height: 100%;
	transform: skewX(-14deg);
	transform-origin: 0 0;
}
.fshb__stripes span:first-child {
	left: calc(1152 * var(--u));
	width: calc(26 * var(--u));
	background: var(--fshb-orange);
}
.fshb__stripes span + span {
	left: calc(1192 * var(--u));
	width: calc(8 * var(--u));
	background: var(--fshb-cream);
	opacity: .8;
}

/* ---------- Logo card ---------- */

.fshb__logo {
	position: absolute;
	left: calc(70 * var(--u));
	top: calc(70 * var(--u));
	padding: calc(16 * var(--u)) calc(26 * var(--u));
	border-radius: calc(28 * var(--u));
	background: #fff;
	box-shadow: 0 calc(10 * var(--u)) calc(22 * var(--u)) rgba(0, 0, 0, .3);
	line-height: 0;
}
.fshb__logo img {
	display: block;
	width: auto;
	height: calc(84 * var(--u));
}

/* ---------- Words ---------- */

.fshb__head {
	position: absolute;
	left: calc(78 * var(--u));
	top: calc(270 * var(--u));
}
.fshb .fshb__title {
	font-size: calc(100 * var(--u));
	font-weight: 900;
	line-height: 1;
	letter-spacing: .02em;
	white-space: nowrap;
}
.fshb__l1 { color: #fff; }
.fshb__l2 { color: var(--fshb-orange); }
.fshb .fshb__eyebrow {
	margin-top: calc(14 * var(--u));
	font-size: calc(30 * var(--u));
	font-weight: 700;
	letter-spacing: .33em;
	color: var(--fshb-cream);
}

.fshb__offer {
	position: absolute;
	left: calc(78 * var(--u));
	top: calc(490 * var(--u));
}
.fshb .fshb__offer-text {
	font-weight: 900;
	line-height: 1.02;
}
.fshb__o1 {
	display: block;
	font-size: calc(84 * var(--u));
	color: #fff;
}
.fshb__o2 {
	display: block;
	font-size: calc(116 * var(--u));
	color: var(--fshb-orange);
	white-space: nowrap;
}
.fshb .fshb__tagline {
	margin-top: calc(20 * var(--u));
	font-size: calc(42 * var(--u));
	font-weight: 800;
	line-height: 1.2;
	color: var(--fshb-cream);
}
.fshb__btn {
	display: inline-block;
	margin-top: calc(34 * var(--u));
	padding: calc(22 * var(--u)) calc(46 * var(--u));
	border-radius: 999px;
	background: var(--fshb-orange);
	color: #fff;
	font-size: max(15px, calc(34 * var(--u)));
	font-weight: 800;
	text-decoration: none;
}
.fshb__btn:hover, .fshb__btn:focus-visible { background: #c46700; color: #fff; }

.fshb .fshb__fine {
	position: absolute;
	left: calc(80 * var(--u));
	bottom: calc(50 * var(--u));
	max-width: calc(780 * var(--u));
	font-size: max(11px, calc(22 * var(--u)));
	font-weight: 500;
	line-height: 1.5;
	color: var(--fshb-fine);
}

/* ---------- Price badge ---------- */

.fshb__badge-wrap {
	position: absolute;
	left: calc(1340 * var(--u));
	top: calc(110 * var(--u));
	transform: rotate(-6deg);
	transform-origin: 0 0;
}
.fshb .fshb__badge {
	position: relative;
	padding: calc(20 * var(--u)) calc(50 * var(--u)) calc(26 * var(--u));
	border: calc(6 * var(--u)) solid var(--fshb-cream);
	border-radius: calc(40 * var(--u));
	background: var(--fshb-orange);
	box-shadow: 0 calc(18 * var(--u)) calc(34 * var(--u)) rgba(0, 0, 0, .5);
	text-align: center;
	color: #fff;
}
.fshb__badge-top {
	display: block;
	font-size: calc(40 * var(--u));
	font-weight: 800;
	line-height: 1.1;
	color: var(--fshb-page);
}
.fshb__price {
	display: block;
	font-size: calc(150 * var(--u));
	font-weight: 900;
	line-height: .95;
}
.fshb__tag {
	position: absolute;
	right: calc(-18 * var(--u));
	bottom: calc(-34 * var(--u));
	padding: calc(10 * var(--u)) calc(28 * var(--u));
	border-radius: calc(40 * var(--u));
	background: var(--fshb-page);
	box-shadow: 0 calc(10 * var(--u)) calc(18 * var(--u)) rgba(0, 0, 0, .4);
	font-size: calc(36 * var(--u));
	font-weight: 900;
	line-height: 1.2;
	color: var(--fshb-olive-dark);
	white-space: nowrap;
}

/* ---------- Pouch fan ---------- */

.fshb__visual {
	position: absolute;
	left: calc(900 * var(--u));
	top: calc(540 * var(--u));
	width: calc(960 * var(--u));
}
.fshb__visual img {
	display: block;
	width: 100%;
	height: auto;
	filter: drop-shadow(0 calc(16 * var(--u)) calc(18 * var(--u)) rgba(0, 0, 0, .45));
}
.fshb__fan .fshb__pouch {
	position: absolute;
	max-width: none;
	rotate: var(--r);
}

/* ---------- Portrait screens: the 4:5 layout ---------- */

@media (max-aspect-ratio: 1/1) {
	.fshb__stage {
		--u: calc(100cqw / 1080);
		width: min(100%, max(320px, calc((100svh - var(--fshb-offset)) * 4 / 5)));
		aspect-ratio: 4 / 5;
	}
	.fshb__bg {
		left: calc(50% - 75vmax);
		top: calc(42% - 75vmax);
		background: radial-gradient(circle 93.75cqw at 50% 50%, var(--fshb-centre) 0%, var(--fshb-mid) 55%, var(--fshb-edge) 100%);
	}
	/* A band rising 9° to the right, carried past the stage edges on wider screens. */
	.fshb__stripes span {
		transform: skewY(-9deg);
		transform-origin: 100vw 0;
	}
	.fshb__stripes span:first-child {
		top: 50%;
		left: -100vw;
		width: calc(100% + 200vw);
		height: calc(34 * var(--u));
	}
	.fshb__stripes span + span {
		top: calc(50% + 44 * var(--u));
		left: -100vw;
		width: calc(100% + 200vw);
		height: calc(10 * var(--u));
		opacity: .85;
	}
	.fshb__logo {
		left: calc(50 * var(--u));
		top: calc(46 * var(--u));
	}
	.fshb__logo img { height: calc(86 * var(--u)); }
	.fshb__head {
		left: auto;
		right: calc(60 * var(--u));
		top: calc(60 * var(--u));
		text-align: right;
	}
	.fshb .fshb__title { font-size: calc(86 * var(--u)); }
	.fshb__l1, .fshb__l2 { display: block; }
	.fshb .fshb__eyebrow {
		margin-top: calc(12 * var(--u));
		margin-right: -.32em; /* the last letter's spacing would push it off the right edge */
		font-size: calc(28 * var(--u));
		letter-spacing: .32em;
	}
	.fshb__offer {
		left: calc(58 * var(--u));
		top: calc(325 * var(--u));
	}
	.fshb__o1 { font-size: calc(78 * var(--u)); }
	.fshb__o2 { font-size: calc(106 * var(--u)); }
	.fshb .fshb__tagline {
		margin-top: calc(16 * var(--u));
		font-size: calc(40 * var(--u));
		letter-spacing: .025em;
	}
	.fshb__badge-wrap {
		left: calc(560 * var(--u));
		top: calc(575 * var(--u));
		transform: rotate(-6deg) scale(.9);
	}
	.fshb__visual {
		left: calc(50 * var(--u));
		top: auto;
		bottom: calc(115 * var(--u));
		width: calc(980 * var(--u));
	}
	.fshb .fshb__fine {
		left: calc(30 * var(--u));
		right: calc(30 * var(--u));
		bottom: calc(30 * var(--u));
		max-width: none;
		text-align: center;
		color: #CFC6B5;
	}
}

/* ---------- Image banners ---------- */

.fshb--image .fshb__stage {
	width: min(100%, max(640px, calc(var(--fshb-h) * var(--fshb-ratio))));
	aspect-ratio: var(--fshb-ratio);
}
.fshb--image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
@media (max-aspect-ratio: 1/1) {
	.fshb--image .fshb__stage {
		width: min(100%, max(320px, calc((100svh - var(--fshb-offset)) * var(--fshb-ratio-phone, var(--fshb-ratio)))));
		aspect-ratio: var(--fshb-ratio-phone, var(--fshb-ratio));
	}
}
.fshb__sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* ---------- Motion: pop-ins, pouches drop into the fan, slow rays ---------- */

@keyframes fshb-pop {
	0% { opacity: 0; scale: .6; }
	70% { opacity: 1; scale: 1.06; }
	100% { opacity: 1; scale: 1; }
}
@keyframes fshb-drop {
	0% { opacity: 0; translate: 0 -70%; }
	55% { opacity: 1; translate: 0 3%; }
	75% { translate: 0 -1.5%; }
	100% { opacity: 1; translate: 0 0; }
}
@keyframes fshb-spin { to { rotate: 360deg; } }

.fshb--motion .fshb__pop {
	animation: fshb-pop .42s cubic-bezier(.3, 1.4, .5, 1) both;
	animation-delay: calc(.1s + var(--d, 0) * .18s);
}
.fshb--motion .fshb__pouch {
	animation: fshb-drop .6s cubic-bezier(.3, .7, .4, 1) both;
	animation-delay: calc(.6s + var(--n, 0) * .12s);
}
.fshb--motion .fshb__rays { animation: fshb-spin 140s linear infinite; } /* same pace as the normal hero */

@media (prefers-reduced-motion: reduce) {
	.fshb--motion .fshb__pop,
	.fshb--motion .fshb__pouch,
	.fshb--motion .fshb__rays { animation: none; }
}