html {
  scroll-behavior: smooth;
}

body {
  background: #ffffff;
  color: #334155;
  font-family: var(--font-body, "Inter", sans-serif);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display, "Plus Jakarta Sans", sans-serif);
  color: #0f172a;
}

:focus-visible {
  outline: 2px solid #0d9488;
  outline-offset: 3px;
  border-radius: 4px;
}

@keyframes fade-up {
  0% { opacity: 0; transform: translateY(14px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes wiggle {
  0%, 100% { transform: rotate(0deg); }
  10% { transform: rotate(-14deg); }
  20% { transform: rotate(10deg); }
  30% { transform: rotate(-6deg); }
  40% { transform: rotate(0deg); }
}

.animate-fade-up {
  animation: fade-up 0.6s ease-out forwards;
}

.animate-wiggle {
  animation: wiggle 2.2s ease-in-out infinite;
}

/* Simple staggered entrance for the hero, replacing the Framer Motion
   orchestration in the React version. Each child's delay is set via the
   --delay custom property in the markup. */
.hero-fade {
  opacity: 0;
  animation: fade-up 0.55s ease-out forwards;
  animation-delay: var(--delay, 0s);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}