/* =========================================================
   SECTION 06 · AI AS AN INTELLIGENCE LAYER
   ========================================================= */

/* Section shell: 120px padding restored (matches .mitre-summary, .mitre-section),
   plus the top/bottom edge gradations that fill that padding. */
.mitre-section.mitre-ai {
  --aid-edge: 120px;                 /* height of each edge fade (= section padding) */
  --aid-edge-top: 5, 2, 8;           /* rgb of section colour at the top edge    (#050208) */
  --aid-edge-bottom: 6, 2, 11;       /* rgb of section colour at the bottom edge (#06020b) */
  position: relative;
  padding: 120px 0;
  overflow: hidden;
  isolation: isolate;
}

/* top edge: 100% at the section's top edge -> 0% at 120px */
.mitre-section.mitre-ai::before,
.mitre-section.mitre-ai::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: var(--aid-edge);
  pointer-events: none;
  z-index: 2;
}

.mitre-section.mitre-ai::before {
  top: 0;
  background: linear-gradient(to bottom,
    rgba(var(--aid-edge-top), 1) 0%,
    rgba(var(--aid-edge-top), .84) 18%,
    rgba(var(--aid-edge-top), .6) 38%,
    rgba(var(--aid-edge-top), .32) 62%,
    rgba(var(--aid-edge-top), .1) 82%,
    rgba(var(--aid-edge-top), 0) 100%);
}

/* bottom edge: 100% at the section's bottom edge -> 0% at 120px */
.mitre-section.mitre-ai::after {
  bottom: 0;
  background: linear-gradient(to top,
    rgba(var(--aid-edge-bottom), 1) 0%,
    rgba(var(--aid-edge-bottom), .84) 18%,
    rgba(var(--aid-edge-bottom), .6) 38%,
    rgba(var(--aid-edge-bottom), .32) 62%,
    rgba(var(--aid-edge-bottom), .1) 82%,
    rgba(var(--aid-edge-bottom), 0) 100%);
}

.mitre-section.mitre-ai .case-container {
  position: relative;
  z-index: 1;
}

@media (max-width: 640px) {
  .mitre-section.mitre-ai {
    --aid-edge: 78px;
    padding: 78px 0;
  }
}

/* ---------------------------------------------------------
   Wrapper + animation tempo
   --aid-tempo is the ONE value that controls the whole loop
   (stage animation AND the headline/caption swaps).
   Lower = faster.  Was 30s.
   --------------------------------------------------------- */
.aid {
  --aid-tempo: 18s;
  --u: calc(min(100vw, 1040px) / 560);
  position: relative;
  display: block;
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
  container-type: inline-size;
}

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

/* ---------------------------------------------------------
   Copy column: eyebrow (always on) + headline / captions that
   swap in step with the panels that rise on the right.
   --------------------------------------------------------- */
.aid .aid-copy {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  z-index: 3;
}

.aid .aid-copy .eyebrow {
  margin: 0 0 24px;
}

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

.aid .aid-lines > * {
  grid-area: 1 / 1;
  opacity: 0;
}

/* Headline (state 0 + end of loop): desktop h2 styles */
.mitre-section.mitre-ai .aid-lines h2.aid-h0 {
  max-width: none;
  margin: 0;
  color: #fff;
  font-size: clamp(42px, 5vw, 74px);
  line-height: .98;
  letter-spacing: -.045em;
  animation: aid-h0 var(--aid-tempo) infinite linear;
}

.mitre-section.mitre-ai .aid-lines h2.aid-h0 em {
  font-style: normal;
  color: #ff54c2;
}

/* Swapping lines are h2s too: identical desktop h2 styles */
.mitre-section.mitre-ai .aid-lines h2.aid-n1,
.mitre-section.mitre-ai .aid-lines h2.aid-n2,
.mitre-section.mitre-ai .aid-lines h2.aid-n3 {
  max-width: none;
  margin: 0;
  color: #fff;
  font-size: clamp(42px, 5vw, 74px);
  line-height: .98;
  letter-spacing: -.045em;
}

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

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

/* Pause everything (stage + copy) together on hover so they never drift apart */
.aid:hover *,
.aid:hover *::before {
  animation-play-state: paused !important;
}

/* Tablet / mobile: copy stacks above the stage */
@media (max-width: 950px) {
  .aid .aid-copy {
    position: relative;
    width: 100%;
    margin-bottom: 32px;
  }

}

.aid .aid-stage {
  position: relative;
  font-family: inherit;
  width: var(--w);
  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;
  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-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: #5eb8ff;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* keep stroke at a constant on-screen weight regardless of icon size */
#aid-i-class *, #aid-i-map *, #aid-i-pattern *, #aid-i-synth *,
#aid-i-ques *, #aid-i-decide *, #aid-i-corr * {
  vector-effect: non-scaling-stroke;
}

.aid .aid-card.aid-last .aid-ic {
  top: calc(11.25 * var(--u));   /* label top 16u + half of 12.5u line-height = 22.25u center */
  margin-top: 0;
}

.aid .aid-hl .aid-ic {
  top: calc(10.25 * var(--u));   /* label top 15u + 6.25u = 21.25u center */
  margin-top: 0;
  left: calc(17 * var(--u));
  animation: none;
}

.aid .aid-foot {
  position: absolute;
  bottom: calc(10 * var(--u));
  font-size: calc(6.6 * var(--u));
  line-height: calc(8 * var(--u));
  color: rgba(255,255,255,.78);
}

