/*
 * Palabra destacada en títulos de hero (convención del tema v2: todos los heros la usan).
 * Uso: <h1>Soluciones de <span class="xg-highlight">IA</span></h1>
 *
 * Tres capas:
 * 1. Degradado siempre a color (cian ↔ rosa, sin pasar por blanco) que se desplaza.
 * 2. Destello blanco diagonal que cruza las letras una vez por ciclo.
 * 3. Resplandor que respira (drop-shadow sí funciona con texto recortado en degradado).
 */
.xg-highlight {
  display: inline-block;
  background-image:
    linear-gradient(110deg, transparent 42%, rgba(255, 255, 255, 0.95) 50%, transparent 58%),
    /*
     * Cian y rosa son casi complementarios: cualquier mezcla larga entre ellos sale gris o
     * pastel (probado en sRGB, oklab y oklch). Por eso las transiciones son cortas y las
     * letras pasan casi todo el ciclo en color puro.
     */
    linear-gradient(100deg, var(--xg-primary) 0%, var(--xg-primary) 34%, var(--xg-secondary) 44%, var(--xg-secondary) 56%, var(--xg-primary) 66%, var(--xg-primary) 100%);
  background-size: 250% 100%, 200% 100%;
  background-position: 100% 0, 0% 0;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation:
    xg-highlight-shine 7s var(--xg-ease-in-out) infinite,
    xg-highlight-glow 3.6s var(--xg-ease-in-out) infinite;
}

/*
 * Capa 1 (destello): con 250% de ancho queda fuera de las letras en 100% y 0%;
 * solo cruza entre el 72% y el 86% del ciclo.
 * Capa 2 (color): va y viene durante todo el ciclo.
 */
@keyframes xg-highlight-shine {
  0% { background-position: 100% 0, 0% 0; }
  50% { background-position: 100% 0, 100% 0; }
  72% { background-position: 100% 0, 70% 0; }
  86% { background-position: 0% 0, 40% 0; }
  100% { background-position: 0% 0, 0% 0; }
}

@keyframes xg-highlight-glow {
  0%, 100% {
    filter: drop-shadow(0 0 6px rgba(102, 235, 231, 0.25)) drop-shadow(0 0 14px rgba(255, 178, 184, 0.08));
  }
  50% {
    filter: drop-shadow(0 0 14px rgba(102, 235, 231, 0.55)) drop-shadow(0 0 28px rgba(255, 178, 184, 0.25));
  }
}

@media (prefers-reduced-motion: reduce) {
  .xg-highlight {
    background-position: 100% 0, 30% 0;
    filter: drop-shadow(0 0 10px rgba(102, 235, 231, 0.4));
  }
}