.hero-title {
  display: grid;
  width: max-content;
  max-width: 100%;
  animation: hero-title-fade 6s ease-in-out infinite;
  will-change: opacity, transform, filter;
}

.hero-title span,
.hero-title em {
  display: block;
}

.hero-title em {
  animation: hero-aura-glow 6s ease-in-out infinite;
}

@keyframes hero-title-fade {
  0% {
    opacity: 0;
    transform: translateY(22px);
    filter: blur(8px);
  }
  14%, 72% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
  88%, 100% {
    opacity: 0;
    transform: translateY(-14px);
    filter: blur(6px);
  }
}

@keyframes hero-aura-glow {
  0%, 100% { text-shadow: 0 0 0 rgba(200, 169, 106, 0); }
  32%, 68% { text-shadow: 0 0 26px rgba(200, 169, 106, .24); }
}

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