/* =============================================================================
 * animations.css · Keyframes and animation utilities
 * ─────────────────────────────────────────────────────────────────────────────
 * Keyframes and .animate-* classes for layout micro-interactions.
 * ========================================================================== */

/* Heart pop (like button) */
@keyframes heart-pop {
	0% {
		transform: scale(1);
	}
	35% {
		transform: scale(1.35);
	}
	70% {
		transform: scale(0.92);
	}
	100% {
		transform: scale(1);
	}
}
.animate-heart-pop {
	animation: var(--animate-heart-pop);
}

/* Ring ripple (around like button) */
@keyframes ring-ripple {
	0% {
		opacity: 0.6;
		transform: scale(0.4);
	}
	100% {
		opacity: 0;
		transform: scale(2.2);
	}
}
.animate-ring-ripple {
	animation: var(--animate-ring-ripple);
}

/* Shimmer skeleton */
@keyframes shimmer {
	0% {
		background-position: -12.5rem 0;
	}
	100% {
		background-position: 12.5rem 0;
	}
}
.animate-shimmer {
	background: linear-gradient(
		90deg,
		var(--surface-2) 0%,
		var(--surface-3) 50%,
		var(--surface-2) 100%
	);
	background-size: 12.5rem 100%;
	animation: var(--animate-shimmer);
}

/* Reading progress indeterminate sweep */
@keyframes progress-loop {
	0% {
		transform: translateX(-100%);
	}
	100% {
		transform: translateX(400%);
	}
}
.animate-progress-loop {
	animation: var(--animate-progress-loop);
}

/* Toast slide-in / out */
@keyframes toast-in {
	0% {
		transform: translateY(0.5rem);
		opacity: 0;
	}
	15% {
		transform: translateY(0);
		opacity: 1;
	}
	85% {
		transform: translateY(0);
		opacity: 1;
	}
	100% {
		transform: translateY(-0.25rem);
		opacity: 0;
	}
}
.animate-toast-in {
	animation: var(--animate-toast-in);
}

/* Fade-up entry - used by sections on first paint */
@keyframes fade-up {
	0% {
		opacity: 0;
		transform: translateY(0.75rem);
		filter: blur(4px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
		filter: blur(0);
	}
}
.animate-fade-up {
	animation: var(--animate-fade-up);
}

/* Slide-in from left / right - used by drawers, sidebar */
@keyframes slide-in-left {
	from {
		transform: translateX(-100%);
	}
	to {
		transform: translateX(0);
	}
}
@keyframes slide-in-right {
	from {
		transform: translateX(100%);
	}
	to {
		transform: translateX(0);
	}
}
.animate-slide-in-left {
	animation: var(--animate-slide-in-left);
}
.animate-slide-in-right {
	animation: var(--animate-slide-in-right);
}

/* Scale-in (popovers, dropdowns) */
@keyframes scale-in {
	from {
		opacity: 0;
		transform: scale(0.96);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}
.animate-scale-in {
	animation: var(--animate-scale-in);
	transform-origin: top center;
}

/* Floating overlay animations (popover, tooltip, dropdown, select) */
@keyframes ml-floating-enter {
	from {
		opacity: 0;
		transform: scale(0.96);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes ml-floating-exit {
	from {
		opacity: 1;
		transform: scale(1);
	}
	to {
		opacity: 0;
		transform: scale(0.96);
	}
}

@keyframes ml-floating-slide-top-enter {
	from {
		opacity: 0;
		transform: translateY(4px) scale(0.96);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

@keyframes ml-floating-slide-top-exit {
	from {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
	to {
		opacity: 0;
		transform: translateY(4px) scale(0.96);
	}
}

@keyframes ml-floating-slide-bottom-enter {
	from {
		opacity: 0;
		transform: translateY(-4px) scale(0.96);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

@keyframes ml-floating-slide-bottom-exit {
	from {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
	to {
		opacity: 0;
		transform: translateY(-4px) scale(0.96);
	}
}

@keyframes ml-floating-slide-left-enter {
	from {
		opacity: 0;
		transform: translateX(4px) scale(0.96);
	}
	to {
		opacity: 1;
		transform: translateX(0) scale(1);
	}
}

@keyframes ml-floating-slide-left-exit {
	from {
		opacity: 1;
		transform: translateX(0) scale(1);
	}
	to {
		opacity: 0;
		transform: translateX(4px) scale(0.96);
	}
}

@keyframes ml-floating-slide-right-enter {
	from {
		opacity: 0;
		transform: translateX(-4px) scale(0.96);
	}
	to {
		opacity: 1;
		transform: translateX(0) scale(1);
	}
}

@keyframes ml-floating-slide-right-exit {
	from {
		opacity: 1;
		transform: translateX(0) scale(1);
	}
	to {
		opacity: 0;
		transform: translateX(-4px) scale(0.96);
	}
}

/* Spin (loading) */
@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}
.animate-spin {
	animation: spin 0.8s linear infinite;
}

/* Pulse (status dot - Open to work) */
@keyframes pulse {
	0%,
	100% {
		opacity: 1;
	}
	50% {
		opacity: 0.5;
	}
}
.animate-pulse {
	animation: pulse 2s var(--ease-in-out) infinite;
}

/* Glow pulse (status dot with shadow ring) */
@keyframes glow-pulse {
	0%,
	100% {
		box-shadow: 0 0 0 0 var(--accent-soft);
	}
	50% {
		box-shadow: 0 0 0 6px transparent;
	}
}
.animate-glow-pulse {
	animation: var(--animate-glow-pulse);
}

/* Entry animation - your existing @starting-style pattern, preserved */
@layer utilities {
	.animate-entry {
		opacity: 1;
		transform: translateY(0);
		transition:
			opacity var(--duration-long) var(--ease-out),
			transform var(--duration-long) var(--ease-out-expo);

		@starting-style {
			opacity: 0;
			transform: translateY(0.5rem);
		}
	}
}