/* Fine light flares and electronic traces, inspired by the supplied mockup. */
.energy-field{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:2;isolation:isolate;mix-blend-mode:screen;background:radial-gradient(ellipse at 17% 67%,#008cff23,transparent 35%),radial-gradient(ellipse at 84% 27%,#ff6b001c,transparent 32%)}
.energy-spark{--light:#0aafff;position:absolute;left:var(--x);top:var(--y);width:3px;height:3px;background:#fff8df;border-radius:50%;color:var(--light);box-shadow:0 0 5px 2px #fff9,0 0 12px 4px var(--light),0 0 36px 9px var(--light);opacity:.75;animation:energy-breathe var(--duration) ease-in-out var(--delay) infinite;animation-play-state:paused}
.energy-spark.orange{--light:#ff861f}.energy-spark.red{--light:#ff354b}
.energy-spark:before,.energy-spark:after{content:'';position:absolute;left:50%;top:50%;width:var(--size);height:1px;background:linear-gradient(90deg,transparent,var(--light),#fff,var(--light),transparent);transform:translate(-50%,-50%) rotate(var(--angle));box-shadow:0 0 5px var(--light)}
.energy-spark:after{width:calc(var(--size)*.6);transform:translate(-50%,-50%) rotate(calc(var(--angle) + 90deg))}
.energy-circuits{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke-width:1;stroke-linecap:round;opacity:.65}
.energy-circuits path{stroke:#05bfff;filter:drop-shadow(0 0 4px #008dff)}.energy-circuits .warm{stroke:#ff8a30;filter:drop-shadow(0 0 5px #ff6a00)}
.energy-visible .energy-spark{animation-play-state:running}
.key-piece{filter:drop-shadow(0 15px 12px #0009) drop-shadow(0 0 7px #008bff8a)}
.ecu-piece{filter:drop-shadow(0 14px 10px #000a) drop-shadow(0 0 6px #008bff75)}
.piece-label,.ecu-label{z-index:3}.key-showcase,.ecu-showcase{box-shadow:-10px 5px 40px #008cff20,12px -5px 35px #ff6b0010,inset 0 0 45px #008dff14}
.card .energy-field{background:radial-gradient(ellipse at 50% 90%,color-mix(in srgb,var(--card-accent) 22%,transparent),transparent 65%)}
.card:nth-child(2) .energy-spark{--light:#ff354b}.card:nth-child(4) .energy-spark{--light:#ff861f}
.card .energy-spark{box-shadow:0 0 4px 1px #fff9,0 0 10px 3px var(--light),0 0 22px 5px var(--light)}
@keyframes energy-breathe{0%,100%{opacity:.28;transform:scale(.65) translateY(3px)}45%{opacity:.95;transform:scale(1.12) translateY(-3px)}70%{opacity:.5;transform:scale(.8)}}
@media(max-width:760px){.energy-spark:nth-of-type(n+9){display:none}.energy-spark{--size:23px!important}.energy-circuits{opacity:.45}}
@media(prefers-reduced-motion:reduce){.energy-spark{animation:none;opacity:.6}}