Hero Animated

<section class="ws-hero relative overflow-hidden bg-[var(--ws-hero-bg)] text-[var(--ws-hero-text)]">
  <div class="absolute inset-0 bg-[radial-gradient(circle_at_top_right,rgba(56,189,248,0.25),transparent_45%),radial-gradient(circle_at_bottom_left,rgba(99,102,241,0.3),transparent_50%)]"></div>
  <div class="relative mx-auto max-w-7xl px-6 py-20 text-center lg:py-28">
    <p class="animate-fade-in mb-4 inline-flex rounded-full border border-white/15 bg-white/5 px-3 py-1 text-xs font-medium uppercase tracking-[0.2em] text-[var(--ws-hero-text-soft)]">Hero Animated</p>
    <h1 class="animate-fade-in-up text-balance text-4xl font-bold tracking-tight sm:text-5xl lg:text-6xl" style="animation-delay: 120ms;">
      Make your design system feel alive.
    </h1>
    <p class="animate-fade-in-up mx-auto mt-5 max-w-2xl text-pretty text-lg text-[var(--ws-hero-text-soft)]" style="animation-delay: 220ms;">
      This variant keeps the base structure and adds lightweight entrance motion for headline, copy, and actions.
    </p>
    <div class="animate-fade-in-up mt-8 flex flex-wrap justify-center gap-3" style="animation-delay: 300ms;">
      <a href="#" class="rounded-xl bg-indigo-300 px-5 py-3 text-sm font-semibold text-slate-900 transition hover:bg-indigo-200">Launch now</a>
      <a href="#" class="rounded-xl border border-white/20 bg-white/5 px-5 py-3 text-sm font-semibold text-slate-100 transition hover:bg-white/10">See examples</a>
    </div>
  </div>
</section>