@tailwind base;
@tailwind components;
@tailwind utilities;

html, body { height: 100%; }
body { font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; }

/* Custom utilities */
.container-max { @apply max-w-7xl mx-auto px-4; }

/* Smooth scrolling for in-page anchors */
html { scroll-behavior: smooth; }

/* Subtle hero background animations */
@keyframes drift {
	0% { transform: translate3d(0,0,0) scale(1) rotate(0deg); }
	50% { transform: translate3d(10px,-8px,0) scale(1.02) rotate(8deg); }
	100% { transform: translate3d(0,0,0) scale(1) rotate(0deg); }
}

.animate-drift-slow {
	animation: drift 16s ease-in-out infinite;
	will-change: transform;
}

.animate-drift-slower {
	animation: drift 22s ease-in-out infinite;
	will-change: transform;
}

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 500ms ease, transform 600ms ease; }
.reveal-visible { opacity: 1; transform: translateY(0); }

/* Respect user motion preferences */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.animate-drift-slow, .animate-drift-slower { animation: none !important; }
	.reveal { opacity: 1; transform: none; transition: none; }
}

/* Performance: avoid rendering off-screen content until needed */
.content-auto {
	content-visibility: auto;
	contain-intrinsic-size: 1px 1000px; /* reserve space to prevent big jumps */
}