/**
 * Silber: Basis + Metall + Maus-Radial + dauerndes „Funkeln“ (schmaler Glanzstreifen).
 * Alle Verläufe deckend, background-color als Unterlage → Buchstaben bleiben sichtbar.
 */

@keyframes silver-funkeln {
  0%,
  100% {
    background-position: 22% 50%, 0 0, center center;
  }
  50% {
    background-position: 78% 50%, 0 0, center center;
  }
}

.hero-name,
.hero-title em,
.silver-shimmer-text {
  position: relative;
  display: inline-block;
  color: #6b6b6b;
  -webkit-text-stroke: 0.35px rgba(70, 70, 70, 0.35);
  transform: translateZ(0);

  background-color: #6b6b6b;
  /* Oben nach unten: Funkel-Streifen → Maus-Licht → Metall */
  background-image:
    linear-gradient(
      102deg,
      #787878 0%,
      #787878 40%,
      #e4e4e4 50%,
      #787878 60%,
      #787878 100%
    ),
    radial-gradient(
      ellipse 55% 130% at var(--lamp-x, 48%) var(--lamp-y, 42%),
      #f0f0f0 0%,
      #dcdcdc 12%,
      #b4b4b4 28%,
      #8f8f8f 48%,
      #707070 65%,
      #656565 82%,
      #5c5c5c 100%
    ),
    linear-gradient(
      118deg,
      #3a3a3a 0%,
      #5a5a5a 10%,
      #949494 22%,
      #c8c8c8 34%,
      #f2f2f2 42%,
      #ffffff 46%,
      #dedede 52%,
      #9a9a9a 64%,
      #bcbcbc 76%,
      #ebebeb 86%,
      #4a4a4a 100%
    );
  background-size:
    260% 100%,
    180% 180%,
    100% 100%;
  background-position: 22% 50%, 0 0, center center;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-blend-mode: soft-light, soft-light, normal;

  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;

  animation: silver-funkeln 4.8s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .hero-name,
  .hero-title em,
  .silver-shimmer-text {
    --lamp-x: 48%;
    --lamp-y: 42%;
    animation: none;
    background-position: 50% 50%, 0 0, center center;
  }
}