/* ============================================================ */
/* AI Capability Stack — animated "Our tech stack" section      */
/* Theme-aware (uses --accent / --base-tint / --t-* tokens)     */
/* ============================================================ */

.mxd-aistack {
  position: relative;
  overflow: hidden;
  border-radius: var(--_radius-l);
  /* horizontal padding is cancelled by the negative margins below so the
     inner content stays aligned with the sections above, while the panel
     bleeds into the gutter to keep breathing room from its rounded edge */
  padding: 2.8rem 1rem;
  margin-left: -1rem;
  margin-right: -1rem;
}

/* soft animated aurora glow behind the cards */
.mxd-aistack__glow {
  position: absolute;
  inset: -20% -10% -20% -10%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(38% 44% at 18% 22%, rgba(var(--accent-rgb), 0.16), transparent 70%),
    radial-gradient(40% 46% at 82% 78%, rgba(var(--additional-rgb), 0.14), transparent 72%);
  -webkit-filter: blur(20px);
  filter: blur(20px);
  opacity: 0.9;
  -webkit-animation: aistack-aurora 18s ease-in-out infinite alternate;
  animation: aistack-aurora 18s ease-in-out infinite alternate;
}

@-webkit-keyframes aistack-aurora {
  0%   { -webkit-transform: translate3d(-2%, -1%, 0) scale(1);    }
  100% { -webkit-transform: translate3d(3%, 2%, 0) scale(1.08);   }
}
@keyframes aistack-aurora {
  0%   { transform: translate3d(-2%, -1%, 0) scale(1);    }
  100% { transform: translate3d(3%, 2%, 0) scale(1.08);   }
}

/* ---- left column eyebrow + subline ---- */
.mxd-aistack__eyebrow {
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 1.6rem;
  padding: 0.5rem 1.2rem 0.5rem 1rem;
  border: 1px solid rgba(var(--accent-rgb), 0.35);
  border-radius: 100px;
  font-size: 1.2rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--t-bright);
  background-color: rgba(var(--accent-rgb), 0.06);
}

.mxd-aistack__eyebrow::before {
  content: "";
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  background-color: var(--accent);
  -webkit-box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.6);
  box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.6);
  -webkit-animation: aistack-ping 2.4s ease-out infinite;
  animation: aistack-ping 2.4s ease-out infinite;
}

@-webkit-keyframes aistack-ping {
  0%   { -webkit-box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.6); }
  70%, 100% { -webkit-box-shadow: 0 0 0 10px rgba(var(--accent-rgb), 0); }
}
@keyframes aistack-ping {
  0%   { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.6); }
  70%, 100% { box-shadow: 0 0 0 10px rgba(var(--accent-rgb), 0); }
}

.mxd-aistack__subline {
  max-width: 34rem;
  margin-top: 2rem;
  color: var(--t-muted);
}

/* ---- cards grid ---- */
.mxd-aistack__grid {
  position: relative;
  z-index: 1;
}

.mxd-aistack__card {
  /* pointer position (px, relative to the card) — updated by
     js/aistack-spotlight.js; defaults keep a graceful look with no JS */
  --mx: 50%;
  --my: 0%;
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 1.6rem;
  height: 100%;
  padding: 2.6rem;
  border: 1px solid rgba(var(--accent-rgb), 0.1);
  border-radius: var(--_radius-l);
  background-color: var(--base-tint);
  overflow: hidden;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  will-change: transform;
  -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.5s var(--_animbezier),
              box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

/* hairline border that brightens toward the cursor (masked to 1px edge) */
.mxd-aistack__card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background:
    radial-gradient(220px circle at var(--mx) var(--my),
      rgba(var(--accent-rgb), 0.9),
      rgba(var(--accent-rgb), 0.15) 45%,
      transparent 72%),
    linear-gradient(135deg,
      rgba(var(--accent-rgb), 0.4),
      rgba(var(--accent-rgb), 0) 38%,
      rgba(var(--additional-rgb), 0) 62%,
      rgba(var(--additional-rgb), 0.32));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.5;
  -webkit-transition: opacity 0.5s var(--_animbezier);
  transition: opacity 0.5s var(--_animbezier);
  pointer-events: none;
}

/* soft spotlight on the card surface, tracking the cursor */
.mxd-aistack__card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(360px circle at var(--mx) var(--my),
              rgba(var(--accent-rgb), 0.12), transparent 60%);
  opacity: 0;
  -webkit-transition: opacity 0.45s ease;
  transition: opacity 0.45s ease;
  pointer-events: none;
}

