/**
 * The interactive system schematic.
 *
 * Ported from the reference block with every class prefixed .sc-scm-, so
 * nothing here can collide with a host theme or with the rest of the addon.
 */

.sc-scm{
	--scm-accent:#2E9BDB;
	--scm-accent-2:#5FBFF2;
	--scm-ok:#7DE0A8;
	--scm-line:rgba(255,255,255,.08);
	--scm-ease:cubic-bezier(.16,1,.3,1);
	position:relative;
	width:560px;
	max-width:100%;
	display:flex;
	flex-direction:column;
	gap:clamp(14px,2vw,24px);
}

.sc-scm-stage{position:relative;touch-action:manipulation}
.sc-scm-scene{width:100%;height:auto;display:block;overflow:visible}

/* parallax layers, driven by --px / --py in the range -1…1 */
.sc-scm-lay{transition:transform .5s var(--scm-ease)}
.sc-scm-lay--a{transform:translate(calc(var(--px,0) * 5px),calc(var(--py,0) * 5px))}
.sc-scm-lay--b{transform:translate(calc(var(--px,0) * 13px),calc(var(--py,0) * 13px))}
.sc-scm-lay--c{transform:translate(calc(var(--px,0) * 22px),calc(var(--py,0) * 22px))}

.sc-scm-d,.sc-scm-brk{fill:none;vector-effect:non-scaling-stroke}
.sc-scm-d{stroke:rgba(255,255,255,.14);stroke-width:1}
.sc-scm-brk{stroke:rgba(255,255,255,.22);stroke-width:1.2}

/* Animation only runs once the schematic is on screen — with five nodes,
   packets, keypad and LEDs all looping, an off-screen copy is wasted work. */
.sc-scm-scene [class*="sc-scm-"]{animation-play-state:paused}
.sc-scm.is-live .sc-scm-scene [class*="sc-scm-"]{animation-play-state:running}

.sc-scm-float{animation:scmFloat 11s ease-in-out infinite alternate;
	transform-box:view-box;transform-origin:center}
@keyframes scmFloat{to{transform:translateY(-10px)}}

.sc-scm-mote{animation:scmMote 9s ease-in-out infinite alternate;
	animation-delay:calc(var(--i,0) * -1.4s);transform-box:fill-box;transform-origin:center}
@keyframes scmMote{0%{transform:translate(0,0);opacity:.18}
	50%{opacity:.6}100%{transform:translate(9px,-16px);opacity:.24}}

.sc-scm-tick{animation:scmTick 3.6s ease-in-out infinite;animation-delay:calc(var(--i,0) * .22s)}
@keyframes scmTick{0%,100%{opacity:.14}45%{opacity:.5}}

/* wires and packets */
.sc-scm-wire{fill:none;stroke:rgba(255,255,255,.15);stroke-width:1.2;
	vector-effect:non-scaling-stroke;transition:stroke .45s var(--scm-ease)}
.sc-scm-flow{fill:none;stroke:var(--scm-accent-2);stroke-width:1.6;stroke-linecap:round;
	vector-effect:non-scaling-stroke;stroke-dasharray:7 250;opacity:.5;
	animation:scmFlow 3.4s linear infinite;animation-delay:calc(var(--i,0) * -.85s);
	transition:opacity .45s var(--scm-ease),stroke-width .45s var(--scm-ease)}
@keyframes scmFlow{to{stroke-dashoffset:-257}}
.sc-scm-wire.is-on{stroke:rgba(102,198,240,.55)}
.sc-scm-flow.is-on{opacity:1;stroke-width:2.2}

/* device nodes */
.sc-scm-node{cursor:pointer}
.sc-scm-hit{fill:transparent;pointer-events:all}
.sc-scm-ring{fill:rgba(255,255,255,.03);stroke:rgba(255,255,255,.20);stroke-width:1.2;
	vector-effect:non-scaling-stroke;transition:stroke .4s var(--scm-ease),fill .4s var(--scm-ease)}
