/* ==========================================================================
   Micro-animations and Transitions
   All animations respect prefers-reduced-motion
   IMPORTANT: Content is always visible, animations are optional enhancements
   ========================================================================== */

/* Smooth color transitions for all interactive elements */
a,
button {
	transition-property: color, background-color, border-color, text-decoration-color;
	transition-duration: var(--transition-fast);
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Navigation removed for minimalist design */
/* Logo - no animation needed for minimalist design */

/* Button transitions */
.button {
	transition: all var(--transition-fast);
}

/* Only apply advanced animations if user hasn't requested reduced motion */
@media (prefers-reduced-motion: no-preference) {

	/* Fade-in on scroll animation - added by JavaScript */
	.fade-in {
		animation: fadeInUp var(--transition-slow) ease-out forwards;
	}

	@keyframes fadeInUp {
		from {
			opacity: 0;
			transform: translateY(20px);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	/* Focus ring animation */
	:focus-visible {
		animation: focusRing 0.5s ease-out;
	}

	@keyframes focusRing {
		0% {
			outline-offset: 0;
			outline-width: 0;
		}
		50% {
			outline-offset: 0.5rem;
		}
		100% {
			outline-offset: 0.25rem;
		}
	}

	/* Logo hover - removed for minimalist design */

	/* Button hover effects */
	.button:hover {
		transform: translateY(-1px);
		box-shadow: var(--shadow-md);
	}

	.button:active {
		transform: translateY(0);
	}
}

/* Disable all animations for reduced motion preference */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}

	.fade-in {
		opacity: 1 !important;
		transform: none !important;
		animation: none !important;
	}
}