/*
 * Food Sock homepage (page-templates/fs-home.php). Shared pieces are in fs-components.css.
 * Building blocks from the Creative Framework, section 6: olive rays, cream
 * pattern, two-line headlines (olive then orange), round badges, pills,
 * flavour colours. Motion: pop-ins with a slight overshoot, slow rays.
 */

/* ---------- Hero ---------- */

.fs-hero {
	position: relative;
	color: var(--fs-white);
	padding: clamp(40px, 7vw, 96px) 0 clamp(48px, 8vw, 112px);
	isolation: isolate;
}
.fs-hero__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(32px, 5vw, 56px);
	align-items: center;
}
.fs-h--hero { font-size: clamp(38px, 4.9vw, 68px); margin-bottom: 18px; }
.fs-h--hero .fs-h__1, .fs-h--hero .fs-h__2 { white-space: nowrap; }
@media (max-width: 420px) { .fs-h--hero .fs-h__1, .fs-h--hero .fs-h__2 { white-space: normal; } }
.fs-h--hero .fs-h__1 { color: var(--fs-white); }
.fs-h--hero .fs-h__2 { color: var(--fs-cream); }
.fs-h--hero { text-shadow: 0 2px 18px rgba(31, 42, 10, .35); }
.fs-hero__sub { font-size: clamp(17px, 1.9vw, 21px); font-weight: 500; line-height: 1.5; max-width: 34ch; margin-bottom: 24px; }

.fs-badges { display: flex; gap: 12px; margin-bottom: 14px; }
.fs-badges img { width: clamp(68px, 7vw, 92px); filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .25)); }
.fs-hero__pill { margin-bottom: 28px; }
.fs-hero__pill img { width: clamp(220px, 24vw, 280px); }

/* Animated hero: three real pouches fanned behind a real meal bowl. */
.fs-stack {
	position: relative;
	width: min(100%, 560px);
	aspect-ratio: 1 / .92;
	margin: 0 auto;
}
.fs-stack__pouch {
	position: absolute;
	bottom: 30%;
	width: 34%;
	filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .35));
}
.fs-stack__pouch--1 { left: 4%; rotate: -12deg; }
.fs-stack__pouch--2 { left: 33%; bottom: 36%; width: 37%; z-index: 2; }
.fs-stack__pouch--3 { right: 4%; rotate: 12deg; }
.fs-stack__meal {
	position: absolute;
	left: 50%;
	bottom: -2%;
	width: 66%;
	translate: -50% 0;
	z-index: 3;
	filter: drop-shadow(0 22px 30px rgba(0, 0, 0, .45));
}
/* Rotating hero: bowl rolls out to the right and the next one rolls in from the left. */
.fs-stack__meal img { transition: translate .7s var(--fs-ease-pop), rotate .7s var(--fs-ease-pop), opacity .35s ease-out; }
.fs-stack__meal img.is-out {
	translate: 75% 4%;
	rotate: 45deg;
	opacity: 0;
	transition-duration: .55s, .55s, .45s;
	transition-timing-function: cubic-bezier(.55, 0, .75, .2);
}
.fs-stack__meal img.is-enter { translate: -75% 4%; rotate: -45deg; opacity: 0; transition: none; }
.fs-stack__pouch img { transition: scale .5s var(--fs-ease-pop), opacity .35s ease-out; }
.fs-stack__pouch img.is-swap { scale: .82; opacity: 0; transition: scale .3s ease-in, opacity .3s ease-in; }
.fs-steam { transition: opacity .3s; }
.fs-stack.is-switching .fs-steam { opacity: 0; }

/* Gentle float once they've landed */
.fs-stack__pouch.is-in img { animation: fs-float 6s ease-in-out infinite; animation-delay: calc(var(--i) * .7s); }

.fs-steam { position: absolute; left: 50%; bottom: 46%; width: 30%; height: 18%; translate: -50% 0; z-index: 4; pointer-events: none; }
.fs-steam span {
	position: absolute;
	bottom: 0;
	width: 22%;
	height: 100%;
	border-radius: 50%;
	background: radial-gradient(ellipse at center, rgba(255, 255, 255, .55), transparent 70%);
	filter: blur(6px);
	animation: fs-steam 4.5s ease-in-out infinite;
	opacity: 0;
}
.fs-steam span:nth-child(1) { left: 10%; }
.fs-steam span:nth-child(2) { left: 40%; animation-delay: 1.4s; }
.fs-steam span:nth-child(3) { left: 70%; animation-delay: 2.8s; }

