/* PP promo-banner effects (2026-05-28).
 *
 * Two reusable visual treatments for promotional surfaces:
 *
 *   1. `.pp-shimmer-sweep` — a soft light gradient that sweeps
 *      diagonally across any element it's applied to. Generic; any
 *      banner can opt in by adding the class. Used by:
 *        - .pp-loyalty-home-strip (pp-loyalty HomepageStrip)
 *      Future banners that surface in the same below-header band
 *      can opt in by including this class.
 *
 *   2. .pp-loyalty-home-strip single-line tuning — drop body font
 *      1px + letter-spacing tightening so the (already-shortened)
 *      referral copy lands on one line at ≥1024px viewports without
 *      cramping the descenders.
 *
 * Companion JS: assets/js/pp-promo-confetti.js handles a one-time
 * confetti burst over .pp-home-promo-banner-v2 (the sitewide sale
 * pill above the header).
 */

/* ────────────────────────────────────────────────────────────────
 * 1. Generic shimmer sweep
 * Effect: a diagonal highlight stripe slides across the element
 * every ~4.5s. GPU-only (transform + opacity); no layout impact.
 * The host element gets position: relative + overflow: hidden so
 * the pseudo-element can be absolutely positioned and the sweep
 * is clipped to the banner.
 * ────────────────────────────────────────────────────────────────*/

.pp-shimmer-sweep {
	position: relative;
	overflow: hidden;
	isolation: isolate; /* keep the sweep above background gradients but below text */
}

.pp-shimmer-sweep::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	/* Multi-band gradient so the sweep is visible on light AND dark
	 * host backgrounds:
	 *   - Outer bands: subtle dark tint for definition on light hosts
	 *     (e.g., #f0fdf4 pale-green referral strip — without these
	 *     the bright highlight blended into the host invisibly on
	 *     mobile pixel densities).
	 *   - Center band: bright highlight at 0.55 opacity.
	 * Plus `mix-blend-mode: overlay` so the highlight composites with
	 * the host's color channel rather than just painting white-over-
	 * near-white — visible regardless of host hue. Mobile Safari 8+
	 * supports overlay blend mode. */
	background: linear-gradient(
		115deg,
		transparent 0%,
		transparent 30%,
		rgba( 30, 60, 30, 0.06 )    42%,
		rgba( 255, 255, 255, 0.55 ) 50%,
		rgba( 30, 60, 30, 0.06 )    58%,
		transparent 70%,
		transparent 100%
	);
	mix-blend-mode: overlay;
	transform: translateX(-100%);
	animation: pp-shimmer-sweep 4.5s ease-in-out infinite;
	animation-delay: 0.8s;
}

/* Make sure direct child content sits ABOVE the sweep pseudo-element. */
.pp-shimmer-sweep > * {
	position: relative;
	z-index: 1;
}

@keyframes pp-shimmer-sweep {
	0%   { transform: translateX(-100%); }
	55%  { transform: translateX(100%); }
	100% { transform: translateX(100%); }
}

/* Accessibility: respect prefers-reduced-motion. */
@media (prefers-reduced-motion: reduce) {
	.pp-shimmer-sweep::after {
		animation: none;
		display: none;
	}
}

/* ────────────────────────────────────────────────────────────────
 * 2. Referral strip — single-line tuning
 * Drop the body font 1px below pp-loyalty's default (~15px → 14px)
 * and tighten letter-spacing so the new shortened copy + CTA fit
 * on one line at ≥1024px viewports without truncation. Hide the
 * non-breaking-space gap before the chevron arrow at narrow
 * widths so the CTA stays attached. Mobile (≤600px) keeps the
 * existing two-line wrap from pp-loyalty's own stylesheet.
 * ────────────────────────────────────────────────────────────────*/

@media (min-width: 1024px) {
	.pp-loyalty-home-strip {
		font-size: 14px !important;
		letter-spacing: -0.005em !important;
	}
	.pp-loyalty-home-strip__inner {
		flex-wrap: nowrap !important;
		white-space: nowrap;
	}
	.pp-loyalty-home-strip__msg {
		overflow: hidden;
		text-overflow: ellipsis;
	}
}