/**
 * VICH — motion layer.
 *
 * Everything animates transform and opacity only, so nothing here triggers
 * layout. Reveal states are scoped to .vich-js: without scripting the content
 * is simply visible. The whole file is neutralised under
 * prefers-reduced-motion at the bottom.
 */

:root {
	/* A long, decelerating curve reads as "expensive"; the short one is for
	   hover feedback that has to feel immediate. */
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--ease-soft: cubic-bezier(0.33, 1, 0.68, 1);

	--dur-reveal: 0.85s;
	--dur-hover: 0.32s;
	--stagger: 70ms;
}

/* ==========================================================================
   1. Scroll reveal
   ========================================================================== */

.vich-js [data-reveal] {
	opacity: 0;
	transition:
		opacity var(--dur-reveal) var(--ease-out),
		transform var(--dur-reveal) var(--ease-out),
		clip-path var(--dur-reveal) var(--ease-out);
	transition-delay: var(--reveal-delay, 0ms);
	will-change: opacity, transform;
}

.vich-js [data-reveal="up"] { transform: translateY(26px); }
.vich-js [data-reveal="fade"] { transform: none; }
.vich-js [data-reveal="left"] { transform: translateX(-28px); }
.vich-js [data-reveal="right"] { transform: translateX(28px); }
.vich-js [data-reveal="scale"] { transform: scale(0.96); }

/* Editorial wipe for imagery: the picture is already there, the mask lifts. */
.vich-js [data-reveal="mask"] {
	opacity: 1;
	clip-path: inset(0 0 100% 0);
}

.vich-js [data-reveal].is-in {
	opacity: 1;
	transform: none;
	clip-path: inset(0 0 0 0);
	will-change: auto;
}

/* Children of a group come in one after another. --i is set in app.js. */
.vich-js [data-reveal-group] > * {
	opacity: 0;
	transform: translateY(22px);
	transition:
		opacity var(--dur-reveal) var(--ease-out),
		transform var(--dur-reveal) var(--ease-out);
	transition-delay: calc(var(--i, 0) * var(--stagger));
}

.vich-js [data-reveal-group].is-in > * {
	opacity: 1;
	transform: none;
}

/* Sideways travel is only safe where there is room for it. On narrow screens
   a 28px offset would be clipped by the page edge mid-animation. */
@media (max-width: 899px) {
	.vich-js [data-reveal="left"],
	.vich-js [data-reveal="right"] { transform: translateY(22px); }
}

/* Long lists and small cells feel better with a shorter step. */
.vich-js .nutrient-index[data-reveal-group] > * { transition-delay: calc(var(--i, 0) * 32ms); }
.vich-js .certs[data-reveal-group] > * { transition-delay: calc(var(--i, 0) * 55ms); }

/* ==========================================================================
   2. Hero entrance
   ========================================================================== */

@keyframes vich-rise {
	from { opacity: 0; transform: translateY(30px); }
	to { opacity: 1; transform: none; }
}

@keyframes vich-rise-soft {
	from { opacity: 0; transform: translateY(16px); }
	to { opacity: 1; transform: none; }
}

@keyframes vich-frame-in {
	from { opacity: 0; transform: scale(0.94); }
	to { opacity: 1; transform: none; }
}

@keyframes vich-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-10px); }
}

@keyframes vich-stamp-in {
	0% { opacity: 0; transform: scale(0.6) rotate(-12deg); }
	70% { transform: scale(1.06) rotate(2deg); }
	100% { opacity: 1; transform: scale(1) rotate(0); }
}

.hero__content > * {
	animation: vich-rise 1s var(--ease-out) both;
}

.hero__content > .eyebrow { animation-delay: 0.05s; }
.hero__content > .hero__title { animation-delay: 0.14s; }
.hero__content > .hero__text { animation-delay: 0.24s; }
.hero__content > .hero__actions { animation-delay: 0.34s; }
.hero__content > .hero__assurances { animation-delay: 0.44s; }

.hero__frame {
	animation: vich-frame-in 1.2s var(--ease-out) 0.2s both;
}

/* The pouch keeps breathing after it lands. */
.hero__media {
	animation: vich-float 7s ease-in-out 1.5s infinite;
}

.hero__stamp {
	animation: vich-stamp-in 0.9s var(--ease-out) 0.85s both;
}

/* The gold offset border draws itself in. */
.hero__frame::before {
	transform-origin: top left;
	animation: vich-frame-in 1.1s var(--ease-out) 0.5s both;
}

/* ==========================================================================
   3. Buttons — a colour sweep instead of a flat swap
   ========================================================================== */

.btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	--btn-sweep: var(--gold);
	--btn-fg-hover: var(--navy-900);
}

.btn::after,
.woocommerce a.button::after,
.woocommerce button.button::after,
.woocommerce input.button::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--btn-sweep);
	transform: scaleX(0);
	transform-origin: right center;
	transition: transform 0.5s var(--ease-out);
}

