.hero .hero-copy h1 em {
  display: inline-block;
  max-width: 100%;
  animation: hero-line-reveal 850ms cubic-bezier(.22, 1, .36, 1) both;
}

@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .hero .hero-copy h1 em {
    background-image: linear-gradient(110deg, #20577e 15%, #317c92 35%, #20577e 50%, #317c92 65%, #20577e 85%);
    background-size: 240% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    animation: hero-line-reveal 850ms cubic-bezier(.22, 1, .36, 1) both,
      hero-line-colour 6s ease-in-out 850ms infinite;
  }
}

@keyframes hero-line-reveal {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes hero-line-colour {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .hero .hero-copy h1 em { animation: none; }
}