/* Placeholder look for the hero storyboard. Simple shapes, site palette. */
.sb{display:block;width:100%;height:100%;overflow:visible;font-family:Barlow,system-ui,sans-serif}
.sb-device{fill:#e2ded6;stroke:#c9c3b8;stroke-width:2}
.sb-device-dark{fill:#3a3e45}
.sb-intercept{fill:#cfc8bb;stroke:#b4ac9d;stroke-width:2;transition:fill 300ms ease,stroke 300ms ease}
.sb-intercept.is-hi{fill:#dfe7f4;stroke:#2457a4}
.sb-cable{stroke:#a9a397;stroke-width:5;stroke-linecap:round}
.sb-cable-hi{stroke:#2457a4;stroke-width:5;stroke-linecap:round}
.sb-pulse{fill:#2457a4}
.sb-signal{fill:color-mix(in srgb,#2457a4 calc(var(--lit,0)*100%),#9aa3b2)}
.sb-stand{fill:#3a3e45}
.sb-chip{fill:#fdfcfa;stroke:rgb(36 39 44 / 10%)}
.sb-chip-text{font-size:17px;font-weight:500;fill:#24272c;text-anchor:middle}
.sb-brain circle{fill:color-mix(in srgb,#2b4f8a calc(var(--interpret,0)*100%),#1f355c);stroke:#f7f5f1;stroke-width:2.5;transition:fill 400ms ease}
.sb-brain.is-network circle{fill:#3a4e70;stroke:#f7f5f1;stroke-width:3}
.sb-ripple{fill:none;stroke:#2457a4;stroke-width:3}
.sb-edges line{stroke:#7d8796;stroke-width:2}
.sb-edge-pulse{fill:#2457a4}
.sb-bezel{fill:#2f3338}
.sb-display{fill:#e9ecef}
.sb-hmi-bar{fill:#c9cfd6}
.sb-hmi-menu{fill:#8e98a5}
.sb-hmi-line{fill:none;stroke:#7d8796;stroke-width:1.6}
.sb-hmi-fill{fill:#9db4d4}
.sb-hmi-pipe{fill:none;stroke:#7d8796;stroke-width:1.6}
.sb-hmi-trend{fill:none;stroke:#3a4e70;stroke-width:1.6}
.sb-hmi-value{fill:#2f3338}
.sb-hmi-start{fill:#7fa88a}
.sb-hmi-stop{fill:#b7bcc3}

/* Interactive overlay: hidden until a capability is active */
.sb-overlay,.sb-screen-ov{opacity:var(--ov,0);transition:opacity 300ms ease}
.sb-ov-cap .sb-ov-node,.sb-ov-cap .sb-ov-halo{transform:scale(.3);opacity:0;transition:transform 420ms cubic-bezier(.23,1,.32,1),opacity 260ms ease}
.sb-ov-node{fill:var(--cap);stroke:#f7f5f1;stroke-width:4}
.sb-ov-halo{fill:var(--cap);opacity:0}
.sb-ov-link{fill:none;stroke:var(--cap);stroke-width:2.5;stroke-dasharray:6 7;opacity:0;transition:opacity 300ms ease}
.sb-ov-cap.is-on .sb-ov-node{transform:scale(1);opacity:1}
.sb-ov-cap.is-on .sb-ov-halo{transform:scale(1);opacity:.16}
.sb-ov-cap.is-on .sb-ov-link{opacity:.85}
.sb-ov-part{opacity:0;transition:opacity 300ms ease}
.sb-ov-part.is-on{opacity:1}
.sb-ov-box,.sb-ov-frame{fill:none;stroke:var(--cap);stroke-width:2.5}
.sb-ov-dot{fill:var(--cap)}
.sb-ov-dot-ring{fill:var(--cap);opacity:.22}
@media (prefers-reduced-motion:no-preference){
  .sb-ov-cap.is-on .sb-ov-halo{animation:sb-halo 1.8s ease-in-out infinite}
  .sb-ov-part.is-on .sb-ov-dot-ring{animation:sb-halo 1.8s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
}
@keyframes sb-halo{50%{transform:scale(1.25);opacity:.06}}

/* Video mode: real animation underneath, overlay stays */
.has-video .sb-base,.has-video .sb-hmi{opacity:0}

/* Guides (viewer and export only) */
.sb-guides line{stroke:rgb(36 87 164 / 12%);stroke-width:1}
.sb-guide-pt{fill:#c2452d}
.sb-guide-text{font-size:15px;fill:#c2452d;font-weight:600}
.sb-hud{font-size:20px;fill:#565b63;font-weight:600}
.no-labels .sb-labels{display:none}
/* A per-capability clip is playing: let it carry the neuron and screen effect; keep the link */
.has-cap-clip[data-clip="anomaly"] .sb-ov-cap[data-cap="anomaly"] .sb-ov-node,.has-cap-clip[data-clip="anomaly"] .sb-ov-cap[data-cap="anomaly"] .sb-ov-halo,.has-cap-clip[data-clip="anomaly"] .sb-ov-part[data-cap="anomaly"]{opacity:0!important}

.has-cap-clip[data-clip="automation"] .sb-ov-cap[data-cap="automation"] .sb-ov-node,.has-cap-clip[data-clip="automation"] .sb-ov-cap[data-cap="automation"] .sb-ov-halo,.has-cap-clip[data-clip="automation"] .sb-ov-part[data-cap="automation"]{opacity:0!important}
.has-cap-clip[data-clip="learning"] .sb-ov-cap[data-cap="learning"] .sb-ov-node,.has-cap-clip[data-clip="learning"] .sb-ov-cap[data-cap="learning"] .sb-ov-halo,.has-cap-clip[data-clip="learning"] .sb-ov-part[data-cap="learning"]{opacity:0!important}
.has-cap-clip[data-clip="navigation"] .sb-ov-cap[data-cap="navigation"] .sb-ov-node,.has-cap-clip[data-clip="navigation"] .sb-ov-cap[data-cap="navigation"] .sb-ov-halo,.has-cap-clip[data-clip="navigation"] .sb-ov-part[data-cap="navigation"]{opacity:0!important}
.has-cap-clip[data-clip="remote"] .sb-ov-cap[data-cap="remote"] .sb-ov-node,.has-cap-clip[data-clip="remote"] .sb-ov-cap[data-cap="remote"] .sb-ov-halo,.has-cap-clip[data-clip="remote"] .sb-ov-part[data-cap="remote"]{opacity:0!important}
.has-cap-clip .sb-base,.has-cap-clip .sb-hmi{opacity:0}
/* Interpret: the AI reading the operator screen */
.sb-scan-frame{fill:none;stroke:#2457a4;stroke-width:3}
.sb-scan-halo{fill:#2457a4;fill-opacity:.16}
.sb-scan-line{fill:#2457a4}
.sb-scan-band{fill:#2457a4;fill-opacity:.22}
.sb-scan-box{fill:none;stroke:#2457a4;stroke-width:2;stroke-linecap:round}