/* ===========================================================
   cards-anim.css — sfondo animato delle card strategia (System A / B / Gold)
   Additivo, caricato per ULTIMO. Aurora soffusa che deriva lentamente
   DENTRO il vetro (mantiene glass + backdrop-blur + accento top + sheen al mouse).
   Leggera (animazione lenta, 3 sole card). A/B = ciano/viola, Gold = ambra.
   Rispetta prefers-reduced-motion e prefers-reduced-transparency.
   =========================================================== */

.strat-grid .strat{
  background:
    radial-gradient(70% 60% at 18% 12%, rgba(34,211,238,.18), transparent 60%),
    radial-gradient(70% 60% at 85% 88%, rgba(168,85,247,.15), transparent 62%),
    linear-gradient(165deg,rgba(20,26,60,.62),rgba(10,14,32,.55)) !important;   /* vetro (sotto) */
  background-size:180% 180%, 180% 180%, 100% 100% !important;
  background-repeat:no-repeat !important;
  animation:stratAurora 20s ease-in-out infinite alternate;
}
.strat-grid .strat.feature{
  background:
    radial-gradient(65% 58% at 20% 12%, rgba(34,211,238,.20), transparent 60%),
    radial-gradient(65% 58% at 88% 86%, rgba(168,85,247,.17), transparent 62%),
    linear-gradient(150deg,rgba(34,40,90,.66),rgba(12,16,40,.6)) !important;
  background-size:180% 180%, 180% 180%, 100% 100% !important;
  background-repeat:no-repeat !important;
  animation:stratAurora 24s ease-in-out infinite alternate;
}
.strat-grid .strat.gold{
  background:
    radial-gradient(70% 60% at 18% 12%, rgba(245,183,72,.20), transparent 60%),
    radial-gradient(70% 60% at 85% 88%, rgba(184,115,47,.17), transparent 62%),
    linear-gradient(165deg,rgba(20,26,60,.62),rgba(10,14,32,.55)) !important;
  background-size:180% 180%, 180% 180%, 100% 100% !important;
  background-repeat:no-repeat !important;
  animation:stratAuroraGold 22s ease-in-out infinite alternate;
}

@keyframes stratAurora{
  0%  {background-position: 0% 40%, 100% 60%, 0 0}
  100%{background-position: 65% 10%, 30% 90%, 0 0}
}
@keyframes stratAuroraGold{
  0%  {background-position: 10% 35%, 90% 65%, 0 0}
  100%{background-position: 70% 12%, 25% 88%, 0 0}
}

/* accessibilità: niente moto se richiesto */
@media (prefers-reduced-motion:reduce){
  .strat-grid .strat,
  .strat-grid .strat.feature,
  .strat-grid .strat.gold{animation:none !important}
}
/* trasparenza ridotta: torna a superficie opaca (come il fallback esistente) */
@media (prefers-reduced-transparency:reduce){
  .strat-grid .strat,
  .strat-grid .strat.feature,
  .strat-grid .strat.gold{background:#0c1130 !important;animation:none !important}
}