/* ============================================================
   EXPERIENCE INTELLIGENCE ARCHITECTURE
   Cards + line -> rotates -> fades out / brain fades in -> curves + circles
   -> glow balls -> orbiting glow on the Decision card
   ============================================================ */

.architecture { display: grid; width: min(100%, 100%); margin: 64px auto 0; gap: 0; }
.architecture > i { display: none; }
.architecture article {
  display: grid; grid-template-columns: 74px 210px 1fr; gap: 20px; align-items: center;
  min-height: 82px; margin: 0; border-bottom: 1px solid rgba(37, 111, 211, .22);
  padding: 18px 24px;
}
/* 1-3: shades of blue (light -> deeper) | 4: purple | 5: pink -> purple gradient */
.architecture article:nth-of-type(1) { width: 86%; background: #e6f8ff; }
.architecture article:nth-of-type(2) { width: 88%; margin-left: 5%; background: #dbebff; }
.architecture article:nth-of-type(3) { width: 86%; margin-left: 9%; background: #cfdffb; }
.architecture article:nth-of-type(4) { width: 93%; margin-left: 4%; background: #eee8ff; }
.architecture article:nth-of-type(5) { width: 100%; color: #fff; background: linear-gradient(90deg, #550071, #9900cb 48%, #5b00c2); }
.architecture span { font-size: 10px; font-weight: 700; letter-spacing: .13em; padding-left: 24px; color: #5b00c2; }
.architecture article:nth-of-type(-n+3) span { color: #1f5fbf; }
.architecture article:nth-of-type(5) span { color: #b8efff; }
.architecture b { font-size: 20px; margin: 0; }
.architecture p { margin: 0; color: #51657a; font-size: 13px; line-height: 1.45; padding-right: 30px; }
.architecture article:nth-of-type(5) p { color: rgba(255,255,255,.78); }
@media (max-width: 900px) {
  .architecture article, .architecture article:nth-of-type(n) { width: 100%; margin-left: 0; grid-template-columns: 1fr; gap: 6px; }
}

/* ---- stage ---- */
.mitre-architecture .architecture {
  position: relative;
  padding-left: 330px;          /* stage for brain + curves */
  min-height: 560px;
}

/* ---- the single vertical line (becomes the "pipe") ---- */
.arch-line {
  position: absolute;
  width: 2px;
  margin-left: -1px;
  border-radius: 2px;
  background: linear-gradient(#ff54c2, #c000ff 55%, #12c0ff);
  transform-origin: 50% 50%;
  transform: rotate(0deg) scaleY(1);
  opacity: .25;
  pointer-events: none;
  z-index: 2;
}
.arch-line.turn {
  transition: transform .4s cubic-bezier(.65, 0, .35, .25);
  transform: rotate(90deg) scaleY(var(--arch-sy, .3));
  opacity: .12
}
.arch-line.gone {
  /* must repeat the transform timing, otherwise adding .gone snaps the rotation */
  transition: transform .4s cubic-bezier(.65, 0, .35, 1), opacity .2s ease;
  opacity: 0;
}

/* ---- brain / agent hub ---- */
.arch-brain {
  position: absolute;
  width: 125px;                 /* JS reads this for positioning */

  /* dotted ring around the brain (read by JS; plain numbers or px, no calc) */
  --ring-diameter: 150px;       /* outer diameter of the ring */
  --ring-dots: 48;              /* number of dots */
  --ring-dot-size: 1.5px;       /* diameter of each dot */
  --ring-color: #b38cff;
  --ring-opacity: .6;
  --ring-spin: 60s;             /* seconds per full turn; see .arch-ring svg to switch off */

  opacity: 0;
  transform: scale(1.25);
  transition: opacity .8s ease, transform .9s cubic-bezier(.2, .7, .2, 1);
  pointer-events: none;
  z-index: 2;
}
.arch-brain.on {
  opacity: 1;
  transform: scale(1.5);
}
.arch-brain > svg { display: block; width: 100%; height: auto; overflow: visible; }

/* dotted ring: centered on the brain, sits behind the lattice */
.arch-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--ring-diameter);
  height: var(--ring-diameter);
  transform: translate(-50%, -50%);
  opacity: var(--ring-opacity);
  pointer-events: none;
}
.arch-ring svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  animation: arch-ring-spin var(--ring-spin) linear infinite;   /* use "animation: none;" for a static ring */
}
.arch-ring circle { fill: var(--ring-color); }
@keyframes arch-ring-spin { to { transform: rotate(360deg); } }

.arch-brain .pulse { animation: arch-pulse 3.2s ease-in-out infinite; }
@keyframes arch-pulse { 50% { opacity: .25; } }

/* soft glow on the brain (and ring) each time an incoming ball lands */
.arch-brain.hit > svg,
.arch-brain.hit .arch-ring { animation: arch-brain-hit .8s ease-out; }
@keyframes arch-brain-hit {
  0%   { filter: drop-shadow(0 0 0 var(--glow, #12c0ff)); }
  35%  { filter: drop-shadow(0 0 8px var(--glow, #12c0ff)) drop-shadow(0 0 18px var(--glow, #12c0ff)); }
  100% { filter: drop-shadow(0 0 0 var(--glow, #12c0ff)); }
}

/* ---- connection overlay ---- */
.arch-links {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 4;
  opacity: .75;
}
/* opacity is controlled by each curve's gradient (set in JS), so none here */
.arch-links .arch-curve {
  fill: none;
  stroke-width: 1.3;
  stroke-linecap: round;
}
.arch-links .arch-node-ring,
.arch-links .arch-node-dot {
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0);
  opacity: 0;
  transition: transform .5s cubic-bezier(.2, .9, .3, 1.4), opacity .4s ease;
}
.arch-links .arch-node-ring { fill: none; stroke-width: 1; }
.arch-links .arch-node-dot  { stroke: #f0f1f3; stroke-width: 4; paint-order: stroke; }
.arch-links .arch-node-dot.show,
.arch-links .arch-node-ring.show { transform: scale(1); opacity: 1; }

/* pop + glow when a ball touches the circle (--glow is set per node in JS) */
.arch-links .arch-node-dot.hit  { animation: arch-hit .8s ease-out; }
.arch-links .arch-node-ring.hit { animation: arch-ring-hit .8s ease-out; }
@keyframes arch-hit {
  0%   { transform: scale(1);    filter: drop-shadow(0 0 0 var(--glow)); }
  35%  { transform: scale(1.55); filter: drop-shadow(0 0 6px var(--glow)) drop-shadow(0 0 16px var(--glow)); }
  100% { transform: scale(1);    filter: drop-shadow(0 0 0 var(--glow)); }
}
@keyframes arch-ring-hit {
  0%   { transform: scale(1);   opacity: 1;  filter: drop-shadow(0 0 0 var(--glow)); }
  35%  { transform: scale(1.5); opacity: 1;  filter: drop-shadow(0 0 6px var(--glow)); }
  100% { transform: scale(1);   opacity: 1;  filter: drop-shadow(0 0 0 var(--glow)); }
}

.arch-links .arch-ball {
  fill: #fff;
  opacity: 0;
  filter: drop-shadow(0 0 5px #12c0ff) drop-shadow(0 0 10px #c000ff);
}
.arch-links .arch-trail {
  fill: none;
  stroke: #fff;
  stroke-width: 3;
  stroke-linecap: round;
  opacity: 0;
}

/* ---- orbiting glow around the Decision card (05) ----
   The orbit is a <g> of many thin dash segments built in JS. Each segment has its
   own opacity (head = 1, tail = 0) and an offset in --o, and they all travel together. */
.arch-links .arch-orbit {
  opacity: 0;
  filter: drop-shadow(0 0 4px var(--glow, #ff54c2)) drop-shadow(0 0 10px var(--glow, #ff54c2));
  pointer-events: none;
}
.arch-links .arch-orbit path {
  fill: none;
  stroke: var(--glow, #ff54c2);
  stroke-width: 2;
  stroke-linecap: butt;
}
.arch-links .arch-orbit.on {
  opacity: 1;                                  /* overall strength; lower if too bright */
  transition: opacity .4s ease;
}
.arch-links .arch-orbit.on path {
  animation: arch-orbit 6s linear infinite;   /* lap time */
}
@keyframes arch-orbit {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -100; }            /* one full clockwise lap (path length is 100) */
}

/* ---- mobile / narrow: plain list, no stage ---- */
@media (max-width: 900px) {
  .mitre-architecture .architecture { padding-left: 0; min-height: 0; }
  .arch-line, .arch-brain, .arch-links { display: none; }
  .architecture span { padding-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .arch-brain .pulse, .arch-ring svg { animation: none; }
  .arch-line.turn, .arch-line.gone, .arch-brain { transition: none; }
  .arch-links .arch-orbit.on path { animation: none; }
}