@keyframes fs-float { 50% { translate: 0 -8px; } }
@keyframes fs-steam {
	0% { opacity: 0; transform: translateY(20%) scaleY(.6); }
	30% { opacity: .9; }
	100% { opacity: 0; transform: translateY(-80%) scaleY(1.2); }
}

/* Video hero: the in-store loop in a rounded screen. */
.fs-screen {
	border-radius: var(--fs-radius);
	overflow: hidden;
	background: var(--fs-olive-dark);
	box-shadow: 0 0 0 6px rgba(255, 255, 255, .9), var(--fs-shadow-lg);
	aspect-ratio: 16 / 9;
}
.fs-screen__video { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (min-width: 960px) {
	.fs-hero__inner { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
}
@media (max-width: 959px) {
	.fs-hero__copy { text-align: center; }
	.fs-hero__sub { margin-inline: auto; }
	.fs-badges, .fs-actions { justify-content: center; }
	.fs-hero__pill img { margin: 0 auto; }
}
@media (max-width: 480px) {
	.fs-actions .fs-btn { width: 100%; }
}

/* ---------- Three steps ---------- */

.fs-steps {
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	counter-reset: none;
}
.fs-step {
	background: var(--fs-white);
	border-radius: var(--fs-radius);
	box-shadow: var(--fs-shadow);
	padding: 28px 24px 30px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}
.fs-step__badge { width: 104px; margin: -64px auto 6px; filter: drop-shadow(0 8px 14px rgba(47, 63, 16, .22)); }
.fs-step h3 { font-size: 22px; font-weight: 800; color: var(--fs-olive); }
.fs-step p { font-size: 16px; line-height: 1.55; font-weight: 500; color: var(--fs-muted); }
.fs-easy .fs-steps { margin-top: 56px; }

.fs-strip {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 14px 28px;
	margin-top: 40px;
}
.fs-strip img { width: 250px; }
.fs-strip__flag { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; color: var(--fs-olive); font-size: 17px; }

/* ---------- Flavours ---------- */

.fs-flavours { background: var(--fs-page); }
.fs-flavour-grid {
	display: grid;
	gap: 22px;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
}
.fs-flavour {
	--flavour: var(--fs-orange);
	background: var(--fs-white);
	border-radius: var(--fs-radius);
	box-shadow: var(--fs-shadow);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: box-shadow .2s;
}
.fs-flavour:hover { box-shadow: var(--fs-shadow-lg); }
.fs-js .fs-flavour[data-pop].is-in {
	transition: opacity .2s ease-in-out, transform .2s ease-in-out, box-shadow .2s;
	transition-delay: calc(var(--i, 0) * .14s), calc(var(--i, 0) * .14s), 0s;
}
.fs-flavour__stage {
	position: relative;
	aspect-ratio: 1 / .82;
	background:
		radial-gradient(ellipse at 50% 40%, rgba(255, 255, 255, .28), transparent 65%),
		repeating-conic-gradient(from 0deg at 50% 45%, rgba(255, 255, 255, .13) 0 8deg, transparent 8deg 18deg),
		var(--flavour);
	overflow: hidden;
}
.fs-flavour__pouch {
	position: absolute;
	left: 9%;
	top: 8%;
	width: 42%;
	rotate: -8deg;
	filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .3));
	transition: transform .35s var(--fs-ease-pop);
}
.fs-flavour__meal {
	position: absolute;
	right: -6%;
	bottom: -10%;
	width: 66%;
	filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .35));
	transition: transform .5s var(--fs-ease-pop);
}
.fs-flavour:hover .fs-flavour__pouch { transform: translateY(-8px) rotate(-3deg); }
.fs-flavour:hover .fs-flavour__meal { transform: rotate(8deg) scale(1.03); }
.fs-flavour__body { padding: 18px 20px 22px; border-top: 6px solid var(--flavour); }
.fs-flavour h3 { font-size: 20px; font-weight: 800; color: var(--fs-olive); line-height: 1.2; }
.fs-flavour p { margin-top: 4px; font-size: 15px; font-weight: 500; color: var(--fs-muted); }