.no-touch .mxd-aistack__card:hover {
  -webkit-transform: translateY(-4px);
  transform: translateY(-4px);
  border-color: rgba(var(--accent-rgb), 0.22);
  /* layered, mostly-neutral elevation — depth, not a colored bloom */
  -webkit-box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.18),
    0 14px 30px -10px rgba(0, 0, 0, 0.5),
    0 30px 64px -24px rgba(var(--accent-rgb), 0.22);
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.18),
    0 14px 30px -10px rgba(0, 0, 0, 0.5),
    0 30px 64px -24px rgba(var(--accent-rgb), 0.22);
}

.no-touch .mxd-aistack__card:hover::before { opacity: 1; }
.no-touch .mxd-aistack__card:hover::after  { opacity: 1; }

.mxd-aistack__card-head {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: justify;
  justify-content: space-between;
  gap: 1.6rem;
}

.mxd-aistack__index {
  font-size: 1.3rem;
  letter-spacing: 0.1em;
  color: var(--t-muted-extra);
  font-variant-numeric: tabular-nums;
}

.mxd-aistack__title {
  margin: 0;
  line-height: 1.15;
  color: var(--t-bright);
}

.mxd-aistack__desc {
  margin: 0;
  color: var(--t-muted);
}

/* ---------------------------------------------------------- */
/* Animated icon stage — shared                                */
/* ---------------------------------------------------------- */
.mxd-aistack__viz {
  position: relative;
  width: 6.4rem;
  height: 6.4rem;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  border-radius: var(--_radius-m);
  background-color: rgba(var(--accent-rgb), 0.08);
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  overflow: hidden;
  color: var(--accent);
}

/* speed-up icons on hover */
.no-touch .mxd-aistack__card:hover .mxd-aistack__viz * {
  -webkit-animation-duration: 0.9s;
  animation-duration: 0.9s;
}

/* 1) Diffusion grid — noise resolving into an image */
.viz-diffusion {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 0.4rem;
  width: 3.2rem;
  height: 3.2rem;
}
.viz-diffusion i {
  display: block;
  border-radius: 2px;
  background-color: currentColor;
  -webkit-animation: viz-diffuse 2.6s ease-in-out infinite;
  animation: viz-diffuse 2.6s ease-in-out infinite;
}
.viz-diffusion i:nth-child(1)  { animation-delay: 0.00s; }
.viz-diffusion i:nth-child(2)  { animation-delay: 0.18s; }
.viz-diffusion i:nth-child(3)  { animation-delay: 0.36s; }
.viz-diffusion i:nth-child(4)  { animation-delay: 0.54s; }
.viz-diffusion i:nth-child(5)  { animation-delay: 0.12s; }
.viz-diffusion i:nth-child(6)  { animation-delay: 0.30s; }
.viz-diffusion i:nth-child(7)  { animation-delay: 0.48s; }
.viz-diffusion i:nth-child(8)  { animation-delay: 0.66s; }
.viz-diffusion i:nth-child(9)  { animation-delay: 0.24s; }
.viz-diffusion i:nth-child(10) { animation-delay: 0.42s; }
.viz-diffusion i:nth-child(11) { animation-delay: 0.60s; }
.viz-diffusion i:nth-child(12) { animation-delay: 0.78s; }
.viz-diffusion i:nth-child(13) { animation-delay: 0.36s; }
.viz-diffusion i:nth-child(14) { animation-delay: 0.54s; }
.viz-diffusion i:nth-child(15) { animation-delay: 0.72s; }
.viz-diffusion i:nth-child(16) { animation-delay: 0.90s; }

@-webkit-keyframes viz-diffuse {
  0%, 100% { opacity: 0.15; -webkit-transform: scale(0.6); }
  50%      { opacity: 1;    -webkit-transform: scale(1);   }
}
@keyframes viz-diffuse {
  0%, 100% { opacity: 0.15; transform: scale(0.6); }
  50%      { opacity: 1;    transform: scale(1);   }
}

/* 2) Voice equalizer */
.viz-voice {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.4rem;
  height: 3.2rem;
}
.viz-voice i {
  display: block;
  width: 0.4rem;
  border-radius: 100px;
  background-color: currentColor;
  -webkit-animation: viz-eq 1.1s ease-in-out infinite;
  animation: viz-eq 1.1s ease-in-out infinite;
}
.viz-voice i:nth-child(1) { animation-delay: -0.2s; }
.viz-voice i:nth-child(2) { animation-delay: -0.8s; }
.viz-voice i:nth-child(3) { animation-delay: -0.4s; }
.viz-voice i:nth-child(4) { animation-delay: -1.0s; }
.viz-voice i:nth-child(5) { animation-delay: -0.6s; }

@-webkit-keyframes viz-eq {
  0%, 100% { height: 0.8rem; }
  50%      { height: 3.2rem; }
}
@keyframes viz-eq {
  0%, 100% { height: 0.8rem; }
  50%      { height: 3.2rem; }
}