.sc-scm-halo{fill:none;stroke:var(--scm-accent);stroke-width:1.2;
	vector-effect:non-scaling-stroke;opacity:0;transform-box:fill-box;transform-origin:center}
.sc-scm-pip{fill:rgba(255,255,255,.35);transition:fill .4s var(--scm-ease)}
.sc-scm-glyph{fill:none;stroke:rgba(255,255,255,.55);stroke-width:1.5;
	stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;
	transition:stroke .4s var(--scm-ease)}
.sc-scm-glyph .sc-scm-f{fill:rgba(255,255,255,.5);stroke:none;transition:fill .4s var(--scm-ease)}
.sc-scm-lbl{font-size:12px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;
	fill:rgba(255,255,255,.38);text-anchor:middle;transition:fill .4s var(--scm-ease)}
.sc-scm-grp{transition:transform .55s var(--scm-ease);transform-box:fill-box;transform-origin:center}

.sc-scm-node.is-on .sc-scm-ring{stroke:var(--scm-accent);fill:rgba(46,155,219,.10)}
.sc-scm-node.is-on .sc-scm-pip{fill:var(--scm-accent-2)}
.sc-scm-node.is-on .sc-scm-glyph{stroke:#fff}
.sc-scm-node.is-on .sc-scm-glyph .sc-scm-f{fill:#fff}
.sc-scm-node.is-on .sc-scm-lbl{fill:#fff}
.sc-scm-node.is-on .sc-scm-grp{transform:scale(1.09)}
.sc-scm-node.is-on .sc-scm-halo{animation:scmPulse 1.9s ease-out infinite}
@keyframes scmPulse{0%{transform:scale(.9);opacity:.75}100%{transform:scale(1.75);opacity:0}}

/* the control panel */
.sc-scm-panel{cursor:pointer}
.sc-scm-body{fill:rgba(255,255,255,.04);stroke:rgba(255,255,255,.28);stroke-width:1.4;
	vector-effect:non-scaling-stroke;transition:stroke .5s var(--scm-ease)}
.sc-scm-panel:hover .sc-scm-body{stroke:rgba(255,255,255,.5)}
.sc-scm-screen{fill:rgba(0,0,0,.35);stroke:rgba(255,255,255,.16);stroke-width:1;
	vector-effect:non-scaling-stroke}
.sc-scm-screen-txt{font-size:13px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;
	fill:var(--scm-accent-2);text-anchor:middle;transition:fill .4s var(--scm-ease)}
.sc-scm.is-armed .sc-scm-screen-txt{fill:var(--scm-ok)}
.sc-scm-screen-sub{font-size:10px;font-weight:600;letter-spacing:1.8px;text-transform:uppercase;
	fill:rgba(255,255,255,.34);text-anchor:middle}

.sc-scm-dotrow circle{fill:rgba(255,255,255,.5);opacity:.18;
	animation:scmCode 4.6s steps(1) infinite;animation-delay:calc(var(--i,0) * .34s)}
@keyframes scmCode{0%,18%{opacity:.18}22%,72%{opacity:1}76%,100%{opacity:.18}}
.sc-scm-caret{stroke:var(--scm-accent-2);stroke-width:1.6;vector-effect:non-scaling-stroke;
	animation:scmBlink 1.1s steps(1) infinite}
@keyframes scmBlink{0%,50%{opacity:1}51%,100%{opacity:0}}

.sc-scm-key{fill:rgba(255,255,255,.05);stroke:rgba(255,255,255,.13);stroke-width:1;
	vector-effect:non-scaling-stroke;animation:scmKey 5.4s ease-in-out infinite;
	animation-delay:calc(var(--i,0) * .17s)}
@keyframes scmKey{0%,100%{fill:rgba(255,255,255,.05)}40%,50%{fill:rgba(46,155,219,.34)}}
.sc-scm-led{fill:rgba(255,255,255,.2);animation:scmLed 2.4s ease-in-out infinite;
	animation-delay:calc(var(--i,0) * .4s)}
@keyframes scmLed{0%,100%{fill:rgba(255,255,255,.14)}50%{fill:var(--scm-accent-2)}}
.sc-scm.is-armed .sc-scm-led{animation-duration:1.1s}

.sc-scm-shield{fill:none;stroke:var(--scm-accent);stroke-width:1.2;
	vector-effect:non-scaling-stroke;opacity:0;transform-box:fill-box;transform-origin:center}
.sc-scm.is-armed .sc-scm-shield{animation:scmShield 3.4s var(--scm-ease) infinite;
	animation-delay:calc(var(--i,0) * 1.1s)}
@keyframes scmShield{0%{transform:scale(.62);opacity:0}22%{opacity:.55}100%{transform:scale(1.5);opacity:0}}

.sc-scm-radar{fill:none;stroke:var(--scm-accent);stroke-width:1.2;stroke-dasharray:24 16;
	vector-effect:non-scaling-stroke;opacity:0;transform-box:fill-box;transform-origin:center;
	transition:opacity .6s var(--scm-ease)}
.sc-scm.is-armed .sc-scm-radar{opacity:.5;animation:scmSpin 18s linear infinite}
@keyframes scmSpin{to{transform:rotate(360deg)}}

/* readout */
.sc-scm-hud{border-top:1px solid var(--scm-line);padding-top:16px}
.sc-scm-hud-row{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.sc-scm-dot{width:7px;height:7px;border-radius:50%;flex:none;background:var(--scm-accent-2);
	box-shadow:0 0 10px rgba(95,191,242,.9);animation:scmBeat 1.8s ease-in-out infinite}
.sc-scm.is-armed .sc-scm-dot{background:var(--scm-ok);box-shadow:0 0 10px rgba(125,224,168,.9)}
@keyframes scmBeat{0%,100%{opacity:.45;transform:scale(.82)}50%{opacity:1;transform:scale(1)}}
.sc-scm-state{font-size:10.5px;font-weight:700;letter-spacing:2.2px;text-transform:uppercase;
	color:rgba(255,255,255,.72)}
.sc-scm-idx{margin-left:auto;font-size:10.5px;font-weight:700;letter-spacing:2px;
	color:var(--grey-2,#6E6878);font-variant-numeric:tabular-nums}
.sc-scm-txt{margin:0;font-size:13.5px;line-height:1.7;color:var(--body,#C9C4CF);min-height:3.4em}
.sc-scm-txt b{display:block;font-size:11px;font-weight:800;letter-spacing:2px;
	text-transform:uppercase;color:var(--scm-accent-2);margin-bottom:5px}
.sc-scm-bar{height:1px;background:rgba(255,255,255,.09);margin-top:14px;overflow:hidden}
.sc-scm-bar i{display:block;height:100%;width:100%;
	background:linear-gradient(90deg,var(--scm-accent),var(--scm-accent-2));
	transform:scaleX(0);transform-origin:left}
.sc-scm-bar.is-run i{animation:scmBar var(--scm-speed,4.4s) linear forwards}
@keyframes scmBar{from{transform:scaleX(0)}to{transform:scaleX(1)}}

.sc-scm-hint{display:flex;align-items:center;gap:8px;margin-top:14px;font-size:10px;
	font-weight:600;letter-spacing:1.6px;text-transform:uppercase;color:var(--grey-2,#6E6878)}
.sc-scm-hint svg{flex:none;fill:none;stroke:currentColor;stroke-width:1.4;
	stroke-linecap:round;stroke-linejoin:round}

@media(prefers-reduced-motion:reduce){
	.sc-scm *,.sc-scm *::before,.sc-scm *::after{
		animation-duration:.001ms !important;animation-iteration-count:1 !important;
		transition-duration:.001ms !important}
	.sc-scm-lay{transform:none !important}
}