/* A quiet travelling highlight in the original, accessible brand text. */
.brand-name {
  color: var(--text, #dbe1e7);
}

@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .brand-name {
    /* Both ends stay neutral, so the paused/no-script state is fully legible. */
    background-image: linear-gradient(
      108deg,
      var(--text, #dbe1e7) 0%,
      var(--text, #dbe1e7) 40%,
      #ddd7ca 44%,
      #e7c89a 47%,
      #fff4df 49%,
      #fff9ee 50%,
      #e7c89a 52%,
      #ddd7ca 56%,
      var(--text, #dbe1e7) 60%,
      var(--text, #dbe1e7) 100%
    );
    background-repeat: no-repeat;
    background-size: 300% 100%;
    background-position: 100% 50%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: darkdusk-brand-glint 8.4s linear infinite;
    animation-play-state: paused;
  }

  .brand[data-brand-active="true"] .brand-name {
    animation-play-state: running;
  }

  .fx-static .brand-name {
    animation: none;
    background-position: 100% 50%;
  }
}

@keyframes darkdusk-brand-glint {
  0%, 50% { background-position: 100% 50%; }
  88%, 100% { background-position: 0% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .brand-name {
    animation: none;
    background-position: 100% 50%;
  }
}

@media (forced-colors: active) {
  .brand-name {
    background: none;
    -webkit-text-fill-color: CanvasText;
    color: CanvasText;
    animation: none;
  }
}