/* 3) Lipsync — a talking mouth (curved lips part, mouth opens in a speech cadence) */
.viz-sync { width: 3.6rem; height: 3.6rem; }
.viz-sync svg { width: 100%; height: 100%; display: block; overflow: visible; }
/* upper + lower lip — curved strokes */
.viz-sync .lip {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.viz-sync .lip-upper {
  -webkit-animation: viz-lip-upper 1.4s ease-in-out infinite;
  animation: viz-lip-upper 1.4s ease-in-out infinite;
}
.viz-sync .lip-lower {
  -webkit-animation: viz-lip-lower 1.4s ease-in-out infinite;
  animation: viz-lip-lower 1.4s ease-in-out infinite;
}
/* open-mouth fill between the lips */
.viz-sync .mouth-open {
  fill: currentColor;
  opacity: 0.18;
  -webkit-transform-box: fill-box;
  transform-box: fill-box;
  -webkit-transform-origin: center;
  transform-origin: center;
  -webkit-transform: scaleY(0.06);
  transform: scaleY(0.06);
  -webkit-animation: viz-mouth 1.4s ease-in-out infinite;
  animation: viz-mouth 1.4s ease-in-out infinite;
}

@-webkit-keyframes viz-lip-upper {
  0%, 100% { -webkit-transform: translateY(0); }
  20%      { -webkit-transform: translateY(-4px); }
  40%      { -webkit-transform: translateY(-1.5px); }
  60%      { -webkit-transform: translateY(-3.2px); }
  80%      { -webkit-transform: translateY(-1px); }
}
@keyframes viz-lip-upper {
  0%, 100% { transform: translateY(0); }
  20%      { transform: translateY(-4px); }
  40%      { transform: translateY(-1.5px); }
  60%      { transform: translateY(-3.2px); }
  80%      { transform: translateY(-1px); }
}
@-webkit-keyframes viz-lip-lower {
  0%, 100% { -webkit-transform: translateY(0); }
  20%      { -webkit-transform: translateY(4px); }
  40%      { -webkit-transform: translateY(1.5px); }
  60%      { -webkit-transform: translateY(3.2px); }
  80%      { -webkit-transform: translateY(1px); }
}
@keyframes viz-lip-lower {
  0%, 100% { transform: translateY(0); }
  20%      { transform: translateY(4px); }
  40%      { transform: translateY(1.5px); }
  60%      { transform: translateY(3.2px); }
  80%      { transform: translateY(1px); }
}
@-webkit-keyframes viz-mouth {
  0%, 100% { -webkit-transform: scaleY(0.06); opacity: 0.15; }
  20%      { -webkit-transform: scaleY(0.9);  opacity: 0.35; }
  40%      { -webkit-transform: scaleY(0.35); opacity: 0.25; }
  60%      { -webkit-transform: scaleY(0.7);  opacity: 0.32; }
  80%      { -webkit-transform: scaleY(0.25); opacity: 0.2;  }
}
@keyframes viz-mouth {
  0%, 100% { transform: scaleY(0.06); opacity: 0.15; }
  20%      { transform: scaleY(0.9);  opacity: 0.35; }
  40%      { transform: scaleY(0.35); opacity: 0.25; }
  60%      { transform: scaleY(0.7);  opacity: 0.32; }
  80%      { transform: scaleY(0.25); opacity: 0.2;  }
}

/* 4) Multilingual glyph cycle */
.viz-lang {
  position: relative;
  width: 3.6rem;
  height: 3.6rem;
}
.viz-lang span {
  position: absolute;
  inset: 0;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  font-size: 2.8rem;
  font-weight: 700;
  line-height: 1;
  color: currentColor;
  opacity: 0;
  -webkit-animation: viz-glyph 7.5s linear infinite;
  animation: viz-glyph 7.5s linear infinite;
}
.viz-lang span:nth-child(1) { animation-delay: 0s; }
.viz-lang span:nth-child(2) { animation-delay: 1.5s; }
.viz-lang span:nth-child(3) { animation-delay: 3s; }
.viz-lang span:nth-child(4) { animation-delay: 4.5s; }
.viz-lang span:nth-child(5) { animation-delay: 6s; }

@-webkit-keyframes viz-glyph {
  0%   { opacity: 0; -webkit-transform: translateY(40%) scale(0.8); }
  6%   { opacity: 1; -webkit-transform: translateY(0)   scale(1);   }
  20%  { opacity: 1; -webkit-transform: translateY(0)   scale(1);   }
  26%  { opacity: 0; -webkit-transform: translateY(-40%) scale(0.8); }
  100% { opacity: 0; }
}
@keyframes viz-glyph {
  0%   { opacity: 0; transform: translateY(40%) scale(0.8); }
  6%   { opacity: 1; transform: translateY(0)   scale(1);   }
  20%  { opacity: 1; transform: translateY(0)   scale(1);   }
  26%  { opacity: 0; transform: translateY(-40%) scale(0.8); }
  100% { opacity: 0; }
}

/* 5) Neural network (SVG) */
.viz-net { width: 4rem; height: 4rem; }
.viz-net svg { width: 100%; height: 100%; display: block; }
.viz-net .net-link {
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-dasharray: 4 5;
  opacity: 0.45;
  -webkit-animation: viz-flow 1.6s linear infinite;
  animation: viz-flow 1.6s linear infinite;
}
.viz-net .net-node {
  fill: currentColor;
  -webkit-animation: viz-node 2s ease-in-out infinite;
  animation: viz-node 2s ease-in-out infinite;
}
.viz-net .net-node:nth-of-type(2) { animation-delay: 0.3s; }
.viz-net .net-node:nth-of-type(3) { animation-delay: 0.6s; }
.viz-net .net-node:nth-of-type(4) { animation-delay: 0.9s; }
.viz-net .net-node:nth-of-type(5) { animation-delay: 1.2s; }

@-webkit-keyframes viz-flow { to { stroke-dashoffset: -18; } }
@keyframes viz-flow { to { stroke-dashoffset: -18; } }
@-webkit-keyframes viz-node {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 1;   }
}
@keyframes viz-node {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 1;   }
}

