/* ============================================================
   Tagline shimmer — "for humans and their agents."  (OPTIONAL / SELF-CONTAINED)
   To remove entirely:
     1. delete this file
     2. remove its <link> in index.html
     3. unwrap the <span class="tagline-shimmer"> in index.html
   Falls back to normal faint tagline text when the browser lacks
   background-clip:text OR the user prefers reduced motion.
   ============================================================ */

/* Two-tone: base matches the faint tagline; glow is only slightly brighter.
   Defaults first, then light-dark() override for capable browsers. */
.tagline-shimmer {
  --shimmer-base: rgba(0, 0, 0, 0.10);
  --shimmer-glow: rgba(0, 0, 0, 0.22);
}
@supports (color: light-dark(#fff, #000)) {
  .tagline-shimmer {
    --shimmer-base: light-dark(rgba(0,0,0,0.10), rgba(255,255,255,0.15));
    --shimmer-glow: light-dark(rgba(0,0,0,0.22), rgba(255,255,255,0.30));
  }
}

/* Only apply the transparent text-clip when BOTH the feature is supported and
   motion is welcome — otherwise the span stays plain inherited text. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  @media (prefers-reduced-motion: no-preference) {
    .tagline-shimmer {
      background: linear-gradient(
        100deg,
        var(--shimmer-base) 40%,
        var(--shimmer-glow) 50%,
        var(--shimmer-base) 60%
      );
      background-size: 200% auto;
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      color: transparent;
      animation: tagline-shimmer 6s linear infinite;
    }
  }
}

@keyframes tagline-shimmer {
  from { background-position: 200% center; }
  to   { background-position: -200% center; }
}