/* Hover-only: on touch devices a tap leaves :hover stuck, which would freeze
   the colour sweep half-drawn over the button (navy showing through the gold on
   the add-to-cart button). Gating the reveal behind a real pointer keeps mobile
   buttons on their flat base colour. */
@media (hover: hover) {
	.btn:hover::after,
	.woocommerce a.button:hover::after,
	.woocommerce button.button:hover::after,
	.woocommerce input.button:hover::after {
		transform: scaleX(1);
		transform-origin: left center;
	}
}

/* The label flips colour on a short delay so it is never dark-on-dark while
   the gold is still sweeping underneath it. */
.btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
	transition:
		background var(--dur-hover) var(--ease-soft),
		border-color var(--dur-hover) var(--ease-soft),
		transform var(--dur-hover) var(--ease-soft),
		box-shadow var(--dur-hover) var(--ease-soft),
		color 0.18s var(--ease-soft) 0.16s;
}

/* Paired with the sweep above: only flip the label colour when the sweep
   actually runs (real pointer), so touch never leaves dark text on a dark
   un-swept button. */
@media (hover: hover) {
	.btn:hover,
	.woocommerce a.button:hover,
	.woocommerce button.button:hover,
	.woocommerce input.button:hover,
	.woocommerce #respond input#submit:hover {
		color: var(--btn-fg-hover);
	}
}

.btn--gold { --btn-sweep: var(--navy); --btn-fg-hover: var(--cream); }
.btn--outline { --btn-sweep: var(--navy); --btn-fg-hover: var(--cream); }
.btn--light { --btn-sweep: var(--cream); --btn-fg-hover: var(--navy); }

/* No sweep on the text-only variant. */
.btn--ghost { overflow: visible; }
.btn--ghost::after { content: none; }

.btn .vich-icon { transition: transform var(--dur-hover) var(--ease-soft); }
.btn:hover .vich-icon { transform: translateX(3px); }
.btn--ghost:hover .vich-icon { transform: translateX(4px); }

/* Icon buttons in the header get a soft ring rather than a hard fill. */
.header-btn::before {
	content: "";
	position: absolute;
	inset: 4px;
	border-radius: 50%;
	background: rgba(27, 48, 80, 0.07);
	transform: scale(0.4);
	opacity: 0;
	transition: transform var(--dur-hover) var(--ease-out), opacity var(--dur-hover) var(--ease-out);
}

.header-btn:hover::before { transform: scale(1); opacity: 1; }
.header-btn:hover { background: none; }
.header-btn .vich-icon { position: relative; transition: transform var(--dur-hover) var(--ease-soft); }
.header-btn:hover .vich-icon { transform: translateY(-1px); }

/* Cart count reacts when a fragment updates. */
@keyframes vich-pop {
	0% { transform: scale(1); }
	40% { transform: scale(1.35); }
	100% { transform: scale(1); }
}

.header-btn__count.is-bumped { animation: vich-pop 0.45s var(--ease-soft); }

/* ==========================================================================
   4. Cards and cells
   ========================================================================== */

ul.products li.product,
.post-card,
.testimonial {
	transition: transform var(--dur-hover) var(--ease-out);
}

ul.products li.product:hover,
.post-card:hover {
	transform: translateY(-4px);
}

.product-card__media,
.post-card__media {
	transition: box-shadow 0.45s var(--ease-out), border-color var(--dur-hover) var(--ease-out);
}

ul.products li.product:hover .product-card__media {
	box-shadow: 0 22px 44px -26px rgba(13, 26, 43, 0.42);
	border-color: var(--gold-200);
}

.post-card:hover .post-card__media {
	box-shadow: 0 22px 44px -26px rgba(13, 26, 43, 0.4);
}

/* Badges slide in with the card. */
.product-card__badges > * {
	transition: transform var(--dur-hover) var(--ease-out);
}

ul.products li.product:hover .product-card__badges > * {
	transform: translateX(3px);
}

/* Nutrient rows: the number brightens and the row edges in slightly. */
.nutrient {
	transition: background var(--dur-hover) var(--ease-out), padding-left var(--dur-hover) var(--ease-out);
}

.nutrient__no {
	transition: color var(--dur-hover) var(--ease-out);
}

.nutrient:hover { padding-left: 0.65rem; }
.nutrient:hover .nutrient__no { color: var(--gold-600); }

.pillar__icon {
	transition: transform 0.5s var(--ease-out), border-color var(--dur-hover) var(--ease-out),
		background var(--dur-hover) var(--ease-out);
}

.pillar:hover .pillar__icon {
	transform: translateY(-3px);
	background: var(--gold);
	border-color: var(--gold);
	color: var(--navy-900);
}

.cert {
	transition: background var(--dur-hover) var(--ease-out);
}

.cert:hover { background: var(--white); }
.cert__label { transition: transform var(--dur-hover) var(--ease-out); }
.cert:hover .cert__label { transform: translateY(-2px); }

