/* ===== Extra features. Each block belongs to one file in assets/fx/ ===== */

/* --- circuit.js : traces that draw themselves + section LEDs --- */
.circ-host{position:relative}
.circ-host>*:not(.circ){position:relative;z-index:1}
.circ{position:absolute;inset:-20px -40px;width:calc(100% + 80px);height:calc(100% + 40px);z-index:0;pointer-events:none;overflow:visible}
.circ .tr{fill:none;stroke:var(--line);stroke-width:1.5;stroke-dasharray:1;stroke-dashoffset:1;animation:trDraw 1.5s cubic-bezier(.6,.05,.3,1) forwards}
.circ .pl{fill:none;stroke:var(--accent);stroke-width:2.2;stroke-linecap:round;stroke-dasharray:.07 1.5;stroke-dashoffset:.07;opacity:0;animation:trPulse 1.1s ease-in forwards}
.circ .pad{fill:var(--bg);stroke:var(--line);stroke-width:1.5;opacity:0;animation:padOn .5s forwards}
.circ .pad.hot{stroke:var(--accent)}
@keyframes trDraw{to{stroke-dashoffset:0}}
@keyframes trPulse{0%{opacity:1;stroke-dashoffset:.07}99%{opacity:1}100%{stroke-dashoffset:-1;opacity:0}}
@keyframes padOn{0%{opacity:0;transform:scale(.2)}70%{opacity:1;transform:scale(1.4)}100%{opacity:1;transform:scale(1)}}
.circ .pad{transform-box:fill-box;transform-origin:center}
.frame.pwr{animation:pwr 1.1s ease-out}
@keyframes pwr{0%{outline:2px solid var(--accent);outline-offset:0}100%{outline:2px solid transparent;outline-offset:22px}}
.fx-led h2 .n{position:relative}
.fx-led h2 .n::after{content:"";position:absolute;top:-5px;right:-5px;width:8px;height:8px;border-radius:50%;background:var(--line);border:1.5px solid var(--bg);transition:background .3s .25s,box-shadow .3s .25s}
.fx-led .in h2 .n::after{background:var(--accent);box-shadow:0 0 8px 1px var(--accent)}
/* page-long traces */
main{position:relative;z-index:1}
.circ-page{position:absolute;left:0;top:0;z-index:0;pointer-events:none;overflow:hidden}
.circ-page path{fill:none;stroke-linejoin:round}
.circ-page .b{stroke:var(--line);stroke-width:1.5;opacity:.7}
.circ-page .p{stroke:var(--accent);stroke-width:1.6;stroke-dasharray:1;stroke-dashoffset:1;opacity:.75}
.circ-page .s .p{transition:stroke-dashoffset .7s cubic-bezier(.5,0,.3,1)}
.circ-page .s.on .p{stroke-dashoffset:0}
.circ-page circle{fill:var(--bg);stroke:var(--line);stroke-width:1.5;transition:stroke .3s .4s,fill .3s .4s}
.circ-page .s.on circle{stroke:var(--accent)}
.circ-page .s.on circle.led{fill:var(--accent)}
@media (prefers-reduced-motion:reduce){.circ .tr,.circ .pad{animation:none;stroke-dashoffset:0;opacity:1}.circ .pl{display:none}}

/* --- explode.js : exploded view of a PC --- */
.pcx{margin-top:34px;display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:28px;align-items:center}
@media (max-width:820px){.pcx{grid-template-columns:1fr}}
.pcx-fig{border:1.5px solid var(--ink);background:var(--card);padding:8px;position:relative}
.pcx svg{display:block;width:100%;height:auto;overflow:visible}
.pcx .ln{fill:var(--card);stroke:var(--ink);stroke-width:1.6;stroke-linejoin:round}
.pcx .th{fill:none;stroke:var(--muted);stroke-width:1}
.pcx .dsh{fill:none;stroke:var(--line);stroke-width:1.2;stroke-dasharray:5 4}
.pcx .part{transition:filter .2s}
.pcx .part.hi .ln{stroke:var(--accent);stroke-width:2.2}
.pcx .bal circle{fill:var(--bg);stroke:var(--accent);stroke-width:1.5}
.pcx .bal text{font:500 12px "IBM Plex Mono",monospace;fill:var(--accent);text-anchor:middle;dominant-baseline:central}
.pcx .bal line{stroke:var(--accent);stroke-width:1}
.pcx .bal{transition:opacity .3s}
.pcx-hint{margin:2px 0 0 6px;font:400 .66rem "IBM Plex Mono",monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.pcx-bom th{width:auto}
.pcx-bom td:first-child,.pcx-bom th:first-child{width:46px;text-align:center;color:var(--accent);font-family:"IBM Plex Mono",monospace}
.pcx-bom td:last-child,.pcx-bom th:last-child{width:52px;text-align:center;font-family:"IBM Plex Mono",monospace}
.pcx-bom tr.hi td{background:color-mix(in srgb,var(--accent) 12%,transparent)}
.pcx-bom tbody tr{cursor:default}
.pcx-cap{grid-column:1/-1;margin-top:-10px}
@media print{.pcx{display:none}}

/* --- terminal.js : hidden terminal --- */
.term{position:fixed;left:50%;bottom:16px;transform:translate(-50%,24px);width:min(780px,calc(100% - 24px));height:min(460px,64vh);z-index:60;display:flex;flex-direction:column;background:#06111C;color:#D5E3EF;border:1.5px solid #2D4C69;box-shadow:0 24px 60px rgba(0,0,0,.45);font:400 14px/1.55 "IBM Plex Mono",ui-monospace,monospace;opacity:0;visibility:hidden;transition:opacity .2s,transform .2s,visibility 0s .2s}
.term.open{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity .2s,transform .2s}
.term-bar{display:flex;align-items:center;gap:10px;padding:8px 12px;border-bottom:1px solid #2D4C69;font-size:12px;color:#93AEC4;text-transform:uppercase;letter-spacing:.08em}
.term-bar i{width:9px;height:9px;border-radius:50%;background:#FF8A5C;box-shadow:0 0 8px #FF8A5C}
.term-bar span{flex:1}
.term-bar button{background:none;border:1px solid #2D4C69;color:#D5E3EF;font:inherit;padding:2px 9px;cursor:pointer}
.term-out{flex:1;overflow:auto;padding:12px 14px 4px;white-space:pre-wrap;word-break:break-word}
.term-out .c{color:#FF8A5C}.term-out .m{color:#93AEC4}.term-out .e{color:#FF6B6B}
.term-out a{color:#7FD1FF}
.term-in{display:flex;align-items:center;gap:8px;padding:6px 14px 12px}
.term-in b{color:#FF8A5C;font-weight:500;white-space:nowrap}
.term-in input{flex:1;min-width:0;background:transparent;border:0;outline:0;color:#fff;font:inherit;caret-color:#FF8A5C}
.term-hint{margin:-14px 0 34px;font:400 .72rem "IBM Plex Mono",monospace;color:var(--muted);letter-spacing:.04em}
.term-hint kbd{font:inherit;border:1px solid var(--line);background:var(--card);padding:0 5px}
@media (max-width:620px){.term{bottom:0;width:100%;height:70vh;border-left:0;border-right:0}}
@media print{.term,.term-hint{display:none}}