/* ============================================================
   Hero image slider — Akshaya Home Foods
   Full-viewport photography, fixed copy, airborne powder.
   ============================================================ */

.hs {
	--hs-interval: 6s;
	--hs-ease: cubic-bezier(.77, 0, .18, 1);
	--hs-cream: 250, 239, 222;
	--hs-chili: #a4151c;

	position: relative;
	height: 100vh;
	height: 100svh;
	min-height: 560px;
	overflow: hidden;
	isolation: isolate;
	background: #f3e3cc;
	touch-action: pan-y;
}

/* ---------- slides ---------- */

.hs-slides {
	position: absolute;
	inset: 0;
	z-index: 0;
	/* Drag feedback: the photograph leans toward the pointer and grows a
	   touch so the lean never exposes an edge. The lean is capped as a
	   percentage (2.5%) inside the scale's spare margin (3% per side), so it
	   stays covered on narrow screens too; scaling from the top keeps the
	   photo's top edge pinned where the mobile fade expects it. */
	transform: translateX(clamp(-2.5%, var(--hs-drag, 0px), 2.5%)) scale(var(--hs-drag-scale, 1));
	transform-origin: 50% 0;
	transition: transform .5s cubic-bezier(.22, 1, .36, 1);
}

.hs {
	cursor: grab;
}

.hs.is-dragging {
	cursor: grabbing;
	user-select: none;
	--hs-drag-scale: 1.06;
}

.hs.is-dragging .hs-slides {
	transition: transform .12s linear;
}

.hs-slide img {
	-webkit-user-drag: none;
}

.hs-slide {
	position: absolute;
	inset: 0;
	visibility: hidden;
	overflow: hidden;
}

.hs-slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* the food sits right of centre in every photograph */
	object-position: 70% 50%;
	transform-origin: 70% 55%;
}

.hs-slide.is-active {
	visibility: visible;
	z-index: 2;
	animation: hsWipeNext 1.1s var(--hs-ease) both;
}

.hs-slide.is-active[data-dir="prev"] {
	animation-name: hsWipePrev;
}

/* Slow push-in for the life of the slide. The leaving slide declares the
   very same animation, so when a slide hands over it keeps zooming from
   wherever it was — switching to a different animation restarted it at
   100% and read as the photo shrinking before the wipe. */
.hs-slide.is-active img,
.hs-slide.is-leaving img {
	animation: hsPushIn calc(var(--hs-interval) + 1.5s) cubic-bezier(.25, .1, .25, 1) both;
}

.hs-slide.is-leaving {
	visibility: visible;
	z-index: 1;
	animation: hsDim 1.1s var(--hs-ease) both;
}

/* first paint: no wipe, the opening image is simply there */
.hs-slide.is-active.is-initial {
	animation: none;
}

/* a band of warm light rides the leading edge of the wipe */
.hs-slide.is-active:not(.is-initial)::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(90deg, rgba(var(--hs-cream), .75) 0, rgba(var(--hs-cream), 0) 12vw);
	animation: hsSheenNext 1.1s var(--hs-ease) both;
}

.hs-slide.is-active[data-dir="prev"]:not(.is-initial)::after {
	background: linear-gradient(270deg, rgba(var(--hs-cream), .75) 0, rgba(var(--hs-cream), 0) 12vw);
	animation-name: hsSheenPrev;
}

@keyframes hsWipeNext {
	from { clip-path: inset(0 0 0 100%); }
	to { clip-path: inset(0 0 0 0); }
}

@keyframes hsWipePrev {
	from { clip-path: inset(0 100% 0 0); }
	to { clip-path: inset(0 0 0 0); }
}

@keyframes hsPushIn {
	from { transform: scale(1.06); }
	to { transform: scale(1); }
}

@keyframes hsDim {
	from { filter: brightness(1); }
	to { filter: brightness(.9); }
}

@keyframes hsSheenNext {
	0% { transform: translateX(100%); opacity: 1; }
	80% { opacity: 1; }
	100% { transform: translateX(0); opacity: 0; }
}

@keyframes hsSheenPrev {
	0% { transform: translateX(-100%); opacity: 1; }
	80% { opacity: 1; }
	100% { transform: translateX(0); opacity: 0; }
}

/* ---------- legibility wash behind the copy ---------- */

.hs-scrim {
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
	/* top layer: a faint fade under the transparent navbar so the links stay
	   legible when a floating sweet drifts behind them */
	background:
		linear-gradient(180deg, rgba(var(--hs-cream), .6) 0, rgba(var(--hs-cream), 0) 190px),
		linear-gradient(90deg,
			rgba(var(--hs-cream), .9) 0%,
			rgba(var(--hs-cream), .72) 26%,
			rgba(var(--hs-cream), .2) 46%,
			rgba(var(--hs-cream), 0) 60%);
}

