/* Minimal animation utilities (ensures animations even without Tailwind plugins).
   Extracted from layout/header.php so it's a real cacheable stylesheet instead
   of an inline <style> block re-sent uncompressed with every HTML response. */
html { scroll-behavior: smooth; }
@keyframes fade-in-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fade-in-left { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: translateX(0); } }
@keyframes fade-in-right { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: translateX(0); } }
@keyframes float-soft { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.animate-fade-in-up { animation: fade-in-up .6s ease-out both; }
.animate-fade-in-left { animation: fade-in-left .6s ease-out both; }
.animate-fade-in-right { animation: fade-in-right .6s ease-out both; }
.animate-float-soft { animation: float-soft 4s ease-in-out infinite; }
.delay-100 { animation-delay: .1s; }
.delay-200 { animation-delay: .2s; }
.delay-300 { animation-delay: .3s; }
.delay-500 { animation-delay: .5s; }
.delay-1000 { animation-delay: 1s; }
@media (prefers-reduced-motion: reduce) {
  .animate-fade-in-up, .animate-fade-in-left, .animate-fade-in-right, .animate-float-soft { animation: none !important; }
  html { scroll-behavior: auto !important; }
}

/* Subtle background patterns */
.bg-grid-pattern {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M0 39.5h40M39.5 0v40' stroke='%2394a3b8' stroke-opacity='0.15'/%3E%3C/svg%3E");
  background-size: 40px 40px;
}
.bg-dots-pattern {
  background-image: radial-gradient(rgba(148,163,184,0.15) 1px, transparent 1px);
  background-size: 20px 20px;
}
.bg-noise-overlay {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='60' height='60' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  background-size: 60px 60px;
}