/* Valor Sound animated logo (direction C). Pairs with logo-anim.js + valor-logo.svg.
   Container: <div class="vl" data-state="pre"></div>. Size it with width; the box keeps
   the mark's aspect ratio. Everything that moves uses transform and opacity only. */

.vl {
  --vl-glow-rgb: 46 75 255;      /* Valor Blue halo behind the speakers */
  --vl-glow-size: 30%;           /* set by JS from the viewBox, fallback only */
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
}
.vl[data-variant="compact"] { aspect-ratio: 1402 / 378; }

.vl > svg {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;             /* the barbell drops in from above the box */
}

/* Halo: plain HTML layers so their pulse stays on the compositor. */
.vl-glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.vl-glow i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--vl-glow-size);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(var(--vl-glow-rgb) / .55), rgb(var(--vl-glow-rgb) / .18) 55%, rgb(var(--vl-glow-rgb) / 0));
  transform: translate(-50%, -50%);
  opacity: 0;
  will-change: opacity;
}
.vl[data-glow="off"] .vl-glow { display: none; }

/* Before the intro starts the mark is hidden. Failsafe: if the script never runs,
   the static logo still appears after 2.5 s. */
.vl[data-state="pre"] > svg { animation: vl-failsafe 0s linear 2.5s forwards; visibility: hidden; }
@keyframes vl-failsafe { to { visibility: visible; } }

.vl[data-hover="on"] { cursor: pointer; }

/* Header usage: compact variant hides the lifter and the SOUND plate. */
.vl[data-variant="compact"] .vl-lifter,
.vl[data-variant="compact"] .vl-sound { display: none; }

@media (prefers-reduced-motion: reduce) {
  .vl[data-state="pre"] > svg { visibility: visible; animation: none; }
  .vl-glow i { opacity: .22; }
}