.fs-stock {
	margin: 36px auto 32px;
	max-width: 880px;
	display: flex;
	flex-wrap: wrap;
	gap: 10px 16px;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 16px 22px;
	border-radius: var(--fs-radius-sm);
	border: 2px dashed var(--fs-line);
	background: rgba(255, 255, 255, .6);
}
.fs-stock p { font-size: 15px; font-weight: 500; color: var(--fs-muted); }

/* ---------- Info clips ---------- */

.fs-watch { color: var(--fs-white); isolation: isolate; }
.fs-watch .fs-wrap { z-index: 1; }
.fs-clips {
	display: grid;
	gap: 24px;
	grid-template-columns: repeat(3, minmax(0, 260px));
	justify-content: center;
}
.fs-clip {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 9 / 16;
	padding: 0;
	border: 0;
	border-radius: 26px;
	overflow: hidden;
	cursor: pointer;
	background: var(--fs-olive-dark);
	box-shadow: 0 0 0 5px rgba(255, 255, 255, .92), var(--fs-shadow-lg);
	transition: transform .25s var(--fs-ease-pop);
}
.fs-clip:hover { transform: translateY(-6px); }
.fs-clip:focus-visible { outline: 3px solid var(--fs-orange); outline-offset: 6px; }
.fs-clip img, .fs-clip video { width: 100%; height: 100%; object-fit: cover; }
.fs-clip__play {
	position: absolute;
	left: 50%;
	bottom: 18%;
	width: 68px;
	height: 68px;
	translate: -50% 0;
	border-radius: 50%;
	background: var(--fs-orange);
	box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
}
.fs-clip__play::before {
	content: "";
	position: absolute;
	left: 54%;
	top: 50%;
	translate: -50% -50%;
	border-style: solid;
	border-width: 13px 0 13px 21px;
	border-color: transparent transparent transparent var(--fs-white);
}
.fs-clip.is-playing .fs-clip__play { display: none; }
.fs-clip__title { margin-top: 16px; text-align: center; font-weight: 800; font-size: 17px; }

@media (max-width: 760px) {
	.fs-clips {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: min(68vw, 240px);
		justify-content: start;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		padding: 8px var(--fs-gutter) 16px;
		margin: 0 calc(var(--fs-gutter) * -1);
	}
	.fs-clips > li { scroll-snap-align: center; }
}

/* ---------- Heartfelt ---------- */

.fs-heartfelt__inner { display: grid; gap: 40px; align-items: center; }
.fs-heartfelt__logo { width: 120px; margin-bottom: 16px; }
.fs-h--heartfelt { font-size: clamp(30px, 4vw, 50px); margin-bottom: 4px; }
.fs-h--heartfelt .fs-h__1 { color: var(--fs-heartfelt); }
.fs-h--heartfelt .fs-h__2 { color: var(--fs-olive); }
.fs-heartfelt .fs-lead { color: var(--fs-text); max-width: 52ch; }
.fs-heartfelt__tagline { margin: 18px 0 6px; font-size: 22px; font-weight: 800; color: var(--fs-heartfelt); }
.fs-heartfelt__cta { font-weight: 700; margin-bottom: 18px; }
.fs-heartfelt__byline { margin-top: 22px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 14px; font-weight: 500; color: var(--fs-muted); }
.fs-heartfelt__fslogo { width: 92px; background: var(--fs-white); padding: 6px 10px; border-radius: 10px; box-shadow: var(--fs-shadow); }
.fs-buckets { display: flex; justify-content: center; align-items: flex-end; gap: clamp(16px, 4vw, 40px); }
.fs-buckets li { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; max-width: 220px; }
.fs-buckets img { width: clamp(120px, 18vw, 200px); filter: drop-shadow(0 16px 22px rgba(47, 63, 16, .25)); margin-bottom: 10px; }
.fs-buckets li:last-child img { width: clamp(96px, 14vw, 160px); }
.fs-buckets strong { font-size: 18px; font-weight: 800; color: var(--fs-heartfelt); }
.fs-buckets span { font-size: 14px; font-weight: 500; color: var(--fs-muted); }

