.stellar-header-wordmark {
  --stellar-silver-base: #8792a3;
  --stellar-silver-mid: #c5cedc;
  --stellar-silver-peak: #fff;
  display: block;
  position: relative;
  width: 136px;
  height: 58px;
  flex-shrink: 0;
  isolation: isolate;
  pointer-events: none;
}

/* Both pages use these same layers. Keep the original artwork untouched. */
.stellar-header-wordmark::before,
.stellar-header-wordmark::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  aspect-ratio: 2;
  transform: translateY(-50%);
}

.stellar-header-wordmark::before {
  background: url("/canvas/brand/stellarhub-orbit-motion.svg") center / contain no-repeat;
}

.stellar-header-wordmark::after {
  /* Follow the tops of the brush lettering, excluding the baked-in orbit/star.
     The original Chinese and English remain one luminance mask. */
  clip-path: polygon(9% 59%, 15% 45%, 18% 42%, 18.5% 30%, 23% 33%, 21.5% 39%, 36% 35%, 39% 30%, 49% 26%, 52% 28%, 99% 26%, 99% 95%, 9% 95%);
  mask-image: url("/canvas/brand/stellarhub-orbit-silver.png");
  -webkit-mask-image: url("/canvas/brand/stellarhub-orbit-silver.png");
  mask-mode: luminance;
  mask-size: 100% 100%;
  mask-position: center;
  mask-repeat: no-repeat;
  /* Move the actual ink color, not a screen blend over already-white ink. */
  background: linear-gradient(110deg,
    var(--stellar-silver-base) 0%,
    var(--stellar-silver-base) 39%,
    var(--stellar-silver-mid) 45%,
    var(--stellar-silver-peak) 49%,
    var(--stellar-silver-peak) 51%,
    var(--stellar-silver-mid) 55%,
    var(--stellar-silver-base) 61%,
    var(--stellar-silver-base) 100%);
  background-size: 280% 100%;
  background-position: 100% 50%;
  animation: stellar-header-silver 7.2s linear infinite;
}

@keyframes stellar-header-silver {
  0% { background-position: 100% 50%; }
  88%, 100% { background-position: 0% 50%; }
}

html:not(.dark) .stellar-header-wordmark {
  --stellar-silver-base: #3f4d62;
  --stellar-silver-mid: #79899e;
  --stellar-silver-peak: #b0bdcf;
}
html:not(.dark) .stellar-header-wordmark::before {
  filter: drop-shadow(0 0 1px #536d91);
}
/* The frozen Hero is dark even when its document has no .dark class. */
html .topbar .stellar-header-wordmark,
html .stellar-home-nav .stellar-header-wordmark {
  --stellar-silver-base: #b9c6d8;
  --stellar-silver-mid: #eaf2ff;
  --stellar-silver-peak: #fff;
}
html .topbar .stellar-header-wordmark::before { filter: none; }

@media (max-width: 600px) {
  .stellar-header-wordmark { width: 110px; height: 52px; }
}
@media (prefers-reduced-motion: reduce) {
  /* Embedded SVG image documents do not reliably inherit media emulation.
     Restore the original static orbit/star as part of the artwork mask. */
  .stellar-header-wordmark::before { display: none; }
  .stellar-header-wordmark::after {
    animation: none;
    clip-path: none;
    background: linear-gradient(115deg, var(--stellar-silver-base), var(--stellar-silver-mid), var(--stellar-silver-base));
  }
}

html .topbar .stellar-header-wordmark::after,
html .stellar-home-nav .stellar-header-wordmark::after {
  animation: stellar-header-silver 6s linear infinite, stellar-header-glow 6s ease-in-out infinite;
}
@keyframes stellar-header-glow {
  0%, 100% { filter: drop-shadow(0 0 1px #dce7ff33); }
  35%, 65% { filter: drop-shadow(0 0 2px #edf4ffb3) brightness(1.16); }
}
@media (prefers-reduced-motion: reduce) {
  html .topbar .stellar-header-wordmark::after,
  html .stellar-home-nav .stellar-header-wordmark::after { animation: none; }
}