/* ---------- powder particles ---------- */

.hs-particles {
	position: absolute;
	inset: 0;
	z-index: 4;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

/* ---------- copy ---------- */

.hs-content {
	position: relative;
	z-index: 5;
	height: 100%;
	display: flex;
	align-items: center;
	/* the navbar overlays the top of the hero; centre the copy in the space
	   below it, clear of the controls docked at the bottom */
	padding-top: var(--nav-h, 75px);
	padding-bottom: 64px;
}

.hs-copy {
	max-width: 560px;
}

.hs-eyebrow {
	font-family: var(--font-script);
	font-size: 1.8rem;
	font-weight: 600;
	color: var(--hs-chili);
	margin-bottom: 6px;
}

.hs-title {
	font-family: var(--font-display);
	font-size: clamp(2.6rem, 4.8vw, 4.5rem);
	line-height: 1.03;
	letter-spacing: -0.02em;
	color: var(--ink);
	margin: 0 0 22px;
}

.hs-desc {
	font-size: 1.08rem;
	line-height: 1.8;
	color: #5a4634;
	max-width: 470px;
	margin: 0 0 32px;
}

.hs-cta {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-bottom: 50px;
}

.hs-stats {
	display: flex;
	flex-wrap: wrap;
}

.hs-stat {
	padding-right: 28px;
	margin-right: 28px;
	border-right: 1px solid rgba(120, 82, 40, .24);
}

.hs-stat:last-child {
	padding-right: 0;
	margin-right: 0;
	border-right: 0;
}

.hs-stat-num {
	display: flex;
	align-items: baseline;
	gap: 2px;
	font-family: var(--font-display);
	font-size: 2.1rem;
	font-weight: 800;
	line-height: 1;
	color: var(--ink);
}

.hs-stat-num small {
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--hs-chili);
}

.hs-stat-label {
	margin-top: 6px;
	font-size: .85rem;
	font-weight: 600;
	color: #5a4634;
}

/* ---------- controls ---------- */

/* Quiet by design: a light glass pill that recedes into the photograph
   rather than competing with it. */
.hs-controls {
	position: absolute;
	right: max(24px, calc((100vw - 1320px) / 2 + 12px));
	bottom: 30px;
	z-index: 6;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 4px 5px 4px 12px;
	border-radius: 100px;
	background: rgba(255, 251, 244, .28);
	border: 1px solid rgba(255, 255, 255, .35);
	box-shadow: 0 10px 24px -16px rgba(70, 42, 16, .3);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	cursor: default;
}

.hs-bars {
	display: flex;
	gap: 4px;
}

