/* ============================================================
   Systems capability cards · Magic UI MagicCard port (MIT), gradient mode.
   Attribution and every changed value: assets/INFRA-CARDS-SOURCE.md.
   The four infra items become cards: a mouse tracked gradient border (the
   source two layer background, border box over padding box) and a soft
   spotlight, both following the pointer, plus a staggered rise on entry.
   ============================================================ */
#systems .ic-infra.mc-grid{
  gap:clamp(14px, 1.6vw, 22px);
  margin-top:clamp(40px, 4.6vw, 56px);
}
/* Include mc-grid so the old hairline layout's first/last-child padding
   resets cannot remove a card's inset (especially the first RTL card). */
#systems .ic-infra.mc-grid .mc-card{
  --mc-size:220px;               /* source gradientSize 200 */
  --mc-x:-220px; --mc-y:-220px;  /* source: the gradient rests off the card */
  --mc-from:#A78BFA;             /* source gradientFrom #9E7AFF, here the brand lavender */
  --mc-to:#C4B5FD;               /* source gradientTo #FE8BBB, here a paler lavender */
  --mc-line:#E8E1FA;             /* source var(--color-border) */
  position:relative; isolation:isolate; overflow:hidden;
  min-width:0; box-sizing:border-box;
  display:flex; flex-direction:column; align-items:flex-start;
  padding:clamp(20px, 2vw, 26px) clamp(20px, 2vw, 26px) clamp(22px, 2.2vw, 28px);
  border:1px solid transparent; border-radius:20px;
  border-inline-start:1px solid transparent;
  background:
    linear-gradient(#FFFFFF 0 0) padding-box,
    radial-gradient(var(--mc-size) circle at var(--mc-x) var(--mc-y), var(--mc-from), var(--mc-to), var(--mc-line) 100%) border-box;
  box-shadow:0 8px 18px -4px rgba(60,30,120,.12), inset 0 1px 0 rgba(255,255,255,.8);
  transition:box-shadow .3s ease-out, transform .3s ease-out;
}
#systems .ic-infra .mc-card:hover{ box-shadow:0 14px 28px -8px rgba(60,30,120,.2), inset 0 1px 0 rgba(255,255,255,.8) }
/* Spotlight: the source gradient layer (gradientOpacity .8, #262626 on dark),
   here a lavender wash that only shows while the pointer is over the card. */
#systems .ic-infra .mc-card::after{
  content:""; position:absolute; inset:1px; z-index:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(var(--mc-size) circle at var(--mc-x) var(--mc-y), rgba(167,139,250,.16), transparent 100%);
  opacity:0; transition:opacity .3s ease-out;
}
#systems .ic-infra .mc-card:hover::after{ opacity:1 }
#systems .ic-infra .mc-card > *{ position:relative; z-index:1 }
#systems .ic-infra .mc-card .mc-icon{
  display:grid; place-items:center; width:42px; height:42px; margin-bottom:14px;
  border-radius:12px; color:#6D3FE0;
  background:linear-gradient(180deg, #F3EEFF, #EDE6FF);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 1px 2px rgba(60,30,120,.08);
}
#systems .ic-infra .mc-card .mc-icon svg{ width:22px; height:22px; display:block }
#systems .ic-infra.mc-grid .mc-card h3{
  margin:0 0 10px; min-height:2.7em; text-align:start;
}
#systems .ic-infra.mc-grid .mc-card p{ text-align:start; overflow-wrap:break-word }

/* Entry: Magic UI BlurFade values (opacity, blur 6px, a short rise), staggered
   by card index. Visible by default so the row is complete without JS. */
#systems .ic-infra.mc-grid.mc-armed .mc-card{
  opacity:0; transform:translate3d(0, 14px, 0) scale(.97); filter:blur(6px);
  transition:opacity .6s ease-out, transform .6s ease-out, filter .6s ease-out, box-shadow .3s ease-out;
  transition-delay:calc(var(--mc-i, 0) * 90ms);
}
#systems .ic-infra.mc-grid.mc-armed.mc-in .mc-card{ opacity:1; transform:none; filter:none }

@media (max-width:1000px){
  #systems .ic-infra.mc-grid .mc-card,
  #systems .ic-infra.mc-grid .mc-card:nth-child(odd),
  #systems .ic-infra.mc-grid .mc-card:nth-child(even),
  #systems .ic-infra.mc-grid .mc-card:nth-child(-n+2),
  #systems .ic-infra.mc-grid .mc-card:nth-child(n+3){
    padding:20px 20px 22px; border-top:1px solid transparent; border-inline-start:1px solid transparent;
  }
}
@media (max-width:600px){
  #systems .ic-infra.mc-grid .mc-card,
  #systems .ic-infra.mc-grid .mc-card:first-child,
  #systems .ic-infra.mc-grid .mc-card:last-child,
  #systems .ic-infra.mc-grid .mc-card:nth-child(n+2){ padding:18px 18px 20px; border-top:1px solid transparent }
}
@media (max-width:520px){
  #systems .ic-infra.mc-grid .mc-card h3{ min-height:0 }
}

@media (prefers-reduced-motion:reduce){
  #systems .ic-infra.mc-grid .mc-card{ opacity:1 !important; transform:none !important; filter:none !important; transition:none !important }
  #systems .ic-infra .mc-card::after{ display:none }
}
html.a11y-nomotion #systems .ic-infra.mc-grid .mc-card{ opacity:1 !important; transform:none !important; filter:none !important; transition:none !important }
html.a11y-contrast #systems .ic-infra .mc-card{ background:#fff; border-color:#6D3FE0 }