index.css

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

/* ─── Global resets & base ───────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: 'DM Sans', sans-serif;
  background-color: #f8fafc;
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4, .font-display {
  font-family: 'Syne', sans-serif;
}

#root { min-height: 100vh; }

/* ─── Page transition animations ────────────────────────────── */
.fade-in  { animation: fadeIn 0.45s ease-out forwards; }
.slide-up { animation: slideUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards; }

@keyframes fadeIn  { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }

.stagger-1 { animation-delay: 0.05s; opacity: 0; }
.stagger-2 { animation-delay: 0.12s; opacity: 0; }
.stagger-3 { animation-delay: 0.19s; opacity: 0; }
.stagger-4 { animation-delay: 0.26s; opacity: 0; }

/* ─── Marquee ────────────────────────────────────────────────── */
@keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 50s linear infinite;
}
.marquee-track:hover { animation-play-state: paused; }