.hero__kicker,
.hero__title,
.hero__subtitle,
.hero__meta,
.hero__mail-btn {
  animation: fade-up 0.9s ease both;
}

.hero__kicker {
  animation-delay: 0.1s;
}

.hero__title {
  animation-delay: 0.25s;
}

.hero__subtitle {
  animation-delay: 0.4s;
}

.hero__meta {
  animation-delay: 0.55s;
}

.hero__mail-btn {
  animation-delay: 0.35s;
}

.hero__name {
  animation: name-glow 4s ease-in-out infinite;
}

@keyframes name-glow {
  0%,
  100% {
    text-shadow: 0 4px 24px rgba(43, 33, 24, 0.55);
  }
  50% {
    text-shadow:
      0 4px 24px rgba(43, 33, 24, 0.55),
      0 0 8px rgba(255, 248, 231, 0.75),
      0 0 22px rgba(255, 210, 94, 0.7),
      0 0 48px rgba(245, 179, 1, 0.55);
  }
}

.hero__tld {
  color: var(--mel);
  animation: tld-cycle 14s ease-in-out infinite;
}

@keyframes tld-cycle {
  0%,
  11% {
    color: #F5B301;
  }
  14.29%,
  25.29% {
    color: #FFD25E;
  }
  28.57%,
  39.57% {
    color: #FF9F1C;
  }
  42.86%,
  53.86% {
    color: #FF7A2F;
  }
  57.14%,
  68.14% {
    color: #FF5A3C;
  }
  71.43%,
  82.43% {
    color: #FF4D4D;
  }
  85.71%,
  96.71% {
    color: #FF6B6B;
  }
  100% {
    color: #F5B301;
  }
}

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(1.25rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .hero__tld {
    animation: none;
    color: var(--mel);
  }

  .hero__name {
    animation: none;
  }
}