.moment__icon { transition: transform 0.5s var(--ease-out); }
.moment:hover .moment__icon { transform: translateY(-3px) scale(1.06); }

/* Serving steps: the ring turns gold as you hover the step. */
.step__ring {
	transition: transform 0.5s var(--ease-out), border-color var(--dur-hover) var(--ease-out);
}

.step:hover .step__ring {
	transform: translateY(-4px);
	border-color: var(--gold-600);
}

/* ==========================================================================
   5. Section furniture
   ========================================================================== */

/* The hairlines either side of the sparkle draw outwards. Scoped to .vich-js
   so they are simply drawn when scripting is unavailable. */
.vich-js .rule-sparkle__line {
	transform: scaleX(0);
	transition: transform 1s var(--ease-out) 0.15s;
}

.vich-js .rule-sparkle__line:first-child { transform-origin: right center; }
.vich-js .rule-sparkle__line:last-child { transform-origin: left center; }

.vich-js .is-in .rule-sparkle__line { transform: scaleX(1); }

.rule-sparkle .vich-icon {
	animation: vich-twinkle 4.5s ease-in-out infinite;
}

@keyframes vich-twinkle {
	0%, 100% { opacity: 1; transform: scale(1) rotate(0); }
	50% { opacity: 0.55; transform: scale(0.85) rotate(45deg); }
}

/* FAQ answers fade as they expand. */
.faq__a > div {
	opacity: 0;
	transition: opacity 0.45s var(--ease-out);
}

.faq__item.is-open .faq__a > div { opacity: 1; transition-delay: 0.12s; }

.faq__q { transition: color var(--dur-hover) var(--ease-out), padding-left var(--dur-hover) var(--ease-out); }
.faq__q:hover { padding-left: 6px; }

/* Menu underline already animates; add the same idea to footer links. */
.footer-col a,
.footer-legal a {
	transition: color var(--dur-hover) var(--ease-out), padding-left var(--dur-hover) var(--ease-soft);
}

/* ==========================================================================
   6. Drawers and panels
   ========================================================================== */

.drawer--nav.is-open .nav-mobile .menu__item,
.drawer--cart.is-open .mini-cart__item {
	animation: vich-rise-soft 0.5s var(--ease-out) both;
}

.drawer.is-open .menu__item:nth-child(1),
.drawer.is-open .mini-cart__item:nth-child(1) { animation-delay: 0.08s; }
.drawer.is-open .menu__item:nth-child(2),
.drawer.is-open .mini-cart__item:nth-child(2) { animation-delay: 0.13s; }
.drawer.is-open .menu__item:nth-child(3),
.drawer.is-open .mini-cart__item:nth-child(3) { animation-delay: 0.18s; }
.drawer.is-open .menu__item:nth-child(4) { animation-delay: 0.23s; }
.drawer.is-open .menu__item:nth-child(5) { animation-delay: 0.28s; }
.drawer.is-open .menu__item:nth-child(6) { animation-delay: 0.33s; }

.search-panel.is-open .search-panel__form {
	animation: vich-rise-soft 0.6s var(--ease-out) 0.12s both;
}

/* ==========================================================================
   7. Product page
   ========================================================================== */

.product-gallery__thumb {
	transition: border-color var(--dur-hover) var(--ease-out), transform var(--dur-hover) var(--ease-out);
}

.product-gallery__thumb:hover { transform: translateY(-2px); }

.product-highlights li {
	transition: background var(--dur-hover) var(--ease-out), transform var(--dur-hover) var(--ease-out);
}

.product-highlights li:hover {
	background: var(--gold-100);
	transform: translateY(-2px);
}

.quantity__btn { transition: background var(--dur-hover) var(--ease-out), color var(--dur-hover) var(--ease-out); }

/* Toasts arrive from the side rather than straight up. */
.toast {
	transform: translateX(16px) translateY(6px);
}

.toast.is-visible { transform: none; }

/* ==========================================================================
   8. Reduced motion — switch the whole layer off
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.vich-js [data-reveal],
	.vich-js [data-reveal-group] > * {
		opacity: 1 !important;
		transform: none !important;
		clip-path: none !important;
		transition: none !important;
	}

	.hero__content > *,
	.hero__frame,
	.hero__frame::before,
	.hero__media,
	.hero__stamp,
	.rule-sparkle .vich-icon,
	.drawer.is-open .menu__item,
	.drawer.is-open .mini-cart__item,
	.search-panel.is-open .search-panel__form,
	.header-btn__count.is-bumped {
		animation: none !important;
	}

	.vich-js .rule-sparkle__line { transform: scaleX(1) !important; transition: none !important; }

	.btn::after,
	.woocommerce a.button::after,
	.woocommerce button.button::after,
	.woocommerce input.button::after { transition: none !important; }

	.faq__a > div { opacity: 1 !important; }
}