/* The original artwork reserves the space and remains the no-JS fallback. */
.hero-wordmark > .hero-waveform {
  position: absolute;
  inset: 0;
  display: none;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.hero-wordmark.waveform-ready {
  background-image: none !important;
}
.hero-wordmark.waveform-ready > .hero-waveform {
  display: block;
}


/* V25: keep the large-wordmark glint strictly inside the real wordmark bounds.
   The moving highlight is masked by the wordmark asset itself, so it stops exactly
   where the letters end instead of sweeping across the whole hero section. */
.hero-wordmark {
  overflow: hidden !important;
  isolation: isolate;
}
.hero-wordmark::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(106deg,
    rgba(255,255,255,0) 36%,
    rgba(185,232,255,.05) 43%,
    rgba(255,255,255,.68) 49%,
    rgba(255,232,186,.18) 54%,
    rgba(255,255,255,0) 61%);
  -webkit-mask-image: url('assets/hero-wordmark-soft.png');
  mask-image: url('assets/hero-wordmark-soft.png');
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  mix-blend-mode: screen;
  transform: translateX(-118%) skewX(-18deg);
  z-index: 2;
  animation: wordmarkGlint 8.8s linear infinite;
}
@keyframes wordmarkGlint {
  0%, 72% { opacity: 0; transform: translateX(-118%) skewX(-18deg); }
  75% { opacity: .16; }
  81% { opacity: .95; }
  88% { opacity: .24; }
  92%, 100% { opacity: 0; transform: translateX(118%) skewX(-18deg); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-wordmark::before { animation: none; opacity: 0; }
}