/**
 * Subtle motion for images and cards (site-wide, loaded after theme-light.css).
 *
 * - Only transform / opacity / filter: no layout shift, scroll tracking unaffected.
 * - Above-the-fold images (article hero, lead story) stay fully opaque, so they do not
 *   delay the Largest Contentful Paint; they only "settle" from a slight zoom.
 * - Scroll reveals apply only when motion.js has run (html.csa-motion), so content is
 *   always visible without JavaScript.
 * - Everything is disabled for visitors who prefer reduced motion.
 *
 * @package Crypto_News
 */

@media (prefers-reduced-motion: no-preference) {

	/* 1. Hero & lead image settle into place on load. */
	@keyframes csa-settle {
		from { transform: scale(1.045); filter: saturate(0.85) brightness(0.92); }
		to   { transform: scale(1);     filter: none; }
	}

	/* "backwards": the zoom applies only while it runs, so the pop transitions work afterwards. */
	.csa-hero-img,
	.csa-card--lead .csa-card__img {
		animation: csa-settle 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
	}

	/* The lead card's hover zoom must not fight the settle animation. */
	.csa-card--lead:hover .csa-card__img {
		animation: none;
	}

	/* 2. Pop: images pop up every time they scroll into view and pop down when they
	      leave (motion.js toggles .is-visible). Slight overshoot gives the "pop". */
	.csa-motion .csa-reveal {
		opacity: 0;
		transform: translateY(26px) scale(0.92);
		transition:
			opacity 0.45s ease var(--csa-reveal-delay, 0ms),
			transform 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) var(--csa-reveal-delay, 0ms);
	}

	.csa-motion .csa-reveal.is-visible {
		opacity: 1;
		transform: none;
	}

	/* Hover lift must still win over the pop's resting state. */
	.csa-motion .csa-card:hover .csa-card__media.csa-reveal.is-visible {
		transform: translateY(-3px);
	}

	/* 3. Hover: lift + a soft light sweep across the image ("scan"). */
	.csa-card__media {
		transition: transform 0.35s ease, box-shadow 0.35s ease;
	}

	.csa-card:hover .csa-card__media {
		transform: translateY(-3px);
		box-shadow: 0 14px 28px -14px rgba(15, 23, 42, 0.45);
	}

	.csa-card__media::after {
		content: '';
		position: absolute;
		inset: 0;
		z-index: 2;
		pointer-events: none;
		background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.22) 50%, transparent 65%);
		transform: translateX(-120%);
	}

	.csa-card:hover .csa-card__media::after {
		transform: translateX(120%);
		transition: transform 0.9s ease;
	}

	/* 4. Topic badge dot: slow, quiet pulse. */
	@keyframes csa-pulse {
		0%, 100% { box-shadow: 0 0 0 0 rgba(3, 105, 161, 0.45); }
		60%      { box-shadow: 0 0 0 6px rgba(3, 105, 161, 0); }
	}

	.csa-topic-dot {
		animation: csa-pulse 2.6s ease-out infinite;
	}
}