/* === Gradient Text – Cross-browser Patch (2025) === */

/* Base comune: fallback static se le @supports non scattano */
.gradient-text,
.expect-gradient,
.magic-gradient {
  display: inline-block;                 /* assicura background animabile */
  background: linear-gradient(91deg, #00A5CF 1.46%, #6E46AE 48.22%, #F9423A 98.73%);
  background-size: 200% 100%;
  background-position: 0% 50%;
  color: transparent;                    /* Firefox/desktop */
  -webkit-text-fill-color: transparent;  /* Safari / iOS */
  -webkit-background-clip: text;
          background-clip: text;
  animation: gradientFlow 3s ease-in-out infinite;
  will-change: background-position;
}

/* Preferisce ridurre il moto → niente animazione, ma mantiene il gradiente */
@media (prefers-reduced-motion: reduce) {
  .gradient-text,
  .expect-gradient,
  .magic-gradient {
    animation: none;
    background-position: 50% 50%;
  }
}

/* Safari/iOS e Chrome: assicurati del clipping WebKit */
@supports (-webkit-background-clip: text) {
  .gradient-text,
  .expect-gradient,
  .magic-gradient {
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

/* Firefox (abilita anche lo standard non prefissato) */
@supports (background-clip: text) {
  .gradient-text,
  .expect-gradient,
  .magic-gradient {
    background-clip: text;
    color: transparent;
  }
}

/* Se non hai già la keyframe nel tuo CSS globale, lasciala qui.
   Se esiste già, questa la sovrascrive senza effetti collaterali. */
@keyframes gradientFlow {
  0%   { background-position:   0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position:   0% 50%; }
}