/**
 * Shop / category archive hero — CSF scroll & motion presets.
 *
 * @package ProWPCommerce
 */

/* ── Shared effect root ─────────────────────────────────────────── */

.prowp-shop-hero--effects-on {
	--prowp-archive-hero-parallax-y: 0px;
	--prowp-archive-hero-scale: 1;
	--prowp-archive-hero-fade: 1;
	--prowp-archive-hero-transform-origin: center center;
	--prowp-archive-hero-auto-zoom-max: 1.12;
	contain: layout style;
}

/* Lighter scrim when motion is active so the photo stays visible. */
.prowp-shop-hero--effects-on.prowp-shop-hero--has-image.prowp-shop-hero--has-lcp-img .prowp-shop-hero__overlay {
	background: linear-gradient(
		105deg,
		color-mix(in oklch, var(--prowp-hero-scrim) 68%, transparent) 0%,
		color-mix(in oklch, var(--prowp-hero-scrim) 46%, transparent) 42%,
		color-mix(in oklch, var(--prowp-hero-scrim) 56%, transparent) 100%
	);
}

/* Inner media frame clips parallax headroom — hero panel / overlay stay intact. */
.prowp-shop-hero--effects-on .prowp-shop-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
	isolation: isolate;
}

/* Scroll-linked transforms (not CSS-loop presets). */
.prowp-shop-hero--effects-on:not(.prowp-shop-hero--effect-ken-burns):not(.prowp-shop-hero--effect-auto-zoom) .prowp-shop-hero__lcp {
	transform: translate3d(0, var(--prowp-archive-hero-parallax-y, 0px), 0)
		scale(var(--prowp-archive-hero-scale, 1));
	transform-origin: var(--prowp-archive-hero-transform-origin, center center);
	will-change: transform;
	backface-visibility: hidden;
}

.prowp-shop-hero--effects-on.prowp-shop-hero--effect-fixed-bg:not(.prowp-shop-hero--has-lcp-img) {
	background-attachment: fixed;
	background-size: var(--prowp-hero-fit, cover);
	background-position: var(--prowp-hero-position, center);
}

/* Focal-aware headroom: anchor extra height toward the safe edge so faces stay in frame. */
.prowp-shop-hero--effects-on.prowp-shop-hero--effect-fixed-bg.prowp-shop-hero--has-lcp-img .prowp-shop-hero__lcp,
.prowp-shop-hero--effects-on.prowp-shop-hero--effect-scroll-parallax .prowp-shop-hero__lcp,
.prowp-shop-hero--effects-on.prowp-shop-hero--effect-zoom-on-scroll .prowp-shop-hero__lcp {
	inline-size: 100%;
	inset-inline: 0;
	block-size: 118%;
}

.prowp-shop-hero--effects-on.prowp-shop-hero--effect-fixed-bg.prowp-shop-hero--has-lcp-img.prowp-shop-hero--pos-top .prowp-shop-hero__lcp,
.prowp-shop-hero--effects-on.prowp-shop-hero--effect-scroll-parallax.prowp-shop-hero--pos-top .prowp-shop-hero__lcp,
.prowp-shop-hero--effects-on.prowp-shop-hero--effect-zoom-on-scroll.prowp-shop-hero--pos-top .prowp-shop-hero__lcp {
	inset-block-start: 0;
	inset-block-end: auto;
}

.prowp-shop-hero--effects-on.prowp-shop-hero--effect-fixed-bg.prowp-shop-hero--has-lcp-img.prowp-shop-hero--pos-center .prowp-shop-hero__lcp,
.prowp-shop-hero--effects-on.prowp-shop-hero--effect-scroll-parallax.prowp-shop-hero--pos-center .prowp-shop-hero__lcp,
.prowp-shop-hero--effects-on.prowp-shop-hero--effect-zoom-on-scroll.prowp-shop-hero--pos-center .prowp-shop-hero__lcp {
	inset-block-start: -9%;
	inset-block-end: auto;
}

.prowp-shop-hero--effects-on.prowp-shop-hero--effect-fixed-bg.prowp-shop-hero--has-lcp-img.prowp-shop-hero--pos-bottom .prowp-shop-hero__lcp,
.prowp-shop-hero--effects-on.prowp-shop-hero--effect-scroll-parallax.prowp-shop-hero--pos-bottom .prowp-shop-hero__lcp,
.prowp-shop-hero--effects-on.prowp-shop-hero--effect-zoom-on-scroll.prowp-shop-hero--pos-bottom .prowp-shop-hero__lcp {
	inset-block-start: auto;
	inset-block-end: 0;
}

.prowp-shop-hero--effects-on.prowp-shop-hero--effect-fixed-bg.is-fixed-sim .prowp-shop-hero__lcp {
	will-change: transform;
}

