/* mitre-hero.css — visual signal nodes. Load AFTER mitre.css / mitre-hero-glow.css / ai-esi.css.
   Self-contained: does not depend on a `.hero` class. Nodes are sized/positioned as % of the field. */

.mitre-hero .signal-field {
  position: relative;
  width: min(560px, 100%);
  height: auto;
  aspect-ratio: 1;
  margin: auto;
  overflow: visible;
}

/* Glass panel + glowing border */
/* .mitre-hero .signal-field .signal-node.has-viz {
  position: absolute;
  display: block;
  min-width: 0;
  min-height: 0;
  height: auto;
  padding: 6px;
  border-radius: 2px;
  letter-spacing: 0;
  border: 1px solid rgba(95, 212, 255, .5);
  background: linear-gradient(145deg, rgba(144, 235, 255, .09), rgba(179, 140, 255, .06));
  backdrop-filter: blur(6px);
  box-shadow:
    0 0 0 1px rgba(18, 192, 255, .08),
    0 0 26px rgba(18, 192, 255, .22),
    inset 0 0 20px rgba(18, 192, 255, .07);
  transform: translate(-50%, -50%);
} */
.mitre-hero .signal-field .signal-node.has-viz {
  position: absolute;
  display: block;
  min-width: 0;
  min-height: 0;
  height: auto;
  padding: 6px;
  border-radius: 2px;
  letter-spacing: 0;
  
  border: 1px solid transparent;
  border-image: linear-gradient(145deg, #e2f8ff8f, rgba(95, 212, 255, .5), #e2f8ff8f) 1;
  
  /* Updated background to a 3-color linear gradient following the same pattern */
  background: linear-gradient(145deg, rgba(144, 235, 255, .1), rgba(179, 140, 255, .115), rgba(144, 235, 255, .25));
  
  backdrop-filter: blur(6px);
  box-shadow:
    0 0 0 1px rgba(18, 192, 255, .045),
    0 0 26px rgba(18, 192, 255, .11),
    inset 0 0 20px rgba(18, 192, 255, .005);
  transform: translate(-50%, -50%);
}
.mitre-hero .signal-field .signal-node.has-viz img,
.mitre-hero .signal-field .signal-node.has-viz svg { display: block; width: 100%; height: 100%; object-fit: contain; }

/* size (width = % of field, height from aspect-ratio) + centre position */
.mitre-hero .signal-field .signal-node.has-viz.n-10    { width: 56%; aspect-ratio: 260 / 173; top: 7%; left: 15%; }  /* research */
.mitre-hero .signal-field .signal-node.has-viz.n-2     { width: 51%; aspect-ratio: 200 / 270; top: 6%; left: 104%; }  /* service  */
.mitre-hero .signal-field .signal-node.has-viz.n-4     { width: 52%; aspect-ratio: 300 / 150; top: 87%; left: 91%; }  /* process  */
.mitre-hero .signal-field .signal-node.has-viz.n-8     { width: 30%; aspect-ratio: 120 / 230; top: 87%; left: 13%;     opacity: .75;  }  /* data     */
.mitre-hero .signal-field .signal-node.has-viz.n-sub-4 { width: 84%; aspect-ratio: 180 / 120; top: 50%; left: 50%; opacity: 1; 
  background: linear-gradient(145deg, rgba(144, 235, 255, .4), rgba(179, 140, 255, .15), rgba(144, 235, 255, .25));
} /* agents */

/* remaining label squares: keep them clear of the visual cards */
.mitre-hero .signal-field .signal-node.is-square.n-sub-1 { top: 42%; left: -3%; }
.mitre-hero .signal-field .signal-node.is-square.n-sub-2 { top: 9%;  left: 61%; }
.mitre-hero .signal-field .signal-node.is-square.n-sub-3 { top: 59%; left: 103%; }

.evidence-grid > article:last-child > span { margin-left: 110px;} 

@media (max-width: 640px) {
  .mitre-hero .signal-field { width: 100%; scale: .85; left: -5%;}
  .mitre-hero .signal-field .signal-node.is-square { width: 144px; height: 36px; }
  .mitre-hero-grid > div:first-child {  margin-bottom: 50px;}
    .evidence-grid > article:last-child > span {
    /*margin-left: 110px;*/
    width: 65%;
  }
}



.mitre-hero {
  position: relative;
  overflow: hidden;
}

/* .mitre-hero .signal-tunnel-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.7;
  mix-blend-mode: screen;

  
  -webkit-mask-image: radial-gradient(
    ellipse 75% 85% at 70% 40%,
    rgba(0, 0, 0, 1) 25%,
    rgba(0, 0, 0, 0.6) 60%,
    rgba(0, 0, 0, 0) 90%
  );
  mask-image: radial-gradient(
    ellipse 75% 85% at 70% 40%,
    rgba(0, 0, 0, 1) 25%,
    rgba(0, 0, 0, 0.6) 60%,
    rgba(0, 0, 0, 0) 90%
  );
} */
.mitre-hero .signal-field .signal-tunnel-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4800px;               /* matches viewBox, 1 unit = 1px */
  height: 3000px;
  margin: -1500px 0 0 -2400px; /* viewBox origin stays at field center */
  overflow: visible;
  pointer-events: none;
  opacity: .7;
  mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%,
      #000 35%, rgba(0,0,0,.75) 70%, #000 100%);
          mask-image: radial-gradient(ellipse 50% 50% at 50% 50%,
      #000 35%, rgba(0,0,0,.75) 70%, #000 100%);
}

.mitre-hero .case-container {
  position: relative;
  margin-top: -1.25%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
}

.mitre-hero-grid {
  position: relative;
  z-index: 2;
}

.mitre-hero .mitre-meta {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 2;
  margin-top: auto;
}

.mitre-hero .signal-field .signal-tunnel-bg {
  opacity: var(--tunnel-opacity, .25); /* for lines */
  opacity: var(--tunnel-opacity, .75);
}
@media (max-width: 640px) {
  .mitre-hero { --tunnel-opacity: .45; }
}