/* =========================================================
   MITRE · EXPERIENCE INTELLIGENCE: full-width promo (index)
   First promo in the Selected Work (#impact) section.
   ---------------------------------------------------------
   --aid-tempo = the ONE speed control (lower = faster).
   It drives the stage animation AND the headline swaps, so
   the two always stay in sync.
   ========================================================= */

.mitre-promo {
  --aid-tempo: 18s;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  margin: 0 0 28px;
  padding: clamp(28px, 5vw, 64px);
  border-radius: 20px;
  overflow: hidden;
  isolation: isolate;
  color: #fff;
  text-decoration: none;
  background:
    radial-gradient(circle at 77% 28%, rgba(18,192,255,.18), transparent 30%),
    radial-gradient(circle at 24% 74%, rgba(192,0,255,.24), transparent 38%),
    linear-gradient(145deg, #050208, #110027 58%, #06020b);
  box-shadow: 0 18px 50px rgba(17, 0, 39, .28);
}

/* ---------- copy column ---------- */
.mitre-promo-copy {
  min-width: 0;
}

.mitre-promo .mitre-promo-eyebrow {
  display: table;
  margin: 0 0 24px;
  padding: 4px 7px;
  background: #c09fff;
  color: #38106f;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .19em;
}

.mitre-promo .aid-lines {
  display: grid;
  align-items: start;
}

.mitre-promo .aid-lines > * {
  grid-area: 1 / 1;
  margin: 0;
  max-width: none;
  opacity: 0;
  color: #fff;
  font-size: clamp(32px, 3.7vw, 54px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.04em;
}

.mitre-promo .aid-lines em {
  font-style: normal;
  color: #ff54c2;
}

.mitre-promo .aid-h0 { animation: aid-h0 var(--aid-tempo) infinite linear; }
.mitre-promo .aid-n1 { animation: aid-n1 var(--aid-tempo) infinite linear; }
.mitre-promo .aid-n2 { animation: aid-n2 var(--aid-tempo) infinite linear; }
.mitre-promo .aid-n3 { animation: aid-n3 var(--aid-tempo) infinite linear; }

.mitre-promo .mitre-promo-desc {
  max-width: 520px;
  margin: 28px 0 0;
  color: rgba(255, 255, 255, .74);
  font-size: 16px;
  line-height: 1.55;
}

.mitre-promo .mitre-promo-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 26px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(255, 255, 255, .4);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  transition: border-color .25s ease, gap .25s ease;
}

.mitre-promo:hover .mitre-promo-link,
.mitre-promo:focus-visible .mitre-promo-link {
  gap: 12px;
  border-color: #ff54c2;
}

.mitre-promo:focus-visible {
  outline: 2px solid #c09fff;
  outline-offset: 4px;
}

/* ---------- animation column ---------- */
.mitre-promo-visual {
  min-width: 0;
}

.mitre-promo-note {
  margin: 14px 0 0;
  color: rgba(255, 255, 255, .6);
  font-size: 11px;
  line-height: 1.4;
  text-align: center;
}

/* The stage is the 560x315u case-study animation, cropped to its
   right-hand column (x 280u..535u). Everything scales from --u. */
.aid.aid-promo {
  --u: calc(min(100vw, 400px) / 255);
  position: relative;
  display: block;
  width: 100%;
  max-width: 400px;
  aspect-ratio: 255 / 315;
  margin: 0 auto;
  container-type: inline-size;
}

@supports (width:1cqw) {
  .aid.aid-promo {
    --u: calc(100cqw / 255);
  }
}

@media (max-width: 860px) {
  .mitre-promo {
    grid-template-columns: minmax(0, 1fr);
  }

  .aid.aid-promo {
    max-width: 340px;
  }
}

.aid .aid-stage {
  position: relative;
  font-family: inherit;
  width: 100%;
  height: calc(315 * var(--u));
  overflow: hidden;
  border-radius: calc(10 * var(--u));
  isolation: isolate;
  --cy: #12c0ff;
  --mg: #c000ff;
  --pk: #ff54c2;
  --pu: #5b00c2;
  background: none;
  color: #fff;
  max-width: 100%;
}

.aid .aid-scene {
  position: absolute;
  inset: 0;
  transform: translateX(calc(-280 * var(--u)));  /* show x = 280u..535u of the original stage */
  animation: aid-fadein .9s ease-out both;
}

.aid .aid-ic {
  position: absolute;
  left: calc(15 * var(--u));
  top: 50%;
  width: calc(22 * var(--u));
  height: calc(22 * var(--u));
  margin-top: calc(-11 * var(--u));
  fill: none;
  stroke: #8fe6ff;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.aid .aid-card.aid-last .aid-ic {
  top: calc(23 * var(--u));
  margin-top: 0;
}

.aid .aid-hl .aid-ic {
  top: calc(25 * var(--u));
  margin-top: 0;
  left: calc(17 * var(--u));
  animation: aid-hero-icon var(--aid-tempo) infinite linear;
}

/* Reduced motion: freeze on the opening state (headline + capability list) */
@media (prefers-reduced-motion: reduce) {
  .mitre-promo *,
  .mitre-promo *::before {
    animation: none !important;
  }

  .mitre-promo .aid-h0 {
    opacity: 1;
  }
}