/* Fade in at the final position so glyphs never shift between pixel positions. */
@keyframes wg-hero-title-fade {
  from { opacity: .08; }
  to { opacity: 1; }
}

.brand-hero .hero-copy > #hero-title,
.hero .hero-content > #hero-title { transform: none; }

@media (prefers-reduced-motion: no-preference) {
  .brand-hero .hero-copy > #hero-title,
  .hero .hero-content > #hero-title {
    animation: wg-hero-title-fade 2.2s linear both;
  }
  html.wg-hero-font-loading .brand-hero .hero-copy > #hero-title,
  html.wg-hero-font-loading .hero .hero-content > #hero-title {
    animation: none;
    opacity: 0;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .brand-hero .hero-copy > #hero-title,
  .hero .hero-content > #hero-title { animation: none; opacity: 1; transform: none; }
}