/* Hero entry on page load: the sky fades up, then the status line, headline words, button
   and swap widget rise in out of a blur, one after another. route.js waits for the widget. */

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--muted);
  pointer-events: none;
}
.hero .stage { position: relative; z-index: 1; }

@media (prefers-reduced-motion: no-preference) {
  .hero::before { animation: sky-in 1.8s cubic-bezier(.22, 1, .36, 1) both; }
  .hero .nav { animation: fade-in .8s cubic-bezier(.22, 1, .36, 1) .1s both; }

  .hero .spec-status,
  .headline .word,
  .hero .btn-hero,
  .widget > * { animation: rise-in .9s cubic-bezier(.22, 1, .36, 1) both; }

  .hero .spec-status { animation-delay: .05s; }
  .headline .word { display: inline-block; animation-delay: calc(120ms + var(--i) * 70ms); }
  .hero .btn-hero { animation-delay: .58s; }
  .widget .swap { animation-delay: .72s; }
  .widget .routing { animation-delay: .84s; }
}
@media (prefers-reduced-motion: reduce) {
  .hero::before { display: none; }
}

@keyframes sky-in { to { opacity: 0; } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes rise-in { from { opacity: 0; transform: translateY(14px); filter: blur(6px); } }