.has-inner-hero-motion .hero-content h1,
.has-inner-hero-motion .about-hero-title { background:none; }
.has-inner-hero-motion .hero-title-line { display:block; overflow:hidden; padding-bottom:.06em; margin-bottom:-.06em; }
.has-inner-hero-motion .hero-title-line>span { display:block; color:transparent; background:linear-gradient(180deg,#fff,#fff0) 0 0/100% calc(130 * var(--u)) no-repeat; background-clip:text; -webkit-background-clip:text; animation:inner-hero-title-in .95s cubic-bezier(.16,1,.3,1) calc(.18s + var(--line-index) * .12s) both; }
.has-inner-hero-motion .hero-subtitle,
.has-inner-hero-motion .about-since { animation:inner-hero-copy-in .9s cubic-bezier(.16,1,.3,1) .38s both; }
.has-inner-hero-motion .hero-translation,
.has-inner-hero-motion .about-year { animation:inner-hero-copy-in .9s cubic-bezier(.16,1,.3,1) .48s both; }
.has-inner-hero-motion .hero-badge { animation:inner-hero-copy-in .9s cubic-bezier(.16,1,.3,1) .58s both; }
@keyframes inner-hero-title-in { from { opacity:0; transform:translateY(105%); } to { opacity:1; transform:translateY(0); } }
@keyframes inner-hero-copy-in { from { opacity:0; transform:translateY(22px); } to { opacity:1; transform:translateY(0); } }
@media(max-width:1023px) {
  /* A source line can wrap to several visual lines on narrow screens. Repeat
     the gradient at the actual inherited line-height so every row is painted.
     .92em is the fallback for browsers without the lh unit. */
  .has-inner-hero-motion .hero-title-line>span { background-size:100% .92em; background-size:100% 1lh; background-repeat:repeat-y; }
}
@media(prefers-reduced-motion:reduce) {
  .has-inner-hero-motion .hero-title-line>span,
  .has-inner-hero-motion .hero-subtitle,
  .has-inner-hero-motion .hero-translation,
  .has-inner-hero-motion .hero-badge,
  .has-inner-hero-motion .about-since,
  .has-inner-hero-motion .about-year { animation:none; opacity:1; transform:none; }
}