/* ==========================================================================
   All-Access Pass banner (patterns/bundle-cta.php + blocks/pass-offer)
   Theme screenshots stream through the holographic pass — locked before it,
   unlocked after it — beside the offer copy, a live savings slider and the
   perks strip. Loaded only where the banner renders
   (inc/modules/ui-all-access.php). No tracking.
   ========================================================================== */

.wpi-aa-wrap {
	padding-block: clamp(1.5rem, 3vw, 2.5rem);
}

.wpi-aa {
	--aa-ink: var(--ink, #0B0B12);
	--aa-brand: var(--indigo, #4C5BFF);
	--aa-lav: #C9CEFF;
	--aa-peri: #A9B1FF;
	--aa-good: #6EE7A8;
	--aa-mono: var(--wp--preset--font-family--mono, ui-monospace, monospace);
	--aa-line: rgba(255, 255, 255, .1);
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: clamp(1.75rem, 5vw, 4rem);
	border-radius: 32px;
	background: var(--aa-ink);
	color: #fff;
}

/* Top glow + drifting light + dot grid. */
.wpi-aa::before,
.wpi-aa::after {
	content: "";
	position: absolute;
	z-index: -1;
	pointer-events: none;
}

.wpi-aa::before {
	inset: -20% -10% auto;
	height: 90%;
	background: radial-gradient(50% 55% at 30% 0%, color-mix(in srgb, var(--aa-brand) 45%, transparent) 0%, transparent 70%);
	filter: blur(10px);
}

.wpi-aa::after {
	inset: 0;
	background:
		radial-gradient(40% 50% at 78% 45%, color-mix(in srgb, var(--aa-brand) 22%, transparent), transparent 70%),
		radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1.2px) 0 0 / 22px 22px;
	-webkit-mask: radial-gradient(90% 80% at 70% 40%, #000, transparent 85%);
	mask: radial-gradient(90% 80% at 70% 40%, #000, transparent 85%);
}

@media (prefers-reduced-motion: no-preference) {
	.wpi-aa::before {
		animation: wpi-aa-breathe 9s ease-in-out infinite alternate;
	}
}

@keyframes wpi-aa-breathe {
	from { opacity: .75; transform: translate3d(-4%, 0, 0) scale(1); }
	to { opacity: 1; transform: translate3d(8%, 0, 0) scale(1.06); }
}

.wpi-aa .wpi-aa__cols {
	gap: clamp(2rem, 4vw, 3.5rem);
	margin: 0;
}

.wpi-aa :where(p, h2, ul) {
	margin-block: 0;
}

.wpi-aa .wpi-aa__copy,
.wpi-aa .wpi-aa__visual {
	min-width: 0;
}

/* ---------- Copy ---------- */
.wpi-aa .wpi-aa__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: .55em;
	margin-bottom: 1.25rem;
	padding: .4rem .85rem .4rem .7rem;
	border: 1px solid rgba(201, 206, 255, .22);
	border-radius: 999px;
	background: rgba(76, 91, 255, .14);
	font-family: var(--aa-mono);
	font-size: 11.5px;
	font-weight: 500;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--aa-lav);
}

.wpi-aa .wpi-aa__eyebrow::before {
	content: "";
	flex: none;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--aa-good);
	box-shadow: 0 0 0 0 rgba(110, 231, 168, .6);
}

