.hero-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.35em);
  animation: hero-in 280ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(var(--i) * 36ms);
}
.hero-after {
  opacity: 0;
  transform: translateY(10px);
  animation: hero-in 320ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.hero-lead { animation-delay: 400ms; }
.hero-actions { animation-delay: 500ms; }
#hero { background: #172554; }
#hero h1 {
  text-wrap: wrap;
  filter:
    drop-shadow(0 0 0 #c0c0c0)
    drop-shadow(0 0.01em 0 #a2a2a2)
    drop-shadow(0 0.031em 0 #666666)
    drop-shadow(0 0.042em 0.01em #00000033)
    drop-shadow(0 0.083em 0.33em #000000);
}
.hero-bg {
  transform: scale(1.03);
  animation: hero-bg 2700ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes hero-bg {
  to { transform: scale(1); }
}
@keyframes hero-in {
  to { opacity: 1; transform: none; }
}
.hero-rotate {
  display: block;
}
.hero-rotate-clip {
  display: inline;
}
.hero-ch {
  position: relative;
  text-shadow: none;
}
#hero h1 .hero-ch.is-off {
  color: transparent;
}
.hero-caret {
  position: absolute;
  left: calc(100% + 0.08em);
  bottom: 0.14em;
  width: 0.07em;
  height: 0.72em;
  background: currentColor;
  pointer-events: none;
  animation: hero-caret 1s steps(1) infinite;
}
@keyframes hero-caret {
  50% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-word, .hero-after, .hero-bg {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .hero-caret {
    display: none;
  }
}