/* Optional silver finish. Remove this stylesheet to restore the original palette. */
.hero-name,
.hero-name .title-letter {
  background-image:
    linear-gradient(110deg, transparent 40%, #ffffffed 49%, transparent 58%),
    linear-gradient(
      180deg,
      #fff 5%,
      #c5c8cc 35%,
      #f8f9fa 49%,
      #a4a8ae 54%,
      #e8eaed 80%,
      #fff 100%
    );
  background-size:
    300% 100%,
    100% 100%;
  background-position:
    150% 0,
    0 0;
  background-repeat: no-repeat;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* The split title gets its own metallic fill on each animated letter. */
.hero-name:has(.title-letter) {
  background: none;
}

.motion-ready .hero-name .title-letter {
  animation: silver-title 9s ease-in-out infinite;
}

.hero-name .title-letter:nth-child(2) {
  animation-delay: 65ms;
}
.hero-name .title-letter:nth-child(3) {
  animation-delay: 130ms;
}
.hero-name .title-letter:nth-child(4) {
  animation-delay: 195ms;
}
.hero-name .title-letter:nth-child(5) {
  animation-delay: 260ms;
}
.hero-name .title-letter:nth-child(6) {
  animation-delay: 325ms;
}
.hero-name .title-letter:nth-child(7) {
  animation-delay: 390ms;
}
.hero-name .title-letter:nth-child(8) {
  animation-delay: 455ms;
}
.hero-name .title-letter:nth-child(9) {
  animation-delay: 520ms;
}
.hero-name .title-letter:nth-child(10) {
  animation-delay: 585ms;
}

.site-header .brand::after {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(
    110deg,
    transparent 42%,
    #ffffffe0 49%,
    transparent 56%
  );
  background-size: 300% 100%;
  background-position: 150% 0;
  mask-image: url("/logo.webp");
  mask-mode: luminance;
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
  content: "";
  pointer-events: none;
}

.motion-ready .site-header .brand::after {
  animation: silver-crest 11s ease-in-out infinite;
}

.header-actions .header-entry {
  border-color: transparent;
  background:
    linear-gradient(#080808, #080808) padding-box,
    linear-gradient(
        125deg,
        #f5f6f7,
        #73777e 30%,
        #dedfe1 56%,
        #555a61 82%,
        #f5f6f7
      )
      border-box;
}

.header-actions .header-entry:hover {
  background: var(--text);
  color: #000;
}

.featured-prize {
  box-shadow: inset 0 0 0 1px #d6d9df45;
}

.silver-reflection {
  position: absolute;
  z-index: 1;
  top: -40%;
  left: -60%;
  width: 35%;
  height: 180%;
  background: linear-gradient(
    90deg,
    transparent,
    #ffffff38,
    #ffffff65,
    transparent
  );
  transform: skewX(-22deg);
  pointer-events: none;
}

a:hover .silver-reflection,
a:focus-visible .silver-reflection {
  animation: silver-photo 1.1s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes silver-title {
  0%,
  65% {
    background-position:
      150% 0,
      0 0;
  }
  85%,
  100% {
    background-position:
      -65% 0,
      0 0;
  }
}

@keyframes silver-crest {
  0%,
  70% {
    background-position: 150% 0;
  }
  87%,
  100% {
    background-position: -65% 0;
  }
}

@keyframes silver-photo {
  from {
    transform: translateX(0) skewX(-22deg);
  }
  to {
    transform: translateX(600%) skewX(-22deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-header .brand::after,
  .silver-reflection {
    display: none;
  }

  .hero-name,
  .hero-name .title-letter {
    animation: none !important;
  }
}

.motion-ready .featured-image::before,
.motion-ready .featured-image::after {
  z-index: 3;
}