.wpi-aa .wpi-aa__title {
	margin: 0 0 1rem;
	font-size: clamp(2.3rem, 1.2rem + 3.3vw, 4.4rem);
	font-weight: 500;
	line-height: 1;
	text-wrap: balance;
	color: #fff;
	background: linear-gradient(100deg, #fff 25%, var(--aa-lav) 60%, #8C96FF 90%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* motion.js splits h2 into masked lines; keep the gradient on each line. */
.wpi-aa .wpi-aa__title .wpi-line {
	background: inherit;
	-webkit-background-clip: text;
	background-clip: text;
}

.wpi-aa .wpi-aa__lead {
	margin-top: 1.5rem;
	max-width: 34ch;
	font-size: clamp(1.14rem, 1.03rem + .45vw, 1.375rem);
	line-height: 1.45;
	color: #A2A3B8;
}

.wpi-aa .wpi-aa__lead strong {
	font-weight: 500;
	color: #fff;
}

.wpi-aa .wpi-aa__actions {
	gap: .75rem;
	margin-top: 1.75rem;
}

.wpi-aa .wpi-aa__actions .wp-block-button__link {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	min-height: 46px;
	padding: 12px 22px;
	border: 1px solid transparent;
	border-radius: 999px;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.1;
	text-decoration: none;
	transition: transform .35s var(--ease, ease), box-shadow .35s var(--ease, ease), background-color .35s var(--ease, ease), border-color .35s var(--ease, ease);
}

/* Brand button: indigo with an inner light, glow shadow and a hover sheen. */
.wpi-aa .wpi-aa__btn .wp-block-button__link {
	background: var(--aa-brand) radial-gradient(120% 120% at 50% 120%, rgba(169, 177, 255, .55), transparent 55%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 10px 30px -12px color-mix(in srgb, var(--aa-brand) 80%, transparent);
	color: #fff;
}

.wpi-aa .wpi-aa__btn .wp-block-button__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .28) 50%, transparent 70%);
	transform: translateX(-120%);
	transition: transform .7s var(--ease, ease);
}

.wpi-aa .wpi-aa__btn .wp-block-button__link:hover {
	transform: translateY(-2px);
	background-color: var(--indigo-2, #3A47E0);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 18px 40px -14px color-mix(in srgb, var(--aa-brand) 95%, transparent);
}

.wpi-aa .wpi-aa__btn .wp-block-button__link:hover::after {
	transform: translateX(120%);
}

.wpi-aa .wpi-aa__more .wp-block-button__link {
	border-color: rgba(255, 255, 255, .2);
	background: transparent;
	color: #fff;
}

.wpi-aa .wpi-aa__more .wp-block-button__link:hover {
	border-color: rgba(201, 206, 255, .5);
	background: rgba(255, 255, 255, .06);
}

.wpi-aa .wpi-aa__actions .wp-block-button__link:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

.wpi-aa .wpi-aa__note {
	margin-top: 1rem;
	font-size: 13px;
	line-height: 1.6;
	color: #8E8FA6;
}

/* ---------- Unlock scene (blocks/pass-offer) ---------- */
.wpi-aa-scene {
	--shot-w: clamp(92px, 8.4vw, 128px);
	--aa-ink: var(--ink, #0B0B12);
	--aa-brand: var(--indigo, #4C5BFF);
	--aa-lav: #C9CEFF;
	--aa-good: #6EE7A8;
	--aa-mono: var(--wp--preset--font-family--mono, ui-monospace, monospace);
	display: grid;
	gap: 14px;
	margin: 0;
	color: #fff;
}

.wpi-aa-scene :where(p, dl, dd, figure) {
	margin: 0;
}

.wpi-aa-stage {
	position: relative;
	isolation: isolate;
	height: clamp(300px, 27vw, 380px);
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, .09);
	border-radius: 24px;
	background:
		radial-gradient(42% 60% at 50% 50%, rgba(76, 91, 255, .32), transparent 72%),
		linear-gradient(90deg, rgba(255, 255, 255, .015), rgba(76, 91, 255, .06)),
		var(--aa-ink);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}

.wpi-aa-stage__labels {
	position: absolute;
	inset: 14px 16px auto;
	z-index: 4;
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	pointer-events: none;
}

.wpi-aa-stage__label {
	display: inline-flex;
	align-items: center;
	gap: .45em;
	min-width: 0;
	font-family: var(--aa-mono);
	font-size: 10.5px;
	line-height: 1.3;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .5);
}

.wpi-aa-stage__label svg {
	flex: none;
}

.wpi-aa-stage__label.is-open {
	text-align: right;
	color: var(--aa-lav);
}

.wpi-aa-lanes {
	position: absolute;
	inset: 44px 0 46px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 12px;
	-webkit-mask: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
	mask: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}

.wpi-aa-lane {
	position: relative;
	display: flex;
	justify-content: center;
	gap: 12px;
	height: calc(var(--shot-w) * .625);
}

.wpi-aa-shot {
	position: relative;
	flex: none;
	width: var(--shot-w);
	height: 100%;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: 10px;
	background: #1A1B27;
	transition: filter .5s ease, box-shadow .5s ease, border-color .5s ease, opacity .5s ease;
}

.wpi-aa-shot img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
}

