/**
 * WPU Options — Load More.
 *
 * The button lives inside the original `.x-paginate-inner`, so it inherits the
 * archive's pagination link styling for free — that styling is applied via
 * `.x-paginate-inner > *`, so being a direct child is all it takes. It must NOT
 * carry Pro's `page-numbers` class (that would collide with CS Forms' pagination
 * click binding — see load-more.js), and it doesn't need it: nothing keys off
 * that class. These rules only add cursor/busy affordances and the optional
 * fade-in for appended items. Keep this minimal — per-site visual tuning belongs
 * in Cornerstone, not here.
 */

.wpu-load-more-btn {
	cursor: pointer;
}

.wpu-load-more-btn.is-loading {
	opacity: 0.65;
	pointer-events: none;
}

/* Optional fade-in for appended items (cfg.fade). */
.wpu-load-more-item {
	animation: wpu-load-more-fade 0.4s ease both;
}

@keyframes wpu-load-more-fade {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wpu-load-more-item {
		animation: none;
	}
}

/*
 * Force appended items visible on Cornerstone effect grids.
 *
 * Cornerstone's effect runtime (x.js) re-parks appended nodes in x-effect-exit
 * (opacity:0) and wipes any inline styles we set, and the resting opacity may
 * itself be 0. `opacity:1 !important` beats the non-important exit rule and
 * survives x.js, so the posts reliably appear. No reveal animation — keeping it
 * simple and robust while the site's own entrance effect is in flux.
 */
.wpu-lm-reveal {
	opacity: 1 !important;
}

/*
 * Same job as .wpu-lm-reveal, but visible: the items fade and rise instead of
 * appearing at once. Used on effect grids when the fade option is on.
 *
 * It carries no `opacity: 1 !important` on purpose, because an important
 * declaration cannot be animated — that is exactly why the plain class above
 * shows nothing happening. A filled animation sits ABOVE normal author rules in
 * the cascade (including x.js's inline styles), so it still beats the
 * non-important `x-effect-exit` opacity:0, and `both` keeps the final frame.
 * The `!important` here protects the animation itself, not the opacity.
 */
.wpu-lm-reveal--fade {
	animation: wpu-lm-rise 0.45s ease both !important;
}

@keyframes wpu-lm-rise {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/*
 * Reduced motion must NOT simply drop the animation: with no animation and no
 * important opacity, the item would fall back to the exit rule and stay
 * invisible. Kill the movement, keep the visibility.
 */
@media (prefers-reduced-motion: reduce) {
	.wpu-lm-reveal--fade {
		animation: none !important;
		opacity: 1 !important;
	}
}