/* ====================================================================
   IO-CORE · LOADERS — io-trace family
   ====================================================================
   SVG-based loading visuals. Theme-tinted via --io-accent*.

   Variants:
     io-trace--scroll : oscilloscope waveform scrolling right-to-left,
                        edges faded by a horizontal mask gradient so the
                        line appears to emerge/disappear at the boundaries
     io-trace--draw   : path that draws itself with a head cursor,
                        then erases, then redraws — boot-sequence vibe
   ==================================================================== */

.io-trace {
  width: 60px;
  height: 35px;
  display: inline-block;
  vertical-align: middle;
}

/* ─── scroll variant ─── */

.io-trace--scroll {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0%,
    #000 14%,
    #000 86%,
    transparent 100%
  );
          mask-image: linear-gradient(
    90deg,
    transparent 0%,
    #000 14%,
    #000 86%,
    transparent 100%
  );
}

.io-trace--scroll .ln {
  fill: none;
  stroke: var(--io-accent);
  stroke-width: 1.25;
  stroke-linejoin: round;
  stroke-linecap: round;
  filter: drop-shadow(0 0 1.5px var(--io-accent));
}

/* ─── draw variant ─── */

.io-trace--draw {
  overflow: visible;
}

.io-trace--draw .bs {
  stroke: var(--io-border);
  stroke-width: 1;
  stroke-dasharray: 1 2;
}

.io-trace--draw .ln {
  fill: none;
  stroke: var(--io-accent);
  stroke-width: 1.25;
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-dasharray: 100;
  filter: drop-shadow(0 0 1.5px var(--io-accent));
}

.io-trace--draw .hd {
  fill: var(--io-accent-bright);
  filter: drop-shadow(0 0 2px var(--io-accent));
}