/**
 * wishlist.css — the heart toggles and the header badge.
 *
 * Pairs with assets/js/wishlist.js. The two templates that render a heart —
 * template-parts/product/card.php and woocommerce/content-single-product.php —
 * own their own geometry; this file owns only the SAVED and PENDING states,
 * which are the two things both hearts share and neither had.
 *
 * WHY THE FILL IS THE STATE. A heart has exactly one job: to say whether this
 * thing is on the list. Outline means no, solid means yes — a convention old
 * enough that nothing else needs to change. The colour stays the accent in
 * both states, so the transition is a fill and not a repaint.
 */

/* =========================================================================
 * 1. SAVED
 *
 * THE COLOUR IS NOT SET HERE, AND THAT IS A CORRECTION.
 *
 * This file first restated the saved heart as --bedi-accent, and lost: the
 * catalogue tile's own stylesheet already owns it, at the same specificity and
 * later in the cascade, as --prail-wish-on (#F2442C). That was not an accident
 * to be overridden — section-products.css picks a RED deliberately, documents
 * its 3.54:1 contrast on the fixed panel, and a red heart is the universal
 * wishlist convention. A blue one would have been this file's taste beating
 * another file's reasoning.
 *
 * So the colour, the fill and the focus ring stay where they are, and this
 * file adds only the three things NEITHER heart stylesheet provides: the press
 * animation, the in-flight state, and the header badge.
 *
 * The product page's heart (product.css) fills from currentColor the same way,
 * so both are already consistent without a rule here.
 * ====================================================================== */

/*
 * THE POP. One overshoot on the frame the heart fills — 1.0 → 1.28 → 1.0 over
 * 420ms. It fires on the state CLASS rather than on aria-pressed so it plays
 * only when the visitor pressed it, never on the server-rendered first paint:
 * a page of already-saved products should not stage a fireworks display on
 * load. wishlist.js sets the class; the server sets only the attribute.
 */
.bedi-pcard__wish.is-active svg,
.bedi-product__wish.is-active svg,
.bedi-buyrail__auxbtn--wish.is-active svg {
	animation: bedi-wish-pop 420ms var(--bedi-ease-out) 1;
}

@keyframes bedi-wish-pop {
	0% {
		transform: scale(1);
	}

	38% {
		transform: scale(1.28);
	}

	62% {
		transform: scale(0.94);
	}

	100% {
		transform: scale(1);
	}
}

/* =========================================================================
 * 2. PENDING
 *
 * The request is in flight and the button is refusing further clicks. It is
 * shown, not hidden: a control that stops responding without saying why reads
 * as broken. 0.55 opacity and a wait cursor are enough — a spinner on a 20px
 * heart is noise, and the request is usually over before it could spin once.
 * ====================================================================== */

.bedi-pcard__wish.is-pending,
.bedi-product__wish.is-pending {
	cursor: progress;
	opacity: 0.55;
	pointer-events: none;
}

/* =========================================================================
 * 3. THE HEADER BADGE
 *
 * .bedi-action__count is header.css's; this adds only the change bump and the
 * hide-at-zero, matching what the cart badge already does so the two counters
 * behave identically.
 * ====================================================================== */

.bedi-action--wishlist .bedi-action__count[data-empty="true"] {
	/*
	 * visibility rather than display: the badge keeps its box, so the icon does
	 * not shift by a pixel when the first item is saved.
	 */
	opacity: 0;
	transform: scale(0.6);
}

.bedi-action--wishlist .bedi-action__count {
	transition:
		opacity var(--bedi-dur-micro) var(--bedi-ease-in),
		transform var(--bedi-dur) var(--bedi-ease-in);
}

.bedi-action--wishlist .bedi-action__count.is-bumped {
	animation: bedi-wish-bump 420ms var(--bedi-ease-out) 1;
}

@keyframes bedi-wish-bump {
	0% {
		transform: scale(1);
	}

	40% {
		transform: scale(1.3);
	}

	100% {
		transform: scale(1);
	}
}

/* =========================================================================
 * 4. REDUCED MOTION, FORCED COLOURS
 * ====================================================================== */

@media (prefers-reduced-motion: reduce) {
	/*
	 * The pop and the bump are pure decoration — the fill and the number both
	 * carry the state on their own — so they are removed outright rather than
	 * shortened.
	 */
	.bedi-pcard__wish.is-active svg,
	.bedi-product__wish.is-active svg,
	.bedi-action--wishlist .bedi-action__count.is-bumped {
		animation: none !important;
	}

	.bedi-action--wishlist .bedi-action__count {
		transition-duration: 1ms !important;
	}
}

@media (forced-colors: active) {
	/*
	 * `fill: currentColor` is how the saved state reads, and forced colours
	 * keeps currentColor — so the solid/outline distinction survives with no
	 * help. What does NOT survive is the accent, so nothing here tries to
	 * restate it.
	 */
	.bedi-pcard__wish.is-pending,
	.bedi-product__wish.is-pending {
		opacity: 1;
	}
}