/**
 * SHFTX Price Reveal — animation styles (gift-box explosion).
 *
 * The theme's own .price element hosts the animation while it plays, then its
 * original markup is restored. A red gift box + MRP shake with a rising glow,
 * the box bursts (flash + a small, one-shot particle burst), and the number
 * drops to the sale price, before cross-fading into the theme price with a
 * one-time green shine. Only transform/opacity animate; the burst elements are
 * created at the moment of explosion and removed immediately after. No looping
 * or persistent animations.
 */
.shftx-pr-host {
	position: relative;
}

.shftx-pr {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	gap: 10px;
	white-space: nowrap;
	line-height: 1.1;
	--shftx-pr-sale: #e02424;
	--shftx-pr-was: #9ca3af;
	--shftx-pr-box: #e02424;
}

/* The shaking unit: gift box + MRP. */
.shftx-pr__unit {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	transform: translateZ(0);
}

.shftx-pr__box {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--shftx-pr-box);
	flex: 0 0 auto;
}
.shftx-pr__boxicon {
	display: block;
	width: 0.92em;
	height: 0.92em;
}

/* Explosion effects anchor (centre of the box). */
.shftx-pr__fx {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 0;
	height: 0;
	pointer-events: none;
}
.shftx-pr__flash {
	position: absolute;
	left: 0;
	top: 0;
	width: 2.6em;
	height: 2.6em;
	margin: -1.3em 0 0 -1.3em;
	border-radius: 50%;
	background: radial-gradient( circle, rgba(255, 255, 255, 0.95) 0%, rgba(255, 224, 130, 0.7) 35%, rgba(224, 36, 36, 0) 70% );
	transform: scale(0.2);
	opacity: 0;
}
.shftx-pr__p {
	position: absolute;
	left: 0;
	top: 0;
	width: 7px;
	height: 7px;
	border-radius: 2px;
	transform: translate(0, 0) scale(0.4);
	opacity: 0;
}

/* The price number. Starts as a strong "current price", turns into the sale. */
.shftx-pr__amt {
	display: inline-block;
	font-weight: 800;
	color: #1f2937;
}
.shftx-pr__amt.is-sale {
	color: var(--shftx-pr-sale);
}
.shftx-pr__amt.is-landed {
	animation: shftx-pr-bounce 0.45s cubic-bezier(0.2, 1.3, 0.4, 1);
}

/* Discount badge. */
.shftx-pr__badge {
	display: inline-block;
	background: var(--shftx-pr-sale);
	color: #fff;
	font-weight: 700;
	font-size: 0.6em;
	line-height: 1.25;
	padding: 3px 8px;
	border-radius: 6px;
	white-space: nowrap;
	opacity: 0;
	transform: scale(0.5);
}

/* ---- Keyframes ---- */

/* Shake with escalating amplitude (one run; duration set inline by JS). */
@keyframes shftx-pr-shake {
	0%   { transform: translate3d(0, 0, 0) rotate(0deg); }
	10%  { transform: translate3d(-1px, 0, 0) rotate(-0.6deg); }
	20%  { transform: translate3d(1.5px, -1px, 0) rotate(0.8deg); }
	30%  { transform: translate3d(-2px, 1px, 0) rotate(-1.2deg); }
	40%  { transform: translate3d(2.5px, -1px, 0) rotate(1.6deg); }
	50%  { transform: translate3d(-3px, 1px, 0) rotate(-2deg); }
	60%  { transform: translate3d(3.5px, -2px, 0) rotate(2.4deg); }
	70%  { transform: translate3d(-4px, 2px, 0) rotate(-3deg); }
	80%  { transform: translate3d(4.5px, -2px, 0) rotate(3.4deg); }
	90%  { transform: translate3d(-5px, 2px, 0) rotate(-4deg); }
	100% { transform: translate3d(5px, -2px, 0) rotate(4deg); }
}

/* Rising red glow + slight swell on the box while it "charges". */
@keyframes shftx-pr-charge {
	0%   { filter: drop-shadow(0 0 0 rgba(224, 36, 36, 0)); transform: scale(1); }
	100% { filter: drop-shadow(0 0 9px rgba(224, 36, 36, 0.9)); transform: scale(1.08); }
}

/* Box pop on explosion. */
@keyframes shftx-pr-pop {
	0%   { transform: scale(1); opacity: 1; }
	45%  { transform: scale(1.55); opacity: 1; }
	100% { transform: scale(2); opacity: 0; }
}

@keyframes shftx-pr-flash {
	0%   { transform: scale(0.2); opacity: 0.95; }
	100% { transform: scale(2.7); opacity: 0; }
}

@keyframes shftx-pr-particle {
	0%   { transform: translate(0, 0) scale(0.4) rotate(0deg); opacity: 1; }
	100% { transform: translate(var(--tx, 0), var(--ty, 0)) scale(0.9) rotate(var(--rot, 90deg)); opacity: 0; }
}

@keyframes shftx-pr-bounce {
	0%   { transform: scale(1); }
	40%  { transform: scale(1.1); }
	72%  { transform: scale(0.98); }
	100% { transform: scale(1); }
}

/* One-time green settle shine on the real price. */
.shftx-pr-shine {
	position: relative;
}
.shftx-pr-shine::after {
	content: "";
	position: absolute;
	top: -6px;
	bottom: -6px;
	left: -10px;
	right: -10px;
	pointer-events: none;
	background: linear-gradient( 115deg, rgba(74, 222, 128, 0) 38%, rgba(74, 222, 128, 0.55) 48%, rgba(187, 247, 208, 0.85) 50%, rgba(74, 222, 128, 0.55) 52%, rgba(74, 222, 128, 0) 62% );
	mix-blend-mode: screen;
	transform: translateX(-130%);
	animation: shftx-pr-shine 0.95s cubic-bezier(0.4, 0, 0.2, 1) 1 forwards;
}
.shftx-pr-shine::before {
	content: "";
	position: absolute;
	inset: -4px -8px;
	pointer-events: none;
	border-radius: 8px;
	animation: shftx-pr-glow 1s ease-out 1 forwards;
}