.hs-bar {
	position: relative;
	width: 20px;
	height: 18px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

/* visible track is thin; the button itself stays a usable target */
.hs-bar::before,
.hs-bar-fill {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: 2px;
	margin-top: -1px;
	border-radius: 2px;
}

.hs-bar::before {
	background: rgba(60, 38, 18, .16);
	transition: background .25s ease;
}

.hs-bar:hover::before {
	background: rgba(60, 38, 18, .34);
}

.hs-bar-fill {
	display: block;
	background: rgba(164, 21, 28, .7);
	transform: scaleX(0);
	transform-origin: left center;
}

.hs-bar.is-done .hs-bar-fill {
	transform: scaleX(1);
}

.hs-bar.is-current .hs-bar-fill {
	animation: hsProgress var(--hs-interval) linear forwards;
}

.hs.is-paused .hs-bar.is-current .hs-bar-fill {
	animation-play-state: paused;
}

@keyframes hsProgress {
	from { transform: scaleX(0); }
	to { transform: scaleX(1); }
}

.hs-btns {
	display: flex;
	gap: 3px;
}

.hs-btn {
	width: 30px;
	height: 30px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	border: 0;
	background: rgba(255, 255, 255, .38);
	color: rgba(36, 22, 8, .78);
	font-size: .78rem;
	cursor: pointer;
	transition: background .25s ease, color .25s ease, transform .3s cubic-bezier(.22, 1, .36, 1);
}

.hs-btn:hover {
	background: rgba(255, 255, 255, .85);
	color: var(--hs-chili);
	transform: scale(1.06);
}

.hs-btn:active {
	transform: scale(.95);
}

.hs-btn:focus-visible,
.hs-bar:focus-visible {
	outline: 2px solid var(--hs-chili);
	outline-offset: 2px;
}

.hs-btn .bi-play-fill,
.hs-btn.is-play .bi-pause-fill {
	display: none;
}

.hs-btn.is-play .bi-play-fill {
	display: inline;
}

/* ---------- scroll hint ---------- */

.hs-scroll {
	position: absolute;
	left: 50%;
	bottom: 30px;
	z-index: 6;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	transform: translateX(-50%);
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .04em;
	color: #5a4634;
	text-decoration: none;
}

.hs-scroll:hover {
	color: var(--hs-chili);
}

.hs-scroll-mouse {
	position: relative;
	width: 20px;
	height: 31px;
	border: 1.6px solid currentColor;
	border-radius: 12px;
	opacity: .75;
}

.hs-scroll-mouse::after {
	content: "";
	position: absolute;
	top: 6px;
	left: 50%;
	width: 3px;
	height: 6px;
	margin-left: -1.5px;
	border-radius: 2px;
	background: var(--hs-chili);
	animation: hsScrollDot 1.8s ease-in-out infinite;
}

@keyframes hsScrollDot {
	0%, 100% { transform: translateY(0); opacity: 1; }
	60% { transform: translateY(9px); opacity: 0; }
}

/* ---------- tablet ---------- */

@media (max-width: 1199px) {
	.hs-scrim {
		background:
			linear-gradient(180deg, rgba(var(--hs-cream), .6) 0, rgba(var(--hs-cream), 0) 190px),
			linear-gradient(90deg,
				rgba(var(--hs-cream), .93) 0%,
				rgba(var(--hs-cream), .8) 36%,
				rgba(var(--hs-cream), .25) 58%,
				rgba(var(--hs-cream), 0) 72%);
	}

	.hs-slide img {
		object-position: 76% 50%;
	}

	.hs-scroll {
		display: none;
	}
}

/* ---------- mobile: copy on top, food below ---------- */

@media (max-width: 767px) {
	.hs {
		min-height: 680px;
		background: rgb(var(--hs-cream));
	}

	/* A landscape photograph can't share a portrait screen with the copy
	   without being washed out, so it gets its own band beneath it. */
	/* starts below the copy, which now begins under the overlaid navbar */
	.hs-slides {
		top: max(62%, 490px);
	}

	.hs-slide img {
		object-position: 70% 60%;
		transform-origin: 70% 60%;
	}

	/* The soft hand-off from the cream copy into the photograph lives on the
	   slides container itself, so it travels with the photo while dragging
	   instead of leaving the photo's hard top edge exposed. */
	.hs-scrim {
		display: none;
	}

	.hs-slides::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		height: 36%;
		z-index: 3;
		pointer-events: none;
		background: linear-gradient(180deg,
				rgb(var(--hs-cream)) 0%,
				rgba(var(--hs-cream), .55) 40%,
				rgba(var(--hs-cream), 0) 100%);
	}

	/* the light sweep reads as a stray overlay on a short photo strip */
	.hs-slide.is-active:not(.is-initial)::after {
		display: none;
	}

	.hs-content {
		align-items: flex-start;
		padding-top: calc(var(--nav-h, 75px) + 20px);
		padding-bottom: 0;
		text-align: center;
	}

	.hs-title {
		font-size: clamp(2.1rem, 9vw, 2.7rem);
		margin-bottom: 14px;
	}

	.hs-copy {
		margin: 0 auto;
	}

	.hs-eyebrow {
		font-size: 1.5rem;
	}

	.hs-desc {
		font-size: .95rem;
		line-height: 1.6;
		margin: 0 auto 18px;
	}

	.hs-cta {
		justify-content: center;
		gap: 12px;
		margin-bottom: 20px;
	}

	.hs-stats {
		justify-content: center;
	}

	.hs-stat {
		padding-right: 16px;
		margin-right: 16px;
	}

	.hs-stat-num {
		font-size: 1.6rem;
	}

	.hs-stat-label {
		font-size: .74rem;
	}

	.hs-controls {
		right: 50%;
		bottom: 14px;
		transform: translateX(50%);
		gap: 6px;
		padding: 3px 3px 3px 9px;
	}

	.hs-bars {
		gap: 3px;
	}

	.hs-bar {
		width: 13px;
		height: 16px;
	}

	.hs-btns {
		gap: 2px;
	}

	.hs-btn {
		width: 24px;
		height: 24px;
		font-size: .62rem;
	}
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {

	.hs-slide.is-active,
	.hs-slide.is-active img,
	.hs-slide.is-leaving img,
	.hs-slide.is-active::after,
	.hs-scroll-mouse::after {
		animation: none !important;
	}
}