.wpi-aa-shot.is-locked {
	filter: grayscale(1) brightness(.42);
	opacity: .8;
}

.wpi-aa-shot.is-open {
	border-color: rgba(201, 206, 255, .4);
	box-shadow: 0 12px 26px -14px rgba(76, 91, 255, .95);
}

.wpi-aa-shot__badge {
	position: absolute;
	top: 5px;
	right: 5px;
	display: grid;
	place-items: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: rgba(11, 11, 18, .8);
	color: #fff;
	transition: background-color .4s ease;
}

.wpi-aa-shot__badge i {
	display: grid;
	place-items: center;
}

.wpi-aa-shot.is-locked .is-check,
.wpi-aa-shot.is-open .is-lock {
	display: none;
}

.wpi-aa-shot.is-open .wpi-aa-shot__badge {
	background: var(--aa-brand);
}

/* JS drives the stream: cards are absolutely placed and moved by transform. */
.wpi-aa-stage.is-live .wpi-aa-shot {
	position: absolute;
	top: 0;
	left: 0;
	will-change: transform;
}

/* Scan beam through the pass. */
.wpi-aa-beam {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	z-index: 2;
	width: 120px;
	translate: -50% 0;
	background:
		linear-gradient(90deg, transparent 49.2%, rgba(201, 206, 255, .85) 50%, transparent 50.8%),
		radial-gradient(closest-side, rgba(76, 91, 255, .45), transparent);
	-webkit-mask: linear-gradient(transparent, #000 20%, #000 80%, transparent);
	mask: linear-gradient(transparent, #000 20%, #000 80%, transparent);
	pointer-events: none;
}

.wpi-aa-card-wrap {
	position: absolute;
	inset: 0;
	z-index: 3;
	display: grid;
	place-items: center;
	perspective: 1000px;
	pointer-events: none;
}

.wpi-aa-card {
	--rx: 0deg;
	--ry: 0deg;
	--mx: 30%;
	--my: 20%;
	position: relative;
	display: flex;
	flex-direction: column;
	width: clamp(208px, 46%, 290px);
	aspect-ratio: 1.586;
	padding: clamp(.85rem, 1.6vw, 1.1rem) clamp(.95rem, 1.8vw, 1.25rem);
	overflow: hidden;
	border-radius: 18px;
	background:
		radial-gradient(120% 90% at 100% 0%, rgba(76, 91, 255, .6), transparent 55%),
		radial-gradient(80% 80% at 0% 100%, rgba(169, 177, 255, .28), transparent 60%),
		#0E0F1A;
	box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .18) inset, 0 0 60px -10px rgba(76, 91, 255, .55);
	transform: rotateX(var(--rx)) rotateY(var(--ry));
	transform-style: preserve-3d;
	transition: transform .6s cubic-bezier(.16, 1, .3, 1), box-shadow .3s ease;
}

.wpi-aa-card.is-tilting {
	transition-duration: .12s, .3s;
}

/* Flash each time a theme passes through the pass. */
.wpi-aa-card::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: 0 0 0 2px rgba(201, 206, 255, .9) inset;
	opacity: 0;
	pointer-events: none;
}

.wpi-aa-card.is-scan::after {
	animation: wpi-aa-scan .6s ease-out;
}

@keyframes wpi-aa-scan {
	from { opacity: .9; }
	to { opacity: 0; }
}

.wpi-aa-card__holo {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background:
		radial-gradient(circle at var(--mx) var(--my), rgba(255, 255, 255, .35), transparent 35%),
		conic-gradient(from 120deg at var(--mx) var(--my), rgba(255, 120, 200, .25), rgba(120, 220, 255, .25), rgba(169, 177, 255, .3), rgba(255, 230, 120, .2), rgba(255, 120, 200, .25));
	mix-blend-mode: overlay;
	opacity: .6;
	pointer-events: none;
	transition: opacity .4s;
}

