/* AFC 13 — the circuit field ("Estúdio", 12/11/2026; circuit.js makes the elements, lays out the board and runs the
   pulses). A printed-circuit board with energy running in it, as part of the room, on every page: lanes of parallel
   traces with 45° jogs, ring pads, vias, branch stubs and here and there a component's footprint, over the whole
   screen, in regions. Each region (.circ-c) is as visible as the screen is free there: the script sets its opacity
   from the content it finds on screen, and the transition below makes the circuits grow into the empty stretches and
   draw back behind the words and the pictures.
   One .circ box inside each .room-w layer (two copies of the same board), so the room's slanted edge cuts the
   circuits together with the room and nothing here clips. Each copy takes its own room's light as a constant
   (--jag-light in the Jaguar room, --cad-light in the Cadillac room), never --light: during a sweep both copies are
   on screen, each on its side of the edge.
   The drawing exists once per copy (.circ-defs: one path for every trace, used three times, two of them wide and
   faint under the line: the glow, no filter) and every region shows its own window of it under a feathered mask.
   A region is a small layer of its own that rasterises once; only its opacity and the pulses ever change. */
.circ {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none; contain: strict;
  --c: var(--jag-light); --c-rgb: var(--jag-light-rgb);
}
.room-w.is-cad > .circ { --c: var(--cad-light); --c-rgb: var(--cad-light-rgb); }
/* while the page flies (the script's scroll clock says so) the whole board sits back: one fade, on the box */
.circ { transition: opacity .3s ease; }
.circ.is-flying { opacity: .4; }
/* the copy of the world that is not showing (the script knows from the room's clip) */
.circ.is-idle { display: none; }
.circ-defs { position: absolute; left: 0; top: 0; width: 0; height: 0; overflow: hidden; }

/* a region: its box overlaps its neighbours' by the feather (--fl … --fb: 0 on the screen's own edges), and the two
   ramps add up to the whole drawing where both are lit */
.circ-c { position: absolute; contain: strict; opacity: 0; transition: opacity .5s ease; will-change: opacity; }
.circ-c > svg {
  position: absolute; left: 0; top: 0; display: block; max-width: none; max-height: none;
  -webkit-mask-image:
    linear-gradient(90deg, transparent, #000 var(--fl), #000 calc(100% - var(--fr)), transparent),
    linear-gradient(180deg, transparent, #000 var(--ft), #000 calc(100% - var(--fb)), transparent);
  mask-image:
    linear-gradient(90deg, transparent, #000 var(--fl), #000 calc(100% - var(--fr)), transparent),
    linear-gradient(180deg, transparent, #000 var(--ft), #000 calc(100% - var(--fb)), transparent);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}

/* the drawing (the shared path itself carries no style: it takes each <use>'s) */
.circ-glow, .circ-line, .circ-pad, .circ-ic { fill: none; stroke: var(--c); stroke-width: 1; stroke-linejoin: round; stroke-linecap: round; }
.circ-glow { stroke-width: 5; stroke-opacity: .13; }
.circ-glow.is-wide { stroke-width: 13; stroke-opacity: .06; }
.circ-line { stroke-opacity: .55; }
.circ-pad { stroke-width: 1.5; stroke-opacity: .9; fill: rgb(var(--c-rgb) / .16); }
.circ-ic { stroke-opacity: .6; fill: rgb(var(--c-rgb) / .06); }
.circ-via { stroke: none; fill: var(--c); fill-opacity: .82; }
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  .circ-line { stroke-width: 1.25; }
}

/* a pulse: one moving element (the script animates its transform and opacity), a bright head with a short tail that
   hangs behind it against the way it travels (the element turns about its head at every bend). The pulses and the
   flashes are a small pool that stays in the box (tiny layers of their own, so a launch changes nothing but them). */
.circ-p {
  position: absolute; left: 0; top: 0; width: 34px; height: 10px; margin: -5px 0 0 -29px; transform-origin: 29px 5px; opacity: 0; will-change: transform, opacity;
  background:
    radial-gradient(circle at 29px 5px, #fff 0 1.3px, rgb(var(--c-rgb) / .95) 2.6px, rgb(var(--c-rgb) / .3) 4px, transparent 5px),
    linear-gradient(90deg, transparent, rgb(var(--c-rgb) / .85)) 2px 4px / 26px 2px no-repeat;
}
/* a pad's flash: lit as its pulse arrives (opacity only, on the pulse's own timing) */
.circ-f {
  position: absolute; left: 0; top: 0; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; opacity: 0; will-change: transform, opacity;
  background: radial-gradient(circle, rgb(var(--c-rgb) / .95) 0 14%, rgb(var(--c-rgb) / .42) 34%, transparent 70%);
}

/* ?circuit=off (the class is set by circuit.js: measuring, and comparing with and without) */
.circuit-off .circ { display: none; }
/* reduced motion and data saver: the traces stand (the regions still follow the free space; the script makes no pulses) */
@media (prefers-reduced-motion: reduce) { .circ-p, .circ-f { display: none; } }
/* more contrast: the field leaves */
@media (prefers-contrast: more) { .circ { display: none; } }
@media print { .circ { display: none; } }