/* Phones and tablets: one centred column, like the other sections. */
@media (max-width: 899px) {
	.fs-heartfelt__copy { text-align: center; }
	.fs-heartfelt__logo { margin-inline: auto; }
	.fs-heartfelt .fs-lead { margin-inline: auto; }
	.fs-heartfelt__byline { justify-content: center; }
}
@media (min-width: 900px) {
	.fs-heartfelt__inner { grid-template-columns: 1.1fr .9fr; }
}

/* ---------- Reviews ---------- */

.fs-reviews { background: var(--fs-page); }
.fs-review-grid { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.fs-review {
	background: var(--fs-white);
	border-radius: var(--fs-radius);
	box-shadow: var(--fs-shadow);
	padding: 28px 26px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.fs-stars { color: var(--fs-orange); font-size: 20px; letter-spacing: 2px; }
.fs-review blockquote { margin: 0; padding: 0; border: 0; flex: 1; }
.fs-review blockquote p { font-size: 16px; line-height: 1.6; font-weight: 500; color: var(--fs-text); }
.fs-review__who { font-size: 14px; color: var(--fs-muted); }
.fs-review__who strong { color: var(--fs-olive); }

/* ---------- Supporters: logo strip ---------- */

.fs-sponsors { background: var(--fs-page); padding-bottom: clamp(64px, 8vw, 96px); }
.fs-marquee {
	display: flex;
	overflow: hidden;
	gap: 18px;
	padding: 10px 0 18px;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.fs-marquee__track {
	display: flex;
	gap: 18px;
	flex: none;
	animation: fs-marquee calc(var(--count, 40) * 2.6s) linear infinite;
}
.fs-marquee:hover .fs-marquee__track,
.fs-marquee:focus-within .fs-marquee__track { animation-play-state: paused; }
.fs-logo-tile {
	flex: none;
	width: 168px;
	height: 104px;
	padding: 14px 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--fs-white);
	border-radius: var(--fs-radius-sm);
	box-shadow: var(--fs-shadow);
}
.fs-logo-tile img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	filter: grayscale(1) contrast(1.05);
	opacity: .78;
	transition: filter .25s, opacity .25s;
}
.fs-logo-tile:hover img { filter: none; opacity: 1; }

@keyframes fs-marquee { to { translate: calc(-100% - 18px) 0; } }

@media (prefers-reduced-motion: reduce) {
	.fs-marquee { flex-wrap: wrap; justify-content: center; -webkit-mask-image: none; mask-image: none; padding-inline: var(--fs-gutter); }
	.fs-marquee__track { animation: none; flex-wrap: wrap; justify-content: center; }
	.fs-marquee__track[aria-hidden] { display: none; }
}

/* ---------- Small screens ---------- */

@media (max-width: 600px) {
	.fs-h { font-size: clamp(26px, 7.2vw, 34px); }
	.fs-h--hero { font-size: clamp(30px, 8.6vw, 40px); }
	.fs-flavour-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.fs-flavour__body { padding: 12px 12px 14px; border-top-width: 4px; }
	.fs-flavour h3 { font-size: 15px; }
	.fs-flavour p { font-size: 12.5px; }
	.fs-step__badge { width: 88px; margin-top: -54px; }
	.fs-easy .fs-steps { gap: 44px; }
	.fs-logo-tile { width: 128px; height: 82px; padding: 10px 14px; }
	.fs-marquee, .fs-marquee__track { gap: 12px; }
}

/* Video hero: the headline may wrap so it never runs into the screen. */
.fs-hero--video .fs-h--hero .fs-h__1,
.fs-hero--video .fs-h--hero .fs-h__2 { white-space: normal; }
@media (min-width: 960px) {
	.fs-hero--video .fs-hero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
	.fs-hero--video .fs-h--hero { font-size: clamp(36px, 4vw, 58px); }
}


/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
	.fs-js [data-pop] { opacity: 1; transform: none; }
	.fs-rays::before, .fs-stack__pouch.is-in img, .fs-steam span { animation: none; }
	.fs-steam { display: none; }
	.fs-btn, .fs-clip, .fs-flavour__pouch, .fs-flavour__meal { transition: none; }
}