.wpi-aa-card.is-tilting .wpi-aa-card__holo {
	opacity: .95;
}

.wpi-aa-card__top,
.wpi-aa-card__name,
.wpi-aa-card__stats,
.wpi-aa-card__foot {
	position: relative;
}

.wpi-aa-card__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.wpi-aa-card__mark {
	display: block;
	width: auto;
	height: 24px;
}

.wpi-aa-card__type {
	padding: .2rem .55rem;
	border: 1px solid rgba(255, 255, 255, .3);
	border-radius: 999px;
	font-family: var(--aa-mono);
	font-size: 9.5px;
	text-transform: uppercase;
}

.wpi-aa-card__name {
	margin-top: auto !important;
	font-size: clamp(1.2rem, .9rem + 1vw, 1.6rem);
	font-weight: 500;
	line-height: .95;
	color: #fff;
}

.wpi-aa-card__stats {
	display: flex;
	gap: 1.1rem;
	margin-top: .6rem !important;
}

.wpi-aa-card__stats div {
	display: grid;
}

.wpi-aa-card__stats dt {
	font-family: var(--aa-mono);
	font-size: 8.5px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .55);
}

.wpi-aa-card__stats dd {
	font-size: .95rem;
	font-weight: 500;
}

.wpi-aa-card__foot {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	margin-top: .6rem;
	padding-top: .5rem;
	border-top: 1px solid rgba(255, 255, 255, .14);
	font-family: var(--aa-mono);
	font-size: 9.5px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .6);
}

.wpi-aa-card__foot b {
	font-size: 12px;
	font-weight: 500;
	color: #fff;
}

.wpi-aa-card__price {
	font-family: var(--wp--preset--font-family--body, inherit);
	font-size: 1rem;
	font-weight: 500;
	color: #fff;
}

.wpi-aa-stage__status {
	position: absolute;
	bottom: 12px;
	left: 50%;
	z-index: 4;
	display: inline-flex;
	align-items: center;
	gap: .5em;
	max-width: calc(100% - 24px);
	padding: .35rem .75rem;
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 999px;
	background: rgba(11, 11, 18, .78);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	font-family: var(--aa-mono);
	font-size: 10.5px;
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--aa-lav);
	white-space: nowrap;
	translate: -50% 0;
}

.wpi-aa-stage__status > span:last-child {
	overflow: hidden;
	text-overflow: ellipsis;
}

.wpi-aa-stage__dot {
	flex: none;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--aa-good);
}

.wpi-aa-stage.is-unlocking .wpi-aa-stage__dot {
	background: var(--aa-brand);
}

/* ---------- Mini savings slider ---------- */
.wpi-aa-calc {
	display: grid;
	gap: .9rem;
	padding: 1rem 1.15rem 1.05rem;
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: 20px;
	background: rgba(255, 255, 255, .04);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}

.wpi-aa-calc__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: .7rem 1rem;
	cursor: pointer;
}

.wpi-aa-calc__q {
	font-size: 14px;
	color: rgba(255, 255, 255, .75);
}

.wpi-aa-calc__n {
	font-size: 14px;
	font-weight: 500;
	color: #fff;
}

.wpi-aa-calc__range {
	--fill: 50%;
	grid-column: 1 / -1;
	width: 100%;
	height: 6px;
	margin: 0;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--aa-brand), #8C96FF var(--fill), rgba(255, 255, 255, .14) var(--fill));
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
}

.wpi-aa-calc__range::-webkit-slider-thumb {
	width: 22px;
	height: 22px;
	border: 4px solid var(--aa-brand);
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 0 0 6px rgba(76, 91, 255, .2), 0 4px 14px rgba(76, 91, 255, .6);
	-webkit-appearance: none;
	transition: transform .2s;
}

.wpi-aa-calc__range::-moz-range-thumb {
	width: 14px;
	height: 14px;
	border: 4px solid var(--aa-brand);
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 0 0 6px rgba(76, 91, 255, .2);
}