/* Scroll parallax + zoom share the media transform stack (above). */

.prowp-shop-hero--effects-on.prowp-shop-hero--effect-fade-on-scroll .prowp-shop-hero__overlay {
	opacity: calc(0.24 + (1 - var(--prowp-archive-hero-fade, 1)) * 0.58);
	transition: opacity 0.05s linear;
}

.prowp-shop-hero--effects-on.prowp-shop-hero--effect-fade-on-scroll .prowp-shop-hero__inner {
	opacity: var(--prowp-archive-hero-fade, 1);
	transform: translate3d(0, calc((1 - var(--prowp-archive-hero-fade, 1)) * 24px), 0);
	will-change: opacity, transform;
}

/* Ken Burns — slow drift zoom (CSS-only). */
.prowp-shop-hero--effects-on.prowp-shop-hero--effect-ken-burns .prowp-shop-hero__lcp {
	animation: prowp-archive-hero-ken-burns 18s ease-in-out infinite alternate;
	transform-origin: var(--prowp-archive-hero-transform-origin, center center);
	will-change: transform;
}

.prowp-shop-hero--effects-on.prowp-shop-hero--effect-ken-burns:not(.prowp-shop-hero--has-lcp-img).prowp-shop-hero--has-image {
	animation: prowp-archive-hero-ken-burns-bg 18s ease-in-out infinite alternate;
}

@keyframes prowp-archive-hero-ken-burns {
	from {
		transform: scale(1);
	}
	to {
		transform: scale(var(--prowp-archive-hero-zoom-max, 1.12));
	}
}

@keyframes prowp-archive-hero-ken-burns-bg {
	from {
		background-size: 100%;
	}
	to {
		background-size: calc(var(--prowp-archive-hero-zoom-max, 1.12) * 100%);
	}
}

/* Auto zoom — breathing loop in ↔ out (CSS-only). */
.prowp-shop-hero--effects-on.prowp-shop-hero--effect-auto-zoom .prowp-shop-hero__lcp {
	animation: prowp-archive-hero-auto-zoom 14s ease-in-out infinite alternate;
	transform-origin: var(--prowp-archive-hero-transform-origin, center center);
	will-change: transform;
}

.prowp-shop-hero--effects-on.prowp-shop-hero--effect-auto-zoom:not(.prowp-shop-hero--has-lcp-img).prowp-shop-hero--has-image {
	animation: prowp-archive-hero-auto-zoom-bg 14s ease-in-out infinite alternate;
}

@keyframes prowp-archive-hero-auto-zoom {
	from {
		transform: scale(1);
	}
	to {
		transform: scale(var(--prowp-archive-hero-auto-zoom-max, 1.12));
	}
}

@keyframes prowp-archive-hero-auto-zoom-bg {
	from {
		background-size: 100%;
	}
	to {
		background-size: calc(var(--prowp-archive-hero-auto-zoom-max, 1.12) * 100%);
	}
}

/* iOS: background-attachment:fixed is unreliable — JS adds .is-fixed-sim. */
@supports (-webkit-touch-callout: none) {
	.prowp-shop-hero--effects-on.prowp-shop-hero--effect-fixed-bg:not(.prowp-shop-hero--has-lcp-img) {
		background-attachment: scroll;
	}
}

@media (max-width: 767px) {
	.prowp-shop-hero--effects-on.prowp-shop-hero--effect-fixed-bg:not(.prowp-shop-hero--has-lcp-img) {
		background-attachment: scroll;
	}
}

@media (prefers-reduced-motion: reduce) {
	.prowp-shop-hero--effects-on .prowp-shop-hero__lcp,
	.prowp-shop-hero--effects-on.prowp-shop-hero--effect-ken-burns .prowp-shop-hero__lcp,
	.prowp-shop-hero--effects-on.prowp-shop-hero--effect-auto-zoom .prowp-shop-hero__lcp,
	.prowp-shop-hero--effects-on.prowp-shop-hero--effect-ken-burns:not(.prowp-shop-hero--has-lcp-img),
	.prowp-shop-hero--effects-on.prowp-shop-hero--effect-auto-zoom:not(.prowp-shop-hero--has-lcp-img) {
		animation: none !important;
		transform: none !important;
		will-change: auto;
	}

	.prowp-shop-hero--effects-on.prowp-shop-hero--effect-fixed-bg:not(.prowp-shop-hero--has-lcp-img) {
		background-attachment: scroll !important;
	}

	.prowp-shop-hero--effects-on.prowp-shop-hero--effect-fade-on-scroll .prowp-shop-hero__overlay,
	.prowp-shop-hero--effects-on.prowp-shop-hero--effect-fade-on-scroll .prowp-shop-hero__inner {
		opacity: 1 !important;
		transform: none !important;
	}
}