/* ==========================================================================
   Motion
   Entrances only, short, and never on anything the reader needs immediately.
   The whole file is disabled for prefers-reduced-motion, and every animated
   element is fully visible by default so nothing depends on JavaScript.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
	[data-hp-reveal] {
		opacity: 0;
		transform: translateY(14px);
		transition: opacity 520ms cubic-bezier(0.22, 0.61, 0.36, 1),
		            transform 520ms cubic-bezier(0.22, 0.61, 0.36, 1);
		will-change: opacity, transform;
	}
	[data-hp-reveal].is-visible {
		opacity: 1;
		transform: none;
	}
	/* Cards in a row arrive a beat apart, which reads as one movement
	   rather than eight separate ones. */
	[data-hp-reveal]:nth-child(2) { transition-delay: 60ms; }
	[data-hp-reveal]:nth-child(3) { transition-delay: 120ms; }
	[data-hp-reveal]:nth-child(4) { transition-delay: 180ms; }
	[data-hp-reveal]:nth-child(5) { transition-delay: 240ms; }

	.hp-card__media img,
	.hp-card__media .hp-placeholder { transition: transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1); }
	.hp-card:hover .hp-card__media img,
	.hp-card:hover .hp-card__media .hp-placeholder { transform: scale(1.025); }

	.hp-btn { transition: background-color var(--hp-transition), transform 120ms ease; }
	.hp-btn:active { transform: translateY(1px); }
}

/* --- Live data indicators ------------------------------------------------ */
.hp-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--hp-space-2xs); }
.hp-price__value {
	font-family: var(--hp-font-display);
	font-size: var(--hp-text-lg);
	font-weight: 700;
	color: var(--hp-color-text);
}
.hp-price__stock {
	padding: 0.15rem 0.5rem;
	border-radius: var(--hp-radius-sm);
	background-color: var(--hp-color-primary-soft);
	color: var(--hp-color-primary-dark);
	font-size: var(--hp-text-2xs);
	font-weight: 650;
}
.hp-price__checked {
	flex-basis: 100%;
	font-family: var(--hp-font-mono);
	font-size: var(--hp-text-2xs);
	color: var(--hp-color-text-muted);
}
.hp-price__checked.is-stale { color: var(--hp-color-warning); }

/* A live figure gets a quiet pulse the first time it is seen, and only then. */
@media (prefers-reduced-motion: no-preference) {
	.hp-price__value.is-fresh { animation: hp-fresh 1600ms ease-out 1; }
	@keyframes hp-fresh {
		0%   { background-color: var(--hp-color-signal-soft); }
		100% { background-color: transparent; }
	}
}

.hp-source-note {
	margin-top: var(--hp-space-2xs);
	font-size: var(--hp-text-xs);
	color: var(--hp-color-text-muted);
}
.hp-source-note a { text-decoration: underline; }