.wpi-aa-calc__range:active::-webkit-slider-thumb {
	transform: scale(1.15);
}

.wpi-aa-calc__range:focus-visible {
	outline: 2px solid var(--aa-lav);
	outline-offset: 6px;
}

.wpi-aa-calc__vs {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: .5rem;
}

.wpi-aa-calc__col {
	display: grid;
	gap: .15rem;
	min-width: 0;
	padding: .6rem .75rem;
	border-radius: 12px;
	background: rgba(255, 255, 255, .04);
}

.wpi-aa-calc__col span {
	font-family: var(--aa-mono);
	font-size: 9.5px;
	line-height: 1.3;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .55);
}

.wpi-aa-calc__col b {
	font-size: clamp(1.1rem, .95rem + .5vw, 1.35rem);
	font-weight: 500;
	line-height: 1.15;
	color: #fff;
}

.wpi-aa-calc__col.is-solo b {
	color: rgba(255, 255, 255, .7);
}

.wpi-aa-calc.is-saving .wpi-aa-calc__col.is-solo b {
	text-decoration: line-through;
	text-decoration-color: rgba(255, 130, 150, .85);
	text-decoration-thickness: 2px;
}

.wpi-aa-calc__col.is-pass {
	background: rgba(76, 91, 255, .16);
	box-shadow: 0 0 0 1px rgba(76, 91, 255, .45) inset;
}

.wpi-aa-calc.is-saving .wpi-aa-calc__col.is-save {
	background: rgba(110, 231, 168, .1);
}

.wpi-aa-calc.is-saving .wpi-aa-calc__col.is-save b {
	color: var(--aa-good);
}

.wpi-aa-calc__note {
	font-size: 12.5px;
	line-height: 1.5;
	color: #8E8FA6;
}

.wpi-aa-calc__note strong {
	font-weight: 500;
	color: #fff;
}

/* ---------- Perks strip ---------- */
.wpi-aa .wpi-aa__list {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: .75rem;
	margin: clamp(2rem, 4vw, 3rem) 0 0;
	padding: clamp(1.5rem, 3vw, 2.25rem) 0 0;
	border-top: 1px solid rgba(255, 255, 255, .1);
	list-style: none;
}

.wpi-aa .wpi-aa__list li {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: .85rem;
	margin: 0;
	padding: 1rem;
	border: 1px solid rgba(255, 255, 255, .08);
	border-radius: 16px;
	background: rgba(255, 255, 255, .03);
	font-size: 15px;
	line-height: 1.35;
	color: #fff;
	transition: transform .35s var(--ease, ease), border-color .35s ease, background-color .35s ease;
}

