/* Centri Edge section. Self-contained: delete this file, js/edge.js
   and the EDGE block in index.html to remove it. */
.edge{position:relative;min-height:max(100svh,620px);overflow:hidden;background:#040506;isolation:isolate;display:flex;align-items:center;border-top:1px solid var(--line)}
.edge canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-2;display:block}
.edge-shade{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,rgba(4,5,6,.92) 0%,rgba(4,5,6,.6) 30%,rgba(4,5,6,0) 55%),
             linear-gradient(0deg,rgba(4,5,6,.9) 0%,rgba(4,5,6,0) 22%),
             linear-gradient(180deg,rgba(4,5,6,.8) 0%,rgba(4,5,6,0) 18%)}
.edge-copy{position:relative;z-index:1;width:100%;padding-top:110px;padding-bottom:110px;isolation:isolate}
.edge-copy>*{max-width:560px}
.edge-copy::before{content:"";position:absolute;z-index:-1;pointer-events:none;top:40px;bottom:40px;left:-120px;width:min(900px,160vw);
  background:radial-gradient(closest-side,rgba(3,4,5,.88) 0%,rgba(3,4,5,.7) 45%,rgba(3,4,5,.3) 75%,rgba(3,4,5,0) 100%)}
.edge-copy .h2{text-shadow:0 2px 22px rgba(0,0,0,.9)}
.edge-copy p.lead{color:#dfe3e7;margin-top:16px;max-width:42ch;text-shadow:0 1px 10px rgba(0,0,0,.9)}
.edge-tag{display:inline-block;margin-left:8px;padding:2px 8px;border:1px solid rgba(242,179,61,.5);color:var(--gold);font-size:.6rem;letter-spacing:.16em;border-radius:2px;vertical-align:middle}
.edge-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px;list-style:none;padding:0}
.edge-chips li{font:500 .68rem var(--mono);letter-spacing:.12em;text-transform:uppercase;padding:9px 12px;border:1px solid var(--line2);background:rgba(10,12,15,.7);border-radius:var(--r,2px);display:flex;align-items:center;gap:8px}
.edge-chips li i{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green);flex:none}
/* the box status panel */
.edge-unit{position:absolute;right:var(--gut);bottom:clamp(24px,5vh,56px);z-index:1;width:min(300px,calc(100% - 2*var(--gut)));
  background:rgba(8,10,12,.82);border:1px solid var(--line2);border-radius:4px;padding:14px 16px;font:500 .64rem var(--mono);letter-spacing:.1em;color:var(--muted);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.edge-unit header{display:flex;align-items:center;justify-content:space-between;color:var(--text);font-weight:600;margin-bottom:10px}
.edge-unit header b{color:var(--accent);font-weight:600}
.edge-unit svg{display:block;width:100%;height:auto;margin:4px 0 10px}
.edge-unit dl{display:grid;grid-template-columns:auto 1fr;gap:5px 12px;margin:0}
.edge-unit dt{color:var(--dim)}
.edge-unit dd{margin:0;color:var(--text);text-align:right}
.edge-unit dd.ok{color:var(--green)}
.edge-unit dd.off{color:#ff6b5b}
.edge-led{animation:edgeBlink 1.4s steps(2,jump-none) infinite}
.edge-led.b{animation-delay:.35s}.edge-led.c{animation-delay:.7s}
@keyframes edgeBlink{50%{opacity:.25}}
@media (max-width:760px){
  .edge{align-items:flex-start;flex-direction:column;min-height:auto}
  .edge canvas{height:62%}
  .edge-shade{background:linear-gradient(0deg,rgba(4,5,6,1) 0%,rgba(4,5,6,1) 40%,rgba(4,5,6,.6) 52%,rgba(4,5,6,0) 66%),linear-gradient(180deg,rgba(4,5,6,.85) 0%,rgba(4,5,6,0) 14%)}
  .edge-copy{padding-top:min(70vw,360px);padding-bottom:20px}
  .edge-copy::before{inset:-20px -40px}
  .edge-unit{position:relative;right:auto;bottom:auto;margin:8px var(--gut) 48px;width:auto}
}
@media (prefers-reduced-motion:reduce){.edge-led{animation:none}}
/* 3D carry scene */
.edge-carry{background:#050607;padding:clamp(56px,8vw,110px) 0 0;border-top:1px solid var(--line)}
.edge-carry-head{margin-bottom:clamp(18px,3vw,34px)}
.edge-viz{position:relative;width:100%;aspect-ratio:16/7;min-height:420px;max-height:80vh;overflow:hidden;background:radial-gradient(ellipse 60% 70% at 50% 45%,#11151a 0%,#050607 75%)}
.edge-viz canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.edge-viz.no-gl{display:none}
.ev-hud{position:absolute;left:var(--gut);top:20px;display:flex;align-items:center;gap:10px;font-size:.68rem;letter-spacing:.16em;color:var(--text);background:rgba(8,10,12,.75);border:1px solid var(--line2);padding:8px 12px;border-radius:3px}
.ev-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent);animation:edgeBlink 1.2s steps(2,jump-none) infinite}
.ev-specs{position:absolute;right:var(--gut);bottom:20px;display:flex;gap:8px;list-style:none;margin:0;padding:0;flex-wrap:wrap;justify-content:flex-end}
.ev-specs li{font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);background:rgba(8,10,12,.75);border:1px solid var(--line2);padding:8px 12px;border-radius:3px}
.ev-specs b{color:var(--accent);font-weight:600;margin-right:4px}
@media (max-width:760px){
  .edge-viz{aspect-ratio:4/5;min-height:0;max-height:none}
  .ev-specs{left:var(--gut);right:var(--gut);justify-content:flex-start}
}

/* seamless: same page background, no dividers, every edge fades into the page */
.edge,.edge-carry{background:var(--bg);border-top:0}
.edge canvas{-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 16%,#000 82%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0%,#000 16%,#000 82%,transparent 100%)}
.edge-shade{background:linear-gradient(90deg,rgba(5,6,7,.92) 0%,rgba(5,6,7,.55) 30%,rgba(5,6,7,0) 55%)}
.edge-carry{padding-top:clamp(24px,4vw,56px);position:relative}
.edge-viz{background:none;-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 14%,#000 80%,transparent 100%),linear-gradient(90deg,transparent 0%,#000 10%,#000 90%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(180deg,transparent 0%,#000 14%,#000 80%,transparent 100%),linear-gradient(90deg,transparent 0%,#000 10%,#000 90%,transparent 100%);mask-composite:intersect}
.ev-hud{top:14%}
.ev-specs{bottom:22%}
.edge-unit{background:rgba(8,10,12,.6);border-color:var(--line)}
@media (max-width:760px){
  .edge canvas{-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 14%,#000 70%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0%,#000 14%,#000 70%,transparent 100%)}
  .edge-shade{background:linear-gradient(0deg,rgba(5,6,7,1) 0%,rgba(5,6,7,1) 40%,rgba(5,6,7,.6) 52%,rgba(5,6,7,0) 66%)}
  .ev-specs{bottom:16%}
}
.edge-carry-sub{max-width:52ch;margin-top:12px;color:var(--muted)}
.ev-tag{position:absolute;left:0;top:0;pointer-events:none;font-size:.58rem;letter-spacing:.14em;color:#dfe9e2;background:rgba(6,10,8,.72);border:1px solid rgba(61,220,132,.45);padding:4px 8px;border-radius:2px;white-space:nowrap;will-change:transform}
.ev-tag.box{color:#fff;border-color:var(--accent);background:rgba(20,10,4,.8)}
@media (max-width:760px){.ev-tag{font-size:.5rem;padding:3px 6px}}

/* squad scene: full-bleed behind the heading, no frame, edges melt into the page */
.edge-carry{position:relative;min-height:max(100svh,680px);padding:0;display:flex;align-items:flex-start;overflow:hidden}
.edge-carry .edge-viz{position:absolute;inset:0;aspect-ratio:auto;min-height:0;max-height:none;z-index:0;
  -webkit-mask-image:radial-gradient(ellipse 78% 72% at 58% 55%,#000 40%,rgba(0,0,0,.6) 66%,transparent 92%);
  mask-image:radial-gradient(ellipse 78% 72% at 58% 55%,#000 40%,rgba(0,0,0,.6) 66%,transparent 92%)}
.edge-carry::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(5,6,7,.9) 0%,rgba(5,6,7,.55) 24%,rgba(5,6,7,0) 46%),linear-gradient(180deg,var(--bg) 0%,rgba(5,6,7,0) 18%,rgba(5,6,7,0) 82%,var(--bg) 100%)}
.edge-carry-head{position:relative;z-index:2;padding-top:clamp(70px,12vh,130px);pointer-events:none}
.edge-carry-head>*{max-width:560px}
.edge-carry-head .h2,.edge-carry-head .lead{text-shadow:0 2px 18px rgba(0,0,0,.9)}
.ev-hud,.ev-specs li{background:rgba(5,6,7,.45);border-color:rgba(255,255,255,.08)}
.ev-hud{top:auto;bottom:clamp(28px,8vh,80px);left:var(--gut);z-index:2}
.ev-specs{bottom:clamp(28px,8vh,80px);z-index:2}
.ev-tag{background:rgba(5,8,6,.55)}
@media (max-width:900px){
  .edge-carry{flex-direction:column;min-height:0}
  .edge-carry-head{padding-top:clamp(40px,8vw,70px)}
  .edge-carry .edge-viz{position:relative;inset:auto;width:100%;aspect-ratio:4/5;margin-top:-6%;
    -webkit-mask-image:radial-gradient(ellipse 75% 62% at 50% 50%,#000 45%,rgba(0,0,0,.55) 70%,transparent 96%);
    mask-image:radial-gradient(ellipse 75% 62% at 50% 50%,#000 45%,rgba(0,0,0,.55) 70%,transparent 96%)}
  .edge-carry::before{background:linear-gradient(180deg,var(--bg) 0%,rgba(5,6,7,0) 12%,rgba(5,6,7,0) 88%,var(--bg) 100%)}
  .ev-hud{position:relative;left:auto;bottom:auto;margin:6px var(--gut) 0;display:inline-flex;align-self:flex-start}
  .ev-specs{position:relative;left:auto;right:auto;bottom:auto;margin:10px var(--gut) 40px;justify-content:flex-start}
}
@media (max-width:900px){.ev-specs{gap:6px}.ev-specs li{padding:6px 9px;font-size:.56rem}}
/* phone: labels sit on the animation itself, heading overlaps its faded top */
@media (max-width:900px){
  .edge-carry .edge-viz{margin-top:-22%;aspect-ratio:1/1.05}
  .ev-hud{position:absolute;left:var(--gut);right:auto;bottom:52px;margin:0;z-index:3}
  .ev-specs{position:absolute;left:var(--gut);right:var(--gut);bottom:14px;margin:0;flex-wrap:nowrap;gap:5px;z-index:3;overflow:hidden}
  .ev-specs li{padding:5px 7px;font-size:.5rem;letter-spacing:.08em;white-space:nowrap}
  .ev-specs li:nth-child(2) span{display:none}
  .ev-hud{font-size:.56rem;padding:6px 10px}
}

/* no seam: the site's own background runs through both Edge sections into the next one */
.edge,.edge-carry{background:transparent}
.edge-carry::before{background:linear-gradient(90deg,rgba(5,6,7,.85) 0%,rgba(5,6,7,.45) 26%,rgba(5,6,7,0) 48%)}
.edge-carry + .missions,.edge + .edge-carry{border-top:0}
@media (max-width:900px){.edge-carry::before{background:none}}
/* the scene is fully transparent at its top and bottom edges, so nothing gets cut at the section line */
.edge-carry .edge-viz{
  -webkit-mask-image:radial-gradient(ellipse 78% 72% at 58% 52%,#000 40%,rgba(0,0,0,.6) 66%,transparent 92%),linear-gradient(180deg,transparent 0%,#000 14%,#000 70%,transparent 98%);
  -webkit-mask-composite:source-in;
  mask-image:radial-gradient(ellipse 78% 72% at 58% 52%,#000 40%,rgba(0,0,0,.6) 66%,transparent 92%),linear-gradient(180deg,transparent 0%,#000 14%,#000 70%,transparent 98%);
  mask-composite:intersect}
@media (max-width:900px){
  .edge-carry .edge-viz{
    -webkit-mask-image:radial-gradient(ellipse 75% 62% at 50% 50%,#000 45%,rgba(0,0,0,.55) 70%,transparent 96%),linear-gradient(180deg,transparent 0%,#000 16%,#000 72%,transparent 99%);
    mask-image:radial-gradient(ellipse 75% 62% at 50% 50%,#000 45%,rgba(0,0,0,.55) 70%,transparent 96%),linear-gradient(180deg,transparent 0%,#000 16%,#000 72%,transparent 99%)}
}