/* 6) Custom software — terminal streaming out lines of code */
.viz-term {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 0.5rem;
  width: 4rem;
  height: 3.4rem;
  padding: 0.55rem 0.5rem;
  border-radius: 0.6rem;
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  background-color: rgba(var(--accent-rgb), 0.07);
}
.viz-term .term-line {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.35rem;
  height: 0.4rem;
}
/* prompt chevron */
.viz-term .term-line::before {
  content: "";
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 0;
  height: 0;
  border-top: 0.26rem solid transparent;
  border-bottom: 0.26rem solid transparent;
  border-left: 0.34rem solid currentColor;
  opacity: 0.85;
}
/* the streamed code on each line — types out left to right */
.viz-term .term-line i {
  display: block;
  height: 0.4rem;
  border-radius: 100px;
  background-color: currentColor;
  opacity: 0.75;
  -webkit-transform-origin: left center;
  transform-origin: left center;
  -webkit-animation: viz-type 2.4s steps(1, end) infinite;
  animation: viz-type 2.4s steps(1, end) infinite;
}
.viz-term .term-line:nth-child(1) i { width: 1.8rem; -webkit-animation-delay: 0s;   animation-delay: 0s;   }
.viz-term .term-line:nth-child(2) i { width: 1.1rem; -webkit-animation-delay: 0.5s; animation-delay: 0.5s; }
.viz-term .term-line:nth-child(3) i { width: 1.5rem; -webkit-animation-delay: 1s;   animation-delay: 1s;   }
/* blinking cursor on the last line */
.viz-term .term-line b {
  display: block;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 0.3rem;
  height: 0.4rem;
  border-radius: 1px;
  background-color: currentColor;
  -webkit-animation: viz-caret 1s steps(1, end) infinite;
  animation: viz-caret 1s steps(1, end) infinite;
}

@-webkit-keyframes viz-type {
  0%, 100% { -webkit-transform: scaleX(0); }
  18%      { -webkit-transform: scaleX(1); }
  88%      { -webkit-transform: scaleX(1); }
}
@keyframes viz-type {
  0%, 100% { transform: scaleX(0); }
  18%      { transform: scaleX(1); }
  88%      { transform: scaleX(1); }
}
@-webkit-keyframes viz-caret {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}
@keyframes viz-caret {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

/* ---------------------------------------------------------- */
/* Responsive tuning                                           */
/* ---------------------------------------------------------- */
/* match the container gutter (4.5rem) so the panel bleed stays on-screen */
@media only screen and (min-width: 768px) {
  .mxd-aistack {
    padding: 4.4rem 3rem;
    margin-left: -3rem;
    margin-right: -3rem;
  }
}

@media only screen and (max-width: 991px) {
  .mxd-aistack__subline { margin-bottom: 4rem; }
}

@media only screen and (max-width: 575px) {
  .mxd-aistack__card { padding: 2.2rem; }
  .mxd-aistack__viz { width: 5.4rem; height: 5.4rem; }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  .mxd-aistack__glow,
  .mxd-aistack__eyebrow::before,
  .mxd-aistack__viz *,
  .viz-net .net-link {
    -webkit-animation: none !important;
    animation: none !important;
  }
  .mxd-aistack__viz .viz-lang span:first-child { opacity: 1; }
}