/**
 * Global animation keyframes — Phase 2A.5 §12. Subtle, purposeful only.
 * Scroll-triggered reveal-on-enter transitions (paired with
 * assets/js/scroll-reveal.js) live in scroll-reveal.css, kept separate
 * since that system is JS-driven and opt-in per element rather than a
 * pure-CSS keyframe.
 */

@keyframes lbm-fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

.lbm-fade-in {
	animation: lbm-fade-in var(--duration-fade) var(--ease-fade) both;
}

/* Skeleton loading state — calmer than a spinner, used for lazy-loaded
   image placeholders per the Phase 2A performance strategy. */
@keyframes lbm-skeleton-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.6; }
}

.lbm-skeleton {
	background-color: var(--color-surface);
	position: relative;
	overflow: hidden;
	animation: lbm-skeleton-pulse 1.6s ease-in-out infinite;
}

/* Dark/light toggle cross-fade — applied only for the brief moment the
   theme actually switches (class added/removed by theme-toggle.js), not
   left on permanently. A permanent global "transition: color/background
   on everything" rule would fight the specific hover/motion timings
   already tuned elsewhere in the component CSS; scoping it to a
   short-lived class avoids that while still giving every element a soft
   color cross-fade instead of an instant, jarring swap. Color/background/
   border only — layout and spacing are never part of this rule. */
.lbm-theme-transition,
.lbm-theme-transition *,
.lbm-theme-transition *::before,
.lbm-theme-transition *::after {
	transition: background-color var(--duration-fade) var(--ease-fade),
		color var(--duration-fade) var(--ease-fade),
		border-color var(--duration-fade) var(--ease-fade),
		box-shadow var(--duration-fade) var(--ease-fade) !important;
}

@media (prefers-reduced-motion: reduce) {
	.lbm-fade-in {
		animation: none;
	}

	.lbm-skeleton {
		animation: none;
	}

	.lbm-theme-transition,
	.lbm-theme-transition *,
	.lbm-theme-transition *::before,
	.lbm-theme-transition *::after {
		transition: none !important;
	}
}