/* ============================================================================
   Alerot animated logo (Components/Shared/AlerotLogoAnimated.razor).

   GENERATED by src/build_hero_animated.py -- do not hand-edit.

   This lives in its own file rather than inside the SVG because the portal CSP is
   `style-src 'self'` with no 'unsafe-inline'; an inline <style> would be blocked and
   every shape would fall back to default black.

   The logo's own palette is deliberately NOT reproduced here. Its tokens are mapped
   onto the studio theme variables below, so one toggle drives the whole page.
   ============================================================================ */

.studio .alerot-logo {
    --gold:      var(--accent);
    --gold-soft: color-mix(in srgb, var(--accent) 72%, transparent);
    --gold-pale: color-mix(in srgb, var(--accent) 45%, var(--surface));
    --navy:      var(--text);
    --ink:       color-mix(in srgb, var(--muted) 60%, transparent);
    --led-red:   #D0473A;
    --led-green: #3FA96B;
}

/* Geometry carries no paint of its own: the groups below own the paint, which is
what lets #fills re-use the very same paths via use elements.
NB: never put angle brackets in here -- inside an inline SVG the style element
is parsed as markup, so a stray tag silently truncates the stylesheet. */
.studio #initial-trace, .studio #circuits { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.studio #initial-trace      { stroke: var(--gold); stroke-width: 2.4; }
.studio #circuit-frame      { stroke-width: 1.3; opacity: .8; }
.studio #circuit-branches .gold, .studio #circuit-frame .gold { stroke: var(--gold-soft); }
.studio #circuit-branches .ink,  .studio #circuit-frame .ink  { stroke: var(--ink); }
/* Two tiers: fat power buses, hair-thin signal traces. */
.studio #circuit-branches .sig      { stroke-width: 1.1; opacity: .6; }
.studio #circuit-branches .bus      { stroke-width: 3; }
.studio #circuit-branches .bus.gold { stroke: var(--gold); }
.studio #circuit-nodes .gold { fill: var(--gold); }
.studio #circuit-nodes .ink  { fill: var(--ink); }
.studio #circuit-nodes .via  { fill: none; stroke-width: 2; }
.studio #circuit-nodes .via.gold { stroke: var(--gold); }
.studio #circuit-nodes .via.ink  { stroke: var(--ink); }
/* Idle layer: a short bright dash the script sends travelling down each trace. */
.studio #circuit-pulse {
  fill: none; stroke: var(--gold); stroke-width: 3.4; stroke-linecap: round;
}
.studio #emblem-outlines {
  fill: none; stroke: var(--gold); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.studio #fills { fill: var(--navy); stroke: none; fill-rule: evenodd; }
.studio #fills .gold { fill: var(--gold); }
.studio #fills .pale { fill: var(--gold-pale); }
.studio #fills .led-red   { fill: var(--led-red); }
.studio #fills .led-green { fill: var(--led-green); }
.studio #fills .glow      { fill: var(--gold-soft); opacity: .55; }
.studio #crt-sweep rect   { fill: var(--gold); opacity: .3; }
/* Armed only by the animation script, so the logo still renders without JS. */
.studio .alerot-logo.is-armed #initial-trace,
.studio .alerot-logo.is-armed #circuits,
.studio .alerot-logo.is-armed #emblem-outlines,
.studio .alerot-logo.is-armed #fills { visibility: hidden; }