/* A brief, non-blocking reveal for the published Radix hero. */
@keyframes radix-intro-reveal {
  from { opacity: 0; filter: blur(10px); transform: translate3d(0, 12px, 0); }
  to { opacity: 1; filter: blur(0); transform: translate3d(0, 0, 0); }
}
@keyframes radix-intro-mark {
  from { opacity: 0; filter: blur(7px); transform: scale(.82) rotate(-5deg); }
  to { opacity: 1; filter: blur(0); transform: scale(1) rotate(0); }
}

.site-header .brand .mark {
  animation: radix-intro-mark .58s cubic-bezier(.2,.8,.2,1) both;
}
.site-header .brand > span:last-child {
  animation: radix-intro-reveal .58s cubic-bezier(.2,.8,.2,1) .12s both;
}
.hero-stack-ready h1.hero-in {
  opacity: 1;
  transform: none;
  animation: none;
}
.hero-stack-ready h1 .hero-primary,
.hero-stack-ready h1 .hero-secondary,
.hero-stack-ready .hero-lead.hero-in,
.hero-stack-ready .hero-actions.hero-in,
.hero-stack-ready .hero-features.hero-in,
.hero-stack-ready .hero-product.hero-in {
  animation: radix-intro-reveal .7s cubic-bezier(.2,.8,.2,1) both;
}
.hero-stack-ready h1 .hero-primary { animation-delay: .16s; }
.hero-stack-ready h1 .hero-secondary { animation-delay: .27s; }
.hero-stack-ready .hero-product.hero-in { animation-delay: .28s; }
.hero-stack-ready .hero-lead.hero-in { animation-delay: .38s; }
.hero-stack-ready .hero-actions.hero-in { animation-delay: .49s; }
.hero-stack-ready .hero-features.hero-in { animation-delay: .61s; }

@media (max-width:600px) {
  .hero-stack-ready .hero-product.hero-in { animation-delay: .12s; }
  .hero-stack-ready h1 .hero-primary { animation-delay: .28s; }
  .hero-stack-ready h1 .hero-secondary { animation-delay: .37s; }
  .hero-stack-ready .hero-lead.hero-in { animation-delay: .47s; }
  .hero-stack-ready .hero-actions.hero-in { animation-delay: .56s; }
  .hero-stack-ready .hero-features.hero-in { animation-delay: .64s; }
}

@media (prefers-reduced-motion:reduce) {
  .site-header .brand .mark,
  .site-header .brand > span:last-child,
  .hero-stack-ready h1 .hero-primary,
  .hero-stack-ready h1 .hero-secondary,
  .hero-stack-ready .hero-lead.hero-in,
  .hero-stack-ready .hero-actions.hero-in,
  .hero-stack-ready .hero-features.hero-in,
  .hero-stack-ready .hero-product.hero-in {
    animation: none;
    opacity: 1;
    filter: none;
    transform: none;
  }
}