@keyframes shftx-pr-shine {
	to { transform: translateX(130%); }
}
@keyframes shftx-pr-glow {
	0%   { box-shadow: 0 0 0 rgba(34, 197, 94, 0); }
	35%  { box-shadow: 0 0 16px rgba(34, 197, 94, 0.45); }
	100% { box-shadow: 0 0 0 rgba(34, 197, 94, 0); }
}

@media (prefers-reduced-motion: reduce) {
	.shftx-pr__unit,
	.shftx-pr__box,
	.shftx-pr__boxicon,
	.shftx-pr__amt,
	.shftx-pr__badge,
	.shftx-pr__flash,
	.shftx-pr__p,
	.shftx-pr-shine::after,
	.shftx-pr-shine::before {
		animation: none !important;
		transition: none !important;
	}
}

/* =========================================================================
 * Lowest Price Alert box (FOMO). Sits on its OWN line below the price (forced
 * full-width so it never crowds the price row), but the visual box is sized to
 * its content and left-aligned so it stays tidy. Opens by expanding + fading in
 * (no empty gap, no layout jump). Only opacity/transform/max-height animate; the
 * optional pulse is a compositor-cheap opacity + transform, kept subtle.
 * ====================================================================== */
.shftx-pr-fomo {
	--shftx-pr-fomo-bg: #c81e1e;
	/* Force onto its own full-width line across block / flex / grid / float layouts. */
	display: flex;
	width: 100%;
	flex-basis: 100%;
	grid-column: 1 / -1;
	clear: both;
	align-items: flex-start;
	box-sizing: border-box;
	opacity: 0;
	transform: translateY(7px);
	transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.shftx-pr-fomo.is-in {
	opacity: 1;
	transform: none;
}

.shftx-pr-fomo__box {
	position: relative;
	overflow: hidden;
	max-width: 100%;
	max-height: 0;
	margin-top: 0;
	padding: 0 15px;
	border-radius: 11px;
	color: #fff;
	background: var(--shftx-pr-fomo-bg);
	background: linear-gradient( 135deg, color-mix( in srgb, var(--shftx-pr-fomo-bg) 88%, #fff ) 0%, var(--shftx-pr-fomo-bg) 55%, color-mix( in srgb, var(--shftx-pr-fomo-bg) 78%, #000 ) 100% );
	box-shadow: 0 4px 14px rgba(200, 30, 30, 0.28);
	transition: max-height 0.5s cubic-bezier(0.16, 1, 0.3, 1), margin-top 0.5s ease, padding 0.5s ease;
}
.shftx-pr-fomo.is-in .shftx-pr-fomo__box {
	max-height: 200px;
	margin-top: 12px;
	padding: 9px 15px;
}

/* Subtle inside "breathing" highlight — cheap opacity pulse, not clipped away. */
.shftx-pr-fomo__box::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient( 120deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.16) 55%, rgba(255, 255, 255, 0) 70% );
	opacity: 0;
}
.shftx-pr-fomo--pulse.is-in .shftx-pr-fomo__box::after {
	animation: shftx-pr-fomo-breathe 2.6s ease-in-out 0.9s infinite;
}

.shftx-pr-fomo__inner {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 10px;
}
.shftx-pr-fomo__icon {
	display: inline-flex;
	flex: 0 0 auto;
	font-size: 19px;
	color: #ffd36b;
	filter: drop-shadow(0 0 5px rgba(255, 211, 107, 0.5));
}
.shftx-pr-fomo--pulse.is-in .shftx-pr-fomo__icon {
	animation: shftx-pr-fomo-flicker 1.8s ease-in-out 0.9s infinite;
	transform-origin: center bottom;
}
.shftx-pr-fomo__text {
	display: flex;
	flex-direction: column;
	line-height: 1.22;
	min-width: 0;
}
.shftx-pr-fomo__title {
	font-weight: 800;
	font-size: 13.5px;
	letter-spacing: 0.2px;
}
.shftx-pr-fomo__sub {
	font-weight: 600;
	font-size: 12px;
	opacity: 0.92;
}

/* One-time glint on entrance. */
.shftx-pr-fomo__shine {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 42%;
	pointer-events: none;
	background: linear-gradient( 115deg, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0) 80% );
	transform: translateX(-200%) skewX(-18deg);
}
.shftx-pr-fomo.is-in .shftx-pr-fomo__shine {
	animation: shftx-pr-fomo-shine 1.15s ease-out 0.35s 1 forwards;
}

@keyframes shftx-pr-fomo-shine {
	to { transform: translateX(320%) skewX(-18deg); }
}
@keyframes shftx-pr-fomo-breathe {
	0%, 100% { opacity: 0; }
	50% { opacity: 1; transform: translateX(6%); }
}
@keyframes shftx-pr-fomo-flicker {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.1); }
}

@media (prefers-reduced-motion: reduce) {
	.shftx-pr-fomo {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
	.shftx-pr-fomo__box {
		max-height: none !important;
		margin-top: 12px !important;
		padding: 9px 15px !important;
		transition: none !important;
	}
	.shftx-pr-fomo__box::after,
	.shftx-pr-fomo__icon,
	.shftx-pr-fomo__shine {
		animation: none !important;
	}
}