.aid .aid-f1 {
  left: 0;
  width: 50%;
  text-align: left;
  animation: aid-f1 var(--aid-tempo) infinite linear;
}

.aid .aid-f2 {
  left: calc(12 * var(--u));
  width: calc(286 * var(--u));
  text-align: center;
  opacity: 0;
  animation: aid-f2 var(--aid-tempo) infinite linear;
}

@keyframes aid-g1 {
  0%,32.000% {
    transform: translate(0,0);
  }

  55.000%,68.500% {
    transform: translate(24%,-16%);
  }

  100% {
    transform: translate(0,0);
  }
}

@keyframes aid-g2 {
  0%,28.000% {
    opacity: 0;
  }

  32.000%,46.667% {
    opacity: 1;
  }

  56.667%,100% {
    opacity: 0;
  }
}

@keyframes aid-g3 {
  0% {
    opacity: .7;
  }

  6.000% {
    opacity: .25;
  }

  68.500% {
    opacity: .25;
  }

  94.667%,100% {
    opacity: .85;
  }
}

@keyframes aid-last-icon {
  0%,16.000% {
    top: calc(12 * var(--u));
    animation-timing-function: cubic-bezier(.2,.7,.2,1);
  }

  18.667%,100% {
    top: calc(24 * var(--u));
  }
}

@keyframes aid-t1 {
  0%,28.000% {
    opacity: 0;
    transform: translateY(calc(10 * var(--u)));
  }

  31.333%,40.000% {
    opacity: 1;
    transform: translateY(0);
  }

  42.667%,100% {
    opacity: 0;
    transform: translateY(calc(-10 * var(--u)));
  }
}

@keyframes aid-t2 {
  0%,41.333% {
    opacity: 0;
    transform: translateY(calc(10 * var(--u)));
  }

  45.333%,53.333% {
    opacity: 1;
    transform: translateY(0);
  }

  56.333%,100% {
    opacity: 0;
    transform: translateY(calc(-10 * var(--u)));
  }
}

@keyframes aid-t3 {
  0%,55.333% {
    opacity: 0;
    transform: translateY(calc(10 * var(--u)));
  }

  59.333%,70.000% {
    opacity: 1;
    transform: translateY(0);
  }

  75.333%,100% {
    opacity: 0;
    transform: translateY(calc(-10 * var(--u)));
  }
}

@keyframes aid-f1 {
  0%,20.000% {
    opacity: 1;
  }

  24.000%,77.000% {
    opacity: 0;
  }

  88.000%,100% {
    opacity: 1;
  }
}

@keyframes aid-f2 {
  0%,27.667% {
    opacity: 0;
  }

  31.333%,75.000% {
    opacity: 1;
  }

  79.000%,100% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .aid .aid-stage *,
  .aid .aid-stage *::before {
    animation-duration: 90s !important;
  }
}

@keyframes twinkle {
  0%, 100% {
    opacity: 0.2;
    transform: scale(0.8);
  }

  50% {
    opacity: 1;
    transform: scale(1.2);
  }
}

.star-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #0b0d17;
}

.star {
  position: absolute;
  border-radius: 50%;
  background-color: #ffffff;
  pointer-events: none;
  animation-name: twinkle;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  will-change: opacity, transform;
}

.star--sm {
  width: 1px;
  height: 1px;
  box-shadow: 0 0 2px #ffffff;
}

.star--md {
  width: 2px;
  height: 2px;
  box-shadow: 0 0 4px #ffffff;
}

.star--lg {
  width: 3px;
  height: 3px;
  box-shadow: 0 0 6px #ffffff, 0 0 10px rgba(255, 255, 255, 0.5);
}

.star--fast {
  animation-duration: 1.5s;
}

.star--medium {
  animation-duration: 3s;
}

.star--slow {
  animation-duration: 5s;
}

.delay-1 {
  animation-delay: 0.5s;
}

.delay-2 {
  animation-delay: 1s;
}

.delay-3 {
  animation-delay: 1.5s;
}

.delay-4 {
  animation-delay: 2s;
}

.delay-5 {
  animation-delay: 2.5s;
}

@media (max-width: 950px) {
  .aid {
    --aid-s: 1.85;   /* scale factor: content ≈ 75% of stage width */
  }

  .aid .aid-stage {
    height: calc(315 * var(--u) * var(--aid-s));
  }

  /* The content occupies x≈290–519 of the 560-wide design (center ≈ 404.5).
     Scale it up, then shift so that center lands on the stage center (280). */
  .aid .aid-scene {
    inset: auto;
    left: 0;
    top: 0;
    width: calc(560 * var(--u));
    height: calc(315 * var(--u));
    transform-origin: 0 0;
    transform: translateX(calc(280 * var(--u) - var(--aid-s) * 404.5 * var(--u)))
               scale(var(--aid-s));
  }

  /* Captions: out of the stage, stacked below it, still cross-fading in place */
  .aid .aid-foots {
    display: grid;
    margin-top: 16px;
  }
  .aid .aid-foot,
  .aid .aid-f1,
  .aid .aid-f2 {
    position: static;
    grid-area: 1 / 1;
    width: 100%;
    left: auto;
    bottom: auto;
    text-align: center;
    font-size: 12px;
    line-height: 1.45;
  }
}