.hero h1 {
  color: #fff;
  font-family: 'Anton', Impact, sans-serif;
  font-weight: 400;
  letter-spacing: -.025em;
}

.hero h1 em {
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-style: italic;
  font-weight: inherit;
}

.hero h1.slogan-changing {
  opacity: 0;
  transform: translateY(10px);
}

.hero h1.slogan-enter {
  animation: slogan-enter .55s ease both;
}

@keyframes slogan-enter {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .hero h1.slogan-changing { opacity: 1; transform: none; }
  .hero h1.slogan-enter { animation: none; }
}