.wpi-aa .wpi-aa__list li::before {
	content: "";
	flex: none;
	width: 38px;
	height: 38px;
	border-radius: 11px;
	background: rgba(76, 91, 255, .18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C9CEFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4L18 8'/%3E%3C/svg%3E") 50% 50% / 20px no-repeat;
	box-shadow: inset 0 0 0 1px rgba(201, 206, 255, .16);
	transition: background-color .35s ease, box-shadow .35s ease;
}

.wpi-aa .wpi-aa__list li:hover {
	transform: translateY(-3px);
	border-color: rgba(201, 206, 255, .3);
	background-color: rgba(76, 91, 255, .08);
}

.wpi-aa .wpi-aa__list li:hover::before {
	background-color: var(--aa-brand);
	box-shadow: 0 8px 22px -8px rgba(76, 91, 255, .9);
}

.wpi-aa .wpi-aa__list .wpi-aa-perk--save::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C9CEFF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12V4a1 1 0 0 1 1-1h8l9 9-9 9z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.5'/%3E%3C/svg%3E"); }
.wpi-aa .wpi-aa__list .wpi-aa-perk--life::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C9CEFF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 8c-2.2 0-4 1.8-4 4s1.8 4 4 4c3.5 0 6.5-8 10-8 2.2 0 4 1.8 4 4s-1.8 4-4 4c-3.5 0-6.5-8-10-8z'/%3E%3C/svg%3E"); }
.wpi-aa .wpi-aa__list .wpi-aa-perk--all::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C9CEFF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1.5'/%3E%3C/svg%3E"); }
.wpi-aa .wpi-aa__list .wpi-aa-perk--updates::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C9CEFF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 1 1-2.6-6.4'/%3E%3Cpath d='M21 4v5h-5'/%3E%3C/svg%3E"); }
.wpi-aa .wpi-aa__list .wpi-aa-perk--keys::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C9CEFF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='15' r='4'/%3E%3Cpath d='m11 12 9-9M17 6l3 3M14 9l2 2'/%3E%3C/svg%3E"); }
.wpi-aa .wpi-aa__list .wpi-aa-perk--once::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C9CEFF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3Cpath d='M2 10h20M6 15h4'/%3E%3C/svg%3E"); }

/* ---------- Motion (only when allowed) ---------- */
@media (prefers-reduced-motion: no-preference) {
	.wpi-aa .wpi-aa__eyebrow::before {
		animation: wpi-aa-ping 2s ease-out infinite;
	}

	.wpi-aa-card {
		animation: wpi-aa-float 6s ease-in-out infinite;
	}

	.wpi-aa-card.is-tilting {
		animation-play-state: paused;
	}

	.wpi-aa-beam {
		animation: wpi-aa-beam 3s ease-in-out infinite;
	}

	.wpi-aa-stage.is-paused .wpi-aa-card,
	.wpi-aa-stage.is-paused .wpi-aa-beam {
		animation-play-state: paused;
	}
}

@keyframes wpi-aa-ping {
	0% { box-shadow: 0 0 0 0 rgba(110, 231, 168, .6); }
	70%, 100% { box-shadow: 0 0 0 8px rgba(110, 231, 168, 0); }
}

@keyframes wpi-aa-float {
	0%, 100% { translate: 0 0; }
	50% { translate: 0 -8px; }
}

@keyframes wpi-aa-beam {
	0%, 100% { opacity: .65; }
	50% { opacity: 1; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
	.wpi-aa .wpi-aa__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 781px) {
	.wpi-aa .wpi-aa__lead {
		max-width: none;
	}

	.wpi-aa .wpi-aa__lead,
	.wpi-aa .wpi-aa__actions {
		margin-top: 1.25rem;
	}

	.wpi-aa-scene {
		--shot-w: 96px;
	}

	.wpi-aa-stage {
		height: 300px;
	}
}

@media (max-width: 600px) {
	.wpi-aa {
		border-radius: 24px;
	}

	.wpi-aa .wpi-aa__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: .5rem;
	}

	.wpi-aa .wpi-aa__list li {
		gap: .65rem;
		padding: .85rem;
		font-size: 14px;
	}

	.wpi-aa .wpi-aa__list li::before {
		width: 32px;
		height: 32px;
		background-size: 18px;
	}

	.wpi-aa-scene {
		--shot-w: 84px;
	}

	.wpi-aa-stage {
		height: 280px;
		border-radius: 20px;
	}

	.wpi-aa-stage__label {
		font-size: 9.5px;
	}

	.wpi-aa-card {
		width: min(58%, 210px);
		aspect-ratio: auto;
		padding: .8rem .9rem;
	}

	.wpi-aa-card__mark {
		height: 20px;
	}

	.wpi-aa-card__name {
		margin-top: 1.1rem !important;
		font-size: 1.15rem;
	}

	.wpi-aa-card__stats {
		gap: .9rem;
	}

	.wpi-aa-stage__label .wpi-aa-stage__each {
		display: none;
	}

	.wpi-aa-calc__vs {
		gap: .35rem;
	}

	.wpi-aa-calc__col {
		padding: .55rem .6rem;
	}

	.wpi-aa-calc__col span {
		font-size: 8.5px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wpi-aa .wpi-aa__actions .wp-block-button__link,
	.wpi-aa .wpi-aa__btn .wp-block-button__link::after,
	.wpi-aa .wpi-aa__list li,
	.wpi-aa-shot,
	.wpi-aa-card {
		transition: none;
	}

	.wpi-aa .wpi-aa__actions .wp-block-button__link:hover,
	.wpi-aa .wpi-aa__list li:hover {
		transform: none;
	}
}