/* REL 6.17.32 — hero hierarchy + instrument behavior pass */

/* Shared hero behavior: the artwork explains the system instead of sitting beside it. */
body.system-page .hero{isolation:isolate}
body.system-page .instrument{--instrument-accent:#c9a34b;transition:filter .22s ease}
body.system-search-radar .instrument{--instrument-accent:#7fd3e2}
body.system-distribution-radar .instrument{--instrument-accent:#d2a84f}
body.system-operator .instrument{--instrument-accent:#91b1cb}
body.system-search-systems .instrument{--instrument-accent:#8fb592}
body.system-client-portals .instrument{--instrument-accent:#b99abb}

.hero-readout{position:absolute;z-index:8;left:50%;bottom:7.5%;transform:translateX(-50%);display:grid;grid-template-columns:auto auto auto auto;align-items:center;gap:7px 11px;max-width:92%;padding:9px 12px;border:1px solid color-mix(in srgb,var(--instrument-accent) 52%,rgba(241,238,229,.16) 48%);background:rgba(3,4,4,.74);box-shadow:0 12px 34px rgba(0,0,0,.34),inset 0 0 0 1px rgba(255,255,255,.018);backdrop-filter:blur(9px);font:900 .48rem/1.35 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:#8f8a80;white-space:nowrap}
.hero-readout b{color:#eee9df;font-size:.5rem;letter-spacing:.12em;font-weight:900}.hero-readout span:nth-of-type(2){margin-left:4px;color:color-mix(in srgb,var(--instrument-accent) 76%,#eee 24%)}

.hero-nodes{position:absolute;z-index:7;inset:9% 6%;pointer-events:none}.hero-node{--node-delay:0s;position:absolute;width:7px;height:7px;border-radius:50%;background:var(--instrument-accent);box-shadow:0 0 0 5px color-mix(in srgb,var(--instrument-accent) 12%,transparent),0 0 17px color-mix(in srgb,var(--instrument-accent) 55%,transparent);opacity:.28;animation:heroNodeAcquire 12s ease-in-out infinite;animation-delay:var(--node-delay)}.hero-node::after{content:attr(data-label);position:absolute;left:14px;top:-3px;padding:3px 5px;border-left:1px solid color-mix(in srgb,var(--instrument-accent) 45%,transparent);font:900 .43rem/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:color-mix(in srgb,var(--instrument-accent) 72%,#c9c2b6 28%);white-space:nowrap;opacity:0;transform:translateX(-4px);animation:heroNodeLabel 12s ease-in-out infinite;animation-delay:var(--node-delay)}.hero-node.n1{left:18%;top:24%;--node-delay:0s}.hero-node.n2{right:15%;top:31%;--node-delay:-3s}.hero-node.n3{right:22%;bottom:21%;--node-delay:-6s}.hero-node.n4{left:20%;bottom:24%;--node-delay:-9s}

.hero-motion{position:absolute;z-index:6;pointer-events:none;left:50%;top:50%}
body.system-search-radar .hero-motion--scan{width:min(272px,21vw);height:1px;transform-origin:0 50%;background:linear-gradient(90deg,rgba(127,211,226,.03),rgba(127,211,226,.62),rgba(244,241,233,.68));box-shadow:0 0 10px rgba(127,211,226,.18);animation:heroRadarArm 12s linear infinite}.hero-motion--scan::after{content:"";position:absolute;right:-4px;top:-3px;width:7px;height:7px;border:1px solid #e8f7fa;border-radius:50%;box-shadow:0 0 8px rgba(127,211,226,.72)}
body.system-distribution-radar .hero-motion--rings{width:1px;height:1px}.hero-motion--rings i{position:absolute;left:50%;top:50%;width:150px;aspect-ratio:1;border:1px solid rgba(210,168,79,.34);border-radius:50%;transform:translate(-50%,-50%) scale(.28);opacity:0;animation:distributionWave 8s ease-out infinite}.hero-motion--rings i:nth-child(2){animation-delay:-2.65s}.hero-motion--rings i:nth-child(3){animation-delay:-5.3s}
body.system-operator .hero-motion--route{width:min(330px,25vw);aspect-ratio:1;border:1px dashed rgba(145,177,203,.38);border-radius:50%;transform:translate(-50%,-50%);animation:operatorRouteSpin 16s linear infinite}.hero-motion--route::after{content:"";position:absolute;left:50%;top:-5px;width:9px;height:9px;border-radius:50%;background:#dbe8f0;box-shadow:0 0 0 6px rgba(145,177,203,.08),0 0 16px rgba(145,177,203,.5)}
body.system-search-systems .hero-motion--trace{width:min(400px,31vw);height:min(330px,26vw);transform:translate(-50%,-50%);overflow:hidden;border-left:1px solid rgba(143,181,146,.1);border-right:1px solid rgba(143,181,146,.1)}.hero-motion--trace::before,.hero-motion--trace::after{content:"";position:absolute;left:0;right:0;height:1px}.hero-motion--trace::before{top:0;background:linear-gradient(90deg,transparent,rgba(143,181,146,.7),rgba(241,238,229,.36),transparent);box-shadow:0 0 10px rgba(143,181,146,.18);animation:architectureSweep 10s ease-in-out infinite}.hero-motion--trace::after{top:50%;border-top:1px dashed rgba(143,181,146,.16)}
body.system-client-portals .hero-motion--chamber{width:min(330px,25vw);aspect-ratio:1;transform:translate(-50%,-50%) rotate(45deg);border:1px solid rgba(185,154,187,.32);box-shadow:0 0 0 20px rgba(185,154,187,.012),0 0 44px rgba(185,154,187,.08);animation:portalBoundary 9s ease-in-out infinite}.hero-motion--chamber i{position:absolute;width:18%;height:5%;border:1px solid rgba(222,209,224,.34);background:rgba(185,154,187,.025);animation:portalModule 9s ease-in-out infinite}.hero-motion--chamber i:nth-child(1){left:15%;top:19%}.hero-motion--chamber i:nth-child(2){right:13%;top:20%;animation-delay:-2.25s}.hero-motion--chamber i:nth-child(3){right:16%;bottom:18%;animation-delay:-4.5s}.hero-motion--chamber i:nth-child(4){left:13%;bottom:20%;animation-delay:-6.75s}

/* Orbit labels behave like a four-step process rather than static decoration. */
body.system-page .orbit-label{opacity:.42;animation:heroLabelCycle 16s ease-in-out infinite}body.system-page .orbit-label.a{animation-delay:0s}body.system-page .orbit-label.b{animation-delay:-4s}body.system-page .orbit-label.c{animation-delay:-8s}body.system-page .orbit-label.d{animation-delay:-12s}

/* Homepage: add a working-set line and discrete signal points to the master instrument. */
.hero-statusline{display:inline-flex;align-items:center;gap:9px;margin-top:20px;padding:8px 10px;border:1px solid rgba(210,168,79,.28);background:rgba(210,168,79,.025);font:900 .52rem var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#b9b0a0}.hero-statusline::before{content:"";width:6px;height:6px;border-radius:50%;background:#d2a84f;box-shadow:0 0 10px rgba(210,168,79,.55);animation:homeStatusPulse 5s ease-in-out infinite}.home-signal-nodes{position:absolute;z-index:7;inset:7%;pointer-events:none}.home-node{--home-delay:0s;position:absolute;width:7px;height:7px;border-radius:50%;background:#d2a84f;opacity:.25;box-shadow:0 0 0 5px rgba(210,168,79,.06),0 0 15px rgba(210,168,79,.3);animation:homeNode 15s ease-in-out infinite;animation-delay:var(--home-delay)}.home-node::after{content:attr(data-label);position:absolute;left:13px;top:-3px;font:900 .42rem var(--mono);letter-spacing:.13em;color:#a99d84;text-transform:uppercase;white-space:nowrap}.home-node.h1{left:18%;top:27%}.home-node.h2{right:16%;top:25%;--home-delay:-3s}.home-node.h3{right:12%;bottom:28%;--home-delay:-6s}.home-node.h4{left:18%;bottom:21%;--home-delay:-9s}.home-node.h5{left:50%;top:13%;--home-delay:-12s}

/* Systems overview gets quiet motion, not another giant instrument. */
.systems-overview .systems-hero::after{transform-origin:50% 50%;animation:systemsFieldTurn 38s linear infinite}

/* Contact remains the simplest hero: a faint outgoing transmission behind the copy. */
.signal-hero{position:relative;isolation:isolate}.signal-hero::after{content:"";position:absolute;z-index:-1;right:2%;top:8%;width:min(430px,42vw);aspect-ratio:1;border:1px solid rgba(201,163,75,.12);border-radius:50%;box-shadow:0 0 0 38px rgba(201,163,75,.012),0 0 0 76px rgba(241,238,229,.008);background:radial-gradient(circle,rgba(201,163,75,.12) 0 2px,transparent 3px);animation:contactBeacon 8s ease-in-out infinite}

@keyframes heroNodeAcquire{0%,18%,100%{opacity:.2;transform:scale(.78)}28%,42%{opacity:1;transform:scale(1.18)}55%{opacity:.42;transform:scale(.9)}}
@keyframes heroNodeLabel{0%,20%,100%{opacity:0;transform:translateX(-4px)}28%,42%{opacity:.85;transform:translateX(0)}52%{opacity:0;transform:translateX(3px)}}
@keyframes heroRadarArm{to{transform:rotate(360deg)}}
@keyframes distributionWave{0%{opacity:0;transform:translate(-50%,-50%) scale(.24)}18%{opacity:.56}100%{opacity:0;transform:translate(-50%,-50%) scale(2.55)}}
@keyframes operatorRouteSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes architectureSweep{0%,100%{transform:translateY(8px);opacity:.25}50%{transform:translateY(310px);opacity:.9}}
@keyframes portalBoundary{0%,100%{opacity:.48;transform:translate(-50%,-50%) rotate(45deg) scale(.96)}50%{opacity:.9;transform:translate(-50%,-50%) rotate(45deg) scale(1.015)}}
@keyframes portalModule{0%,100%{opacity:.22}45%,58%{opacity:.9;box-shadow:0 0 10px rgba(185,154,187,.18)}}
@keyframes heroLabelCycle{0%,18%,100%{opacity:.34;text-shadow:none}24%,38%{opacity:1;text-shadow:0 0 18px color-mix(in srgb,var(--instrument-accent) 42%,transparent)}46%{opacity:.42}}
@keyframes homeStatusPulse{0%,100%{opacity:.5;transform:scale(.9)}50%{opacity:1;transform:scale(1.18)}}
@keyframes homeNode{0%,16%,100%{opacity:.18;transform:scale(.8)}23%,35%{opacity:.95;transform:scale(1.18)}48%{opacity:.32;transform:scale(.9)}}
@keyframes systemsFieldTurn{to{transform:rotate(360deg)}}
@keyframes contactBeacon{0%,100%{opacity:.34;transform:scale(.97)}50%{opacity:.72;transform:scale(1.02)}}

/* Once the layout stacks, comprehension comes before spectacle. */
@media(max-width:1080px){body.system-page .hero{display:flex;flex-direction:column;gap:0;padding-top:38px;padding-bottom:0}body.system-page .copy{order:1;z-index:9;margin:0 auto -28px}body.system-page .instrument{order:2;width:100%;min-height:520px}body.system-page main>.section:first-of-type{margin-top:-34px;padding-top:82px}.hero-motion--scan{width:min(270px,35vw)!important}body.system-operator .hero-motion--route,body.system-client-portals .hero-motion--chamber{width:min(330px,43vw)}body.system-search-systems .hero-motion--trace{width:min(420px,58vw);height:min(330px,46vw)}}
@media(max-width:680px){body.system-page .hero{padding:26px 14px 0}body.system-page .copy{margin-bottom:-18px;padding:30px 20px}body.system-page .hero h1{font-size:clamp(2.8rem,12.5vw,4.8rem);margin:18px 0 16px}body.system-page .lede{font-size:1.08rem;line-height:1.42}body.system-page .thesis{margin-top:18px}body.system-page .instrument{min-height:clamp(355px,92vw,430px)}body.system-page main>.section:first-of-type{margin-top:-28px;padding-top:70px}.hero-readout{bottom:6%;gap:5px 8px;padding:8px 10px;font-size:.42rem}.hero-readout b{font-size:.43rem}.hero-node::after{display:none}.hero-nodes{inset:10% 8%}body.system-search-radar .hero-motion--scan{width:34vw!important}body.system-operator .hero-motion--route,body.system-client-portals .hero-motion--chamber{width:45vw}body.system-search-systems .hero-motion--trace{width:58vw;height:44vw}.home-node::after{display:none}.hero-statusline{font-size:.47rem;letter-spacing:.11em}.signal-hero::after{width:78vw;right:-28vw;top:13%}}
@media(max-width:430px){body.system-page .copy{padding:27px 17px}body.system-page .instrument{min-height:345px}.hero-readout{grid-template-columns:auto auto;row-gap:4px;bottom:5%;white-space:normal;min-width:230px}.hero-readout span:nth-of-type(2){margin-left:0}.hero-statusline{display:flex;width:100%;line-height:1.4}.systems-overview .systems-hero::after{animation-duration:50s}}
@media(prefers-reduced-motion:reduce){body.system-page .orbit-label,.hero-node,.hero-node::after,.hero-motion--scan,.hero-motion--rings i,.hero-motion--route,.hero-motion--trace::before,.hero-motion--chamber,.hero-motion--chamber i,.hero-statusline::before,.home-node,.systems-overview .systems-hero::after,.signal-hero::after{animation:none!important}}