/* ============================================================
 * Vilkax · vax-symbol.css  (Pass-153)
 * ============================================================
 *
 * Inline VAX currency glyph — drop a <span class="vax-sym"></span>
 * next to a number and the SVG is masked into the current text
 * colour, sized to the surrounding font.  Works on cards, in
 * inputs, in wallets, in chat — anywhere VAX values appear.
 *
 *   You hold <span class="vax-sym"></span>1,250 VAX
 *
 * Use .vax-sym-glow for a soft neon variant (used in the wallet
 * balance / pricing headline).
 *
 * The glyph file lives at /vax-symbol.svg and is mask-loaded so
 * the colour is fully controllable via currentColor.  No fetch of
 * the file is needed beyond the first paint — it's cached by the
 * browser like any other static asset.
 * ============================================================ */

.vax-sym,
.vax-sym-glow {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.12em;
  margin-right: 0.10em;
  background-color: currentColor;
  -webkit-mask-image: url("/vax-symbol.svg");
          mask-image: url("/vax-symbol.svg");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
  flex-shrink: 0;
}

.vax-sym-glow {
  /* Wallet headline / pricing accent — pulses softly. */
  color: #60a5fa;
  filter:
    drop-shadow(0 0 6px rgba(96, 165, 250, 0.55))
    drop-shadow(0 0 14px rgba(59, 130, 246, 0.35));
  animation: vax-sym-pulse 4.5s ease-in-out infinite;
}

@keyframes vax-sym-pulse {
  0%, 100% {
    filter:
      drop-shadow(0 0 6px rgba(96, 165, 250, 0.55))
      drop-shadow(0 0 14px rgba(59, 130, 246, 0.35));
  }
  50% {
    filter:
      drop-shadow(0 0 10px rgba(96, 165, 250, 0.80))
      drop-shadow(0 0 20px rgba(59, 130, 246, 0.55));
  }
}

@media (prefers-reduced-motion: reduce) {
  .vax-sym-glow { animation: none; }
}

/* Slightly stronger weight when sat in a pill / button so the
   glyph reads at small sizes against the gradient. */
.vlx-glow-btn .vax-sym,
.vax-pack-cta  .vax-sym,
.vlx-mini-cta  .vax-sym {
  vertical-align: -0.10em;
  margin-right: 0.06em;
}