/* =========================================================
   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 * {
  box-sizing: border-box;
}

.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-stage *,
.aid .aid-stage *::before {
  box-sizing: border-box;
}

.aid .aid-bg {
  position: absolute;
  inset: 0;
  background: none;
}

.aid .aid-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  border: 1px solid rgba(192,0,255,.24);
  width: 112%;
  height: 58%;
  transform: translate(-50%,-50%) rotate(31deg);
}

.aid .aid-ring.aid-b {
  width: 118%;
  height: 54%;
  border-color: rgba(18,192,255,.22);
  transform: translate(-50%,-50%) rotate(-34deg);
}

.aid .aid-scene {
  position: absolute;
  inset: 0;
  animation: aid-fadein .9s ease-out both;
}

.aid .aid-list {
  position: absolute;
  left: calc(300 * var(--u));
  top: calc(72 * var(--u));
  width: calc(205 * var(--u));
  animation: aid-scroll var(--aid-tempo) infinite linear;
}

.aid .aid-list-title {
  margin: 0 0 calc(9 * var(--u));
  height: calc(14 * var(--u));
  font-size: calc(11.5 * var(--u));
  line-height: calc(14 * var(--u));
  font-weight: 600;
  padding-left: calc(12 * var(--u));
  color: #fff;
  white-space: nowrap;
}

.aid .aid-card {
  position: relative;
  width: calc(205 * var(--u));
  height: calc(46 * var(--u));
  margin: 0 0 calc(10 * var(--u));
  border-radius: calc(999 * var(--u));
  background-color: rgba(255,255,255,.07);
  border: 1px solid rgba(18,192,255,.42);
  box-shadow: 0 0 calc(14 * var(--u)) rgba(18,192,255,.05);
  overflow: hidden;
}

.aid .aid-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  background: linear-gradient(115deg,rgba(18,192,255,0) 28%,rgba(120,225,255,.2) 48%,rgba(192,0,255,0) 64%);
}

/*.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-lb {
  position: absolute;
  left: calc(45 * var(--u));
  right: calc(8 * var(--u));
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  font-size: calc(10.4 * var(--u));
  line-height: calc(12.5 * var(--u));
  font-weight: 600;
  color: #fff;
}

.aid .aid-card.aid-last {
  margin-bottom: 0;
  animation: aid-last-hover var(--aid-tempo) infinite linear;
}

.aid .aid-card.aid-last::before {
  animation: aid-sheen-last var(--aid-tempo) infinite linear;
}

.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-card.aid-last .aid-lb {
  top: calc(16 * var(--u));
  transform: none;
}

.aid .aid-hero {
  position: absolute;
  left: calc(290 * var(--u));
  top: calc(122 * var(--u));
  width: calc(225 * var(--u));
  height: calc(70 * var(--u));
  border-radius: calc(30 * var(--u));
  overflow: hidden;
  opacity: 0;
  background-color: rgba(18,192,255,.14);
  border: 1px solid rgba(18,192,255,.8);
  box-shadow: 0 0 0 0 rgba(0,0,0,0),0 0 0 0 rgba(192,0,255,0);
  animation: aid-hero var(--aid-tempo) infinite linear;
}

.aid .aid-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 1;
  background: linear-gradient(115deg,rgba(18,192,255,0) 28%,rgba(120,225,255,.2) 48%,rgba(192,0,255,0) 64%);
  animation: aid-sheen-hero var(--aid-tempo) infinite linear;
}

.aid .aid-hl {
  position: absolute;
  inset: 0;
  animation: aid-hl var(--aid-tempo) infinite linear;
}

.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-hl .aid-lb {
  left: calc(47 * var(--u));
  top: calc(15 * var(--u));
  transform: none;
  font-size: calc(10.8 * var(--u));
}

.aid .aid-hd {
  position: absolute;
  left: calc(47 * var(--u));
  top: calc(32 * var(--u));
  width: calc(152 * var(--u));
  font-size: calc(8.2 * var(--u));
  line-height: calc(10.4 * var(--u));
  color: rgba(255,255,255,.72);
  opacity: 0;
  animation: aid-hd var(--aid-tempo) infinite linear;
}

.aid .aid-w {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(203 * var(--u));
  height: calc(276 * var(--u));
  color: #1a0b33;
  opacity: 0;
  animation: aid-wfade var(--aid-tempo) infinite linear;
}

.aid .aid-w * {
  position: absolute;
}

.aid .aid-wt {
  left: calc(22 * var(--u));
  top: calc(28 * var(--u));
  font-size: calc(8.6 * var(--u));
  line-height: calc(10 * var(--u));
  font-weight: 600;
  color: #1a0b33;
  white-space: nowrap;
}

.aid .aid-ib {
  top: calc(9 * var(--u));
  width: calc(14 * var(--u));
  height: calc(14 * var(--u));
  border-radius: 50%;
  border: 1px solid #e3d9f3;
  background: #fff;
}

.aid .aid-w .aid-ib:nth-child(1) {
  left: calc(144 * var(--u)) !important;
}

.aid .aid-w .aid-ib:nth-child(2) {
  left: calc(163 * var(--u)) !important;
}

.aid .aid-ib svg {
  position: absolute;
  left: calc(3 * var(--u));
  top: calc(3 * var(--u));
  width: calc(7 * var(--u));
  height: calc(7 * var(--u));
  fill: none;
  stroke: #5b4a7d;
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.aid .aid-lbl {
  left: calc(22 * var(--u));
  font-size: calc(7 * var(--u));
  line-height: calc(9 * var(--u));
  font-weight: 600;
  color: #2a1648;
  white-space: nowrap;
}

.aid .aid-lbl em {
  font-style: normal;
  font-weight: 400;
  color: #9a8cb4;
}

.aid .aid-sel {
  left: calc(22 * var(--u));
  width: calc(156 * var(--u));
  border: 1px solid #e3d9f3;
  border-radius: calc(5 * var(--u));
  background: #fff;
  font-size: calc(7.4 * var(--u));
  color: #2a1648;
  display: flex;
  align-items: center;
  padding: 0 calc(8 * var(--u));
}

.aid .aid-sel * {
  position: static;
}

.aid .aid-sel span {
  flex: 1;
}

.aid .aid-sel svg {
  width: calc(7 * var(--u));
  height: calc(7 * var(--u));
  fill: none;
  stroke: #7a6aa0;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.aid .aid-ta {
  left: calc(22 * var(--u));
  top: calc(145 * var(--u));
  width: calc(156 * var(--u));
  height: calc(38 * var(--u));
  border: 1px solid #e3d9f3;
  border-radius: calc(5 * var(--u));
  padding: calc(6 * var(--u)) calc(8 * var(--u));
  font-size: calc(6.6 * var(--u));
  line-height: calc(8.6 * var(--u));
  color: #ab9fc4;
}

.aid .aid-fade {
  left: 0;
  top: calc(222 * var(--u));
  width: calc(203 * var(--u));
  height: calc(54 * var(--u));
  background: linear-gradient(rgba(255,255,255,0),rgba(78,44,122,.97) 88%);
}

.aid .aid-btn {
  left: calc(77 * var(--u));
  top: calc(237 * var(--u));
  width: calc(116 * var(--u));
  height: calc(25 * var(--u));
  border-radius: calc(999 * var(--u));
  background: #7d6ca3;
  color: #fff;
  font-size: calc(8.8 * var(--u));
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: aid-btn var(--aid-tempo) infinite linear;
}

.aid .aid-res,
.aid .aid-res2 {
  position: absolute;
  left: calc(321 * var(--u));
  top: calc(335 * var(--u));
  width: calc(203 * var(--u));
  height: calc(300 * var(--u));
  border-radius: calc(14 * var(--u));
  background: #fdfbff;
  color: #1a0b33;
  box-shadow: 0 calc(-6 * var(--u)) calc(24 * var(--u)) rgba(0,0,0,.4),0 0 calc(40 * var(--u)) rgba(192,0,255,.25);
  overflow: hidden;
}

.aid .aid-res {
  animation: aid-result3 var(--aid-tempo) infinite linear;
}

.aid .aid-res2 {
  animation: aid-result2 var(--aid-tempo) infinite linear;
}

.aid .aid-res *,
.aid .aid-res2 * {
  position: absolute;
}

.aid .aid-rt {
  left: calc(11 * var(--u));
  top: calc(11 * var(--u));
  font-size: calc(11.5 * var(--u));
  line-height: calc(14 * var(--u));
  font-weight: 600;
  color: #1a0b33;
  white-space: nowrap;
}

.aid .aid-rd {
  left: calc(11 * var(--u));
  top: calc(29 * var(--u));
  width: calc(178 * var(--u));
  font-size: calc(7.3 * var(--u));
  line-height: calc(10.2 * var(--u));
  color: #7a6d94;
}

.aid .aid-tabs {
  left: calc(9 * var(--u));
  top: calc(66 * var(--u));
  width: calc(180 * var(--u));
  height: calc(27 * var(--u));
  border: 1px solid #e6dcf5;
  border-radius: calc(6 * var(--u));
  padding: calc(3 * var(--u));
  display: flex;
}

.aid .aid-tabs div {
  position: static;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: calc(4 * var(--u));
  font-size: calc(7.6 * var(--u));
  color: #7a6d94;
}

.aid .aid-tabs .aid-on {
  background: #f1e6ff;
  color: #5b00c2;
  font-weight: 600;
}

.aid .aid-lg {
  left: calc(12 * var(--u));
  top: calc(104 * var(--u));
  display: flex;
  gap: calc(11 * var(--u));
  font-size: calc(6.6 * var(--u));
  color: #5a4a7a;
  align-items: center;
}

.aid .aid-lg span {
  position: static;
  display: flex;
  align-items: center;
  gap: calc(3 * var(--u));
}

.aid .aid-lg i {
  position: static;
  display: block;
  width: calc(11 * var(--u));
  height: 0;
  border-top: calc(1.6 * var(--u)) solid #0aa9e0;
}

.aid .aid-lg i.aid-d {
  border-top: calc(1.6 * var(--u)) solid #b300f0;
}

.aid .aid-ch {
  left: calc(4 * var(--u));
  top: calc(118 * var(--u));
  width: calc(194 * var(--u));
  height: calc(132 * var(--u));
  animation: aid-reveal var(--aid-tempo) infinite linear;
}

.aid .aid-ch svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.aid .aid-fr {
  left: calc(22 * var(--u));
  top: calc(100 * var(--u));
  width: calc(156 * var(--u));
}

.aid .aid-fr * {
  position: static;
}

.aid .aid-fr .aid-r {
  display: flex;
  align-items: center;
  height: calc(14.4 * var(--u));
  font-size: calc(7 * var(--u));
  color: #2a1648;
}

.aid .aid-fr .aid-d {
  flex: none;
  width: calc(6 * var(--u));
  height: calc(6 * var(--u));
  margin-right: calc(6 * var(--u));
  border-radius: 50%;
  background: #12c0ff;
}

.aid .aid-fr .aid-n {
  flex: none;
  width: calc(64 * var(--u));
  white-space: nowrap;
}

.aid .aid-fr .aid-t {
  flex: none;
  width: calc(58 * var(--u));
  height: calc(3 * var(--u));
  border-radius: calc(2 * var(--u));
  background: #efe6fb;
  overflow: hidden;
}

.aid .aid-fr .aid-t b {
  display: block;
  height: 100%;
  border-radius: calc(2 * var(--u));
  background: #12c0ff;
}

.aid .aid-fr .aid-g {
  margin-left: auto;
  font-size: calc(5.8 * var(--u));
  font-weight: 700;
  color: #c000ff;
}

.aid .aid-fr .aid-hi .aid-d {
  background: #c000ff;
  animation: aid-pulse 1.8s ease-in-out infinite;
}

.aid .aid-fr .aid-hi .aid-n {
  font-weight: 600;
}

.aid .aid-fr .aid-hi .aid-t b {
  background: linear-gradient(90deg,#ff54c2,#c000ff);
}

@keyframes aid-pulse {
  0%,100% {
    box-shadow: 0 0 0 0 rgba(192,0,255,.5);
  }

  50% {
    box-shadow: 0 0 0 calc(3.5 * var(--u)) rgba(192,0,255,0);
  }
}

.aid .aid-rec {
  left: calc(9 * var(--u));
  width: calc(185 * var(--u));
  height: calc(44 * var(--u));
  border: 1px solid #e6dcf5;
  border-radius: calc(8 * var(--u));
  background: #fff;
  overflow: hidden;
}

.aid .aid-rec * {
  position: absolute;
}

.aid .aid-rec:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: calc(3 * var(--u));
  background: #c000ff;
}

.aid .aid-rec.aid-m:before {
  background: #12c0ff;
}

.aid .aid-rec .aid-nb {
  left: calc(9 * var(--u));
  top: calc(8 * var(--u));
  width: calc(12 * var(--u));
  height: calc(12 * var(--u));
  border-radius: 50%;
  background: #f1e6ff;
  color: #5b00c2;
  font-size: calc(6.6 * var(--u));
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.aid .aid-rec .aid-ti {
  left: calc(28 * var(--u));
  top: calc(7 * var(--u));
  width: calc(150 * var(--u));
  font-size: calc(7.8 * var(--u));
  line-height: calc(10 * var(--u));
  font-weight: 600;
  color: #1a0b33;
  white-space: nowrap;
}

.aid .aid-rec .aid-me {
  left: calc(28 * var(--u));
  top: calc(21 * var(--u));
  font-size: calc(6.2 * var(--u));
  line-height: calc(8 * var(--u));
  color: #7a6d94;
  white-space: nowrap;
}

.aid .aid-rec .aid-bar {
  left: calc(28 * var(--u));
  top: calc(34 * var(--u));
  width: calc(150 * var(--u));
  height: calc(3 * var(--u));
  border-radius: calc(2 * var(--u));
  background: #efe6fb;
  overflow: hidden;
}

.aid .aid-rec .aid-bar b {
  display: block;
  height: 100%;
  border-radius: calc(2 * var(--u));
  background: linear-gradient(90deg,#12c0ff,#c000ff);
}

.aid .aid-btn2 {
  left: calc(9 * var(--u));
  top: calc(214 * var(--u));
  width: calc(185 * var(--u));
  height: calc(22 * var(--u));
  border-radius: calc(999 * var(--u));
  border: 1px solid #d9c5f5;
  background: #f6eeff;
  color: #5b00c2;
  font-size: calc(7.8 * var(--u));
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: aid-btn2 var(--aid-tempo) infinite linear;
}

.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;
}

.aid .aid-cur {
  position: absolute;
  left: calc(300 * var(--u));
  top: calc(250 * var(--u));
  width: calc(22 * var(--u));
  height: calc(22 * var(--u));
  opacity: 0;
  transform-origin: calc(3 * var(--u)) calc(2 * var(--u));
  filter: drop-shadow(0 calc(1 * var(--u)) calc(2 * var(--u)) rgba(0,0,0,.35));
  animation: aid-cur var(--aid-tempo) infinite linear;
  pointer-events: none;
}

.aid .aid-cur svg {
  width: 100%;
  height: 100%;
  display: block;
}

@keyframes aid-fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes aid-h0 {
  0%,22.000% {
    opacity: 1;
    transform: translateY(0);
  }

  25.000%,77.500% {
    opacity: 0;
    transform: translateY(-10px);
  }

  77.510% {
    opacity: 0;
    transform: translateY(10px);
  }

  86.000%,100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes aid-n1 {
  0%,23.500% {
    opacity: 0;
    transform: translateY(10px);
  }

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

  42.500%,100% {
    opacity: 0;
    transform: translateY(-10px);
  }
}

@keyframes aid-n2 {
  0%,41.500% {
    opacity: 0;
    transform: translateY(10px);
  }

  45.000%,53.000% {
    opacity: 1;
    transform: translateY(0);
  }

  55.500%,100% {
    opacity: 0;
    transform: translateY(-10px);
  }
}

@keyframes aid-n3 {
  0%,54.500% {
    opacity: 0;
    transform: translateY(10px);
  }

  58.000%,76.000% {
    opacity: 1;
    transform: translateY(0);
  }

  79.000%,100% {
    opacity: 0;
    transform: translateY(-10px);
  }
}

@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-scroll {
  0% {
    transform: translateY(0);
    opacity: 1;
    animation-timing-function: linear;
  }

  2.667% {
    transform: translateY(0);
    opacity: 1;
    animation-timing-function: cubic-bezier(.45,.05,.3,1);
  }

  20.000% {
    transform: translateY(calc(-309 * var(--u)));
    opacity: 1;
    animation-timing-function: cubic-bezier(.4,0,.5,1);
  }

  24.667% {
    transform: translateY(calc(-375 * var(--u)));
    opacity: .9;
    animation-timing-function: cubic-bezier(.4,0,.8,1);
  }

  28.667%,77.000% {
    transform: translateY(calc(-464 * var(--u)));
    opacity: 0;
    animation-timing-function: cubic-bezier(.2,.7,.2,1);
  }

  77.100% {
    transform: translateY(calc(26 * var(--u)));
    opacity: 0;
    animation-timing-function: cubic-bezier(.35,0,.25,1);
  }

  92.000%,100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes aid-last-hover {
  0%,16.000% {
    width: calc(205 * var(--u));
    height: calc(46 * var(--u));
    margin-left: 0;
    border-radius: calc(23 * var(--u));
    background-color: rgba(255,255,255,.07);
    border-color: rgba(18,192,255,.42);
    opacity: 1;
    animation-timing-function: cubic-bezier(.2,.7,.2,1);
  }

  18.667%,19.967% {
    width: calc(225 * var(--u));
    height: calc(70 * var(--u));
    margin-left: calc(-10 * var(--u));
    border-radius: calc(30 * var(--u));
    background-color: rgba(18,192,255,.14);
    border-color: rgba(18,192,255,.8);
    opacity: 1;
  }

  20.000%,77.000% {
    width: calc(225 * var(--u));
    height: calc(70 * var(--u));
    margin-left: calc(-10 * var(--u));
    border-radius: calc(30 * var(--u));
    background-color: rgba(18,192,255,.14);
    border-color: rgba(18,192,255,.8);
    opacity: 0;
  }

  77.100%,100% {
    width: calc(205 * var(--u));
    height: calc(46 * var(--u));
    margin-left: 0;
    border-radius: calc(23 * var(--u));
    background-color: rgba(255,255,255,.07);
    border-color: rgba(18,192,255,.42);
    opacity: 1;
  }
}

@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-sheen-last {
  0%,16.000% {
    opacity: 0;
  }

  18.667%,77.000% {
    opacity: 1;
  }

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

@keyframes aid-sheen-hero {
  0%,24.667% {
    opacity: 1;
  }

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

@keyframes aid-hero {
  0%,19.967% {
    opacity: 0;
    left: calc(290 * var(--u));
    top: calc(122 * var(--u));
    width: calc(225 * var(--u));
    height: calc(70 * var(--u));
    border-radius: calc(30 * var(--u));
    background-color: rgba(18,192,255,.14);
    border-color: rgba(18,192,255,.8);
    box-shadow: 0 0 0 0 rgba(0,0,0,0),0 0 0 0 rgba(192,0,255,0);
    animation-timing-function: linear;
  }

  20.000% {
    opacity: 1;
    left: calc(290 * var(--u));
    top: calc(122 * var(--u));
    width: calc(225 * var(--u));
    height: calc(70 * var(--u));
    border-radius: calc(30 * var(--u));
    background-color: rgba(18,192,255,.14);
    border-color: rgba(18,192,255,.8);
    box-shadow: 0 0 0 0 rgba(0,0,0,0),0 0 0 0 rgba(192,0,255,0);
    animation-timing-function: cubic-bezier(.55,0,.2,1);
  }

  24.667% {
    opacity: 1;
    left: calc(287 * var(--u));
    top: calc(88 * var(--u));
    width: calc(211 * var(--u));
    height: calc(214 * var(--u));
    border-radius: calc(16 * var(--u));
    background-color: rgba(44,14,90,.9);
    border-color: rgba(18,192,255,.5);
    box-shadow: 0 0 0 0 rgba(0,0,0,0),0 0 0 0 rgba(192,0,255,0);
  }

  25.333% {
    opacity: 1;
    left: calc(287 * var(--u));
    top: calc(88 * var(--u));
    width: calc(211 * var(--u));
    height: calc(214 * var(--u));
    border-radius: calc(16 * var(--u));
    background-color: rgba(44,14,90,.9);
    border-color: rgba(18,192,255,.5);
    box-shadow: 0 0 0 0 rgba(0,0,0,0),0 0 0 0 rgba(192,0,255,0);
    animation-timing-function: cubic-bezier(.55,0,.15,1);
  }

  29.333% {
    opacity: 1;
    left: calc(312 * var(--u));
    top: calc(35 * var(--u));
    width: calc(202 * var(--u));
    height: calc(290 * var(--u));
    border-radius: calc(18 * var(--u));
    background-color: #fbf8ff;
    border-color: rgba(255,255,255,0);
    box-shadow: 0 calc(10 * var(--u)) calc(34 * var(--u)) 0 rgba(0,0,0,.45),0 0 calc(44 * var(--u)) 0 rgba(192,0,255,.3);
    animation-timing-function: cubic-bezier(.3,.7,.3,1);
  }

  32.000%,40.667% {
    opacity: 1;
    left: calc(316 * var(--u));
    top: calc(25 * var(--u));
    width: calc(203 * var(--u));
    height: calc(276 * var(--u));
    border-radius: calc(18 * var(--u));
    background-color: #fbf8ff;
    border-color: rgba(255,255,255,0);
    box-shadow: 0 calc(10 * var(--u)) calc(34 * var(--u)) 0 rgba(0,0,0,.45),0 0 calc(44 * var(--u)) 0 rgba(192,0,255,.3);
    animation-timing-function: cubic-bezier(.3,.7,.3,1);
  }

  45.333%,77.000% {
    opacity: 1;
    left: calc(319 * var(--u));
    top: calc(28 * var(--u));
    width: calc(197 * var(--u));
    height: calc(276 * var(--u));
    border-radius: calc(16 * var(--u));
    background-color: #ece1fb;
    border-color: rgba(255,255,255,0);
    box-shadow: 0 calc(10 * var(--u)) calc(34 * var(--u)) 0 rgba(0,0,0,.45),0 0 calc(44 * var(--u)) 0 rgba(192,0,255,.3);
    animation-timing-function: cubic-bezier(.5,0,.8,.4);
  }

  82.000%,100% {
    opacity: 0;
    left: calc(319 * var(--u));
    top: calc(-270 * var(--u));
    width: calc(197 * var(--u));
    height: calc(276 * var(--u));
    border-radius: calc(16 * var(--u));
    background-color: #ece1fb;
    border-color: rgba(255,255,255,0);
    box-shadow: 0 calc(10 * var(--u)) calc(34 * var(--u)) 0 rgba(0,0,0,.45),0 0 calc(44 * var(--u)) 0 rgba(192,0,255,.3);
  }
}

@keyframes aid-hl {
  0%,25.333% {
    opacity: 1;
  }

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

@keyframes aid-hero-icon {
  0%,20.000% {
    top: calc(24 * var(--u));
  }

  24.667%,100% {
    top: calc(35 * var(--u));
  }
}

@keyframes aid-hd {
  0%,21.333% {
    opacity: 0;
  }

  24.000%,25.333% {
    opacity: 1;
  }

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

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

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

@keyframes aid-btn {
  0%,38.000% {
    background-color: #7d6ca3;
    transform: scale(1);
  }

  39.000% {
    background-color: #c000ff;
    transform: scale(.94);
  }

  40.667%,100% {
    background-color: #c000ff;
    transform: scale(1);
  }
}

@keyframes aid-btn2 {
  0%,51.333% {
    background-color: #f6eeff;
    color: #5b00c2;
    transform: scale(1);
  }

  52.333% {
    background-color: #5b00c2;
    color: #fff;
    transform: scale(.97);
  }

  54.000%,100% {
    background-color: #5b00c2;
    color: #fff;
    transform: scale(1);
  }
}

@keyframes aid-result2 {
  0%,40.667% {
    top: calc(335 * var(--u));
    left: calc(321 * var(--u));
    width: calc(203 * var(--u));
    background-color: #fdfbff;
    opacity: 1;
    animation-timing-function: cubic-bezier(.16,.84,.3,1);
  }

  45.333%,54.000% {
    top: calc(57 * var(--u));
    left: calc(321 * var(--u));
    width: calc(203 * var(--u));
    background-color: #fdfbff;
    opacity: 1;
    animation-timing-function: cubic-bezier(.3,.7,.3,1);
  }

  58.667%,77.000% {
    top: calc(43 * var(--u));
    left: calc(323 * var(--u));
    width: calc(197 * var(--u));
    background-color: #f1e8fc;
    opacity: 1;
    animation-timing-function: cubic-bezier(.5,0,.8,.4);
  }

  82.000%,100% {
    top: calc(-290 * var(--u));
    left: calc(323 * var(--u));
    width: calc(197 * var(--u));
    background-color: #f1e8fc;
    opacity: 0;
  }
}

@keyframes aid-result3 {
  0%,54.000% {
    top: calc(335 * var(--u));
    opacity: 1;
    animation-timing-function: cubic-bezier(.16,.84,.3,1);
  }

  58.667%,77.000% {
    top: calc(57 * var(--u));
    opacity: 1;
    animation-timing-function: cubic-bezier(.5,0,.8,.4);
  }

  82.000%,100% {
    top: calc(-290 * var(--u));
    opacity: 0;
  }
}

@keyframes aid-reveal {
  0%,59.333% {
    clip-path: inset(0 100% 0 0);
  }

  67.333%,100% {
    clip-path: inset(0 0 0 0);
  }
}

@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;
  }
}

@keyframes aid-cur {
  0%,14.000% {
    left: calc(422 * var(--u));
    top: calc(248 * var(--u));
    opacity: 0;
    transform: scale(1);
    animation-timing-function: cubic-bezier(.3,.6,.3,1);
  }

  16.000% {
    left: calc(437 * var(--u));
    top: calc(205 * var(--u));
    opacity: 1;
  }

  18.667% {
    left: calc(472 * var(--u));
    top: calc(179 * var(--u));
    opacity: 1;
    animation-timing-function: linear;
  }

  20.000% {
    left: calc(474 * var(--u));
    top: calc(181 * var(--u));
    opacity: 1;
    animation-timing-function: cubic-bezier(.5,0,.2,1);
  }

  24.667% {
    left: calc(492 * var(--u));
    top: calc(192 * var(--u));
    opacity: 1;
    animation-timing-function: cubic-bezier(.3,.7,.3,1);
  }

  29.333% {
    left: calc(518 * var(--u));
    top: calc(198 * var(--u));
    opacity: 1;
    animation-timing-function: ease-in-out;
  }

  32.000%,34.333% {
    left: calc(525 * var(--u));
    top: calc(201 * var(--u));
    opacity: 1;
    animation-timing-function: cubic-bezier(.4,0,.2,1);
  }

  38.000% {
    left: calc(448 * var(--u));
    top: calc(271 * var(--u));
    opacity: 1;
    transform: scale(1);
    animation-timing-function: ease-in;
  }

  39.000% {
    left: calc(448 * var(--u));
    top: calc(272 * var(--u));
    opacity: 1;
    transform: scale(.86);
    animation-timing-function: ease-out;
  }

  40.000% {
    left: calc(449 * var(--u));
    top: calc(272 * var(--u));
    opacity: 1;
    transform: scale(1);
    animation-timing-function: cubic-bezier(.4,0,.2,1);
  }

  45.333%,48.000% {
    left: calc(489 * var(--u));
    top: calc(273 * var(--u));
    opacity: 1;
    animation-timing-function: cubic-bezier(.4,0,.2,1);
  }

  51.333% {
    left: calc(419 * var(--u));
    top: calc(281 * var(--u));
    opacity: 1;
    transform: scale(1);
    animation-timing-function: ease-in;
  }

  52.333% {
    left: calc(419 * var(--u));
    top: calc(282 * var(--u));
    opacity: 1;
    transform: scale(.86);
    animation-timing-function: ease-out;
  }

  53.333% {
    left: calc(420 * var(--u));
    top: calc(282 * var(--u));
    opacity: 1;
    transform: scale(1);
    animation-timing-function: cubic-bezier(.4,0,.2,1);
  }

  58.667%,77.000% {
    left: calc(489 * var(--u));
    top: calc(273 * var(--u));
    opacity: 1;
    animation-timing-function: cubic-bezier(.5,0,.8,.4);
  }

  82.000%,100% {
    left: calc(553 * var(--u));
    top: calc(100 * var(--u));
    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;
  }
}