/**
 * Paripoorn image shine effect.
 * ------------------------------------------------------------------------
 * A soft diagonal highlight that sweeps across foreground images. Applied
 * by default to content/product imagery via .pp-shine, which
 * inc/image-shine.php adds automatically.
 *
 * Consistent with the project's animation philosophy (see animations.css):
 * NO scale transforms — the sweep is a translated gradient overlay, the
 * image itself never moves or resizes.
 *
 * DELIBERATELY NOT APPLIED TO:
 *   - client/partner logos (.pp-lm__logo img)   — a sweep across a brand
 *     mark reads as a rendering artifact, not polish
 *   - avatars (.pp-tm__avatar, .pp-pr__avatar)  — small round photos
 *   - icons, payment marks, SVGs                — too small to read as
 *     an effect; it just flickers
 *   - anything inside the site header/footer    — chrome, not content
 * The exclusion list lives in inc/image-shine.php.
 */

/*
 * The overlay needs a positioned, clipped parent. Applied to a wrapper
 * rather than the <img> itself because ::before/::after don't render on
 * replaced elements like <img>.
 */
.pp-shine {
	position: relative;
	display: inline-block;
	overflow: hidden;
	/* Inherit the image's own rounding so the sweep is clipped to the
	   same silhouette rather than spilling past a rounded corner. */
	border-radius: inherit;
	/* Never let the wrapper change how the image was already laid out. */
	max-width: 100%;
	line-height: 0;
	vertical-align: top;
}

.pp-shine > img {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: inherit;
}

.pp-shine::after {
	content: "";
	position: absolute;
	top: 0;
	/* Start fully off the left edge. The band is 60% of the width and
	   skewed, so it needs room to clear the corners at both ends. */
	left: -130%;
	width: 60%;
	height: 100%;
	background: linear-gradient(
		100deg,
		rgba(255, 255, 255, 0) 0%,
		rgba(255, 255, 255, var(--pp-shine-strength, 0.42)) 50%,
		rgba(255, 255, 255, 0) 100%
	);
	transform: skewX(-18deg);
	pointer-events: none;
	/* Compositor-only properties, so the sweep can't cause layout work
	   on a page full of product cards. */
	will-change: transform;
}

/*
 * Sweep on hover by default — an idle loop across every product image at
 * once is distracting and burns battery on mobile. The auto-sweep variant
 * below is opt-in for hero/feature images.
 */
.pp-shine:hover::after,
.pp-shine:focus-within::after {
	animation: pp-shine-sweep var(--pp-shine-duration, 850ms) ease-in-out;
}

/* Opt-in: sweeps once when scrolled into view, using the theme's existing
   IntersectionObserver (.pp-in-view is toggled by assets/js/animations.js). */
.pp-shine--auto.pp-in-view::after {
	animation: pp-shine-sweep var(--pp-shine-duration, 850ms) ease-in-out 250ms;
}

/* Opt-in: continuous loop. Intended for a single hero image, not grids. */
.pp-shine--loop::after {
	animation: pp-shine-sweep var(--pp-shine-duration, 850ms) ease-in-out
		var(--pp-shine-interval, 4s) infinite;
}

@keyframes pp-shine-sweep {
	from {
		left: -130%;
	}
	to {
		left: 130%;
	}
}

/*
 * Honour the same switches as every other motion in this theme: the
 * global Theme Settings toggle and the OS reduced-motion preference.
 * A decorative sweep is exactly the kind of thing reduced-motion is for.
 */
.pp-animations-off .pp-shine::after,
.pp-reveal-off .pp-shine--auto::after {
	animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
	.pp-shine::after {
		animation: none !important;
	}
}