/* =========================================================
   2) HERO TEXT — ENTRADA + AUTO HIGHLIGHT
   ========================================================= */

.canalla-seq {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: var(--canalla-font-primary);
  font-size: 100px;
  font-weight: 800;
  line-height: 0.88;
  letter-spacing: -2px;
  text-align: center;
  text-transform: uppercase;
}

.canalla-seq span {
  display: block;
  width: 100%;
  margin-bottom: -4px;
  opacity: 0;
  transform: translateY(18px) scale(1);
  transform-origin: center center;
  will-change: transform, opacity, filter, background-image;
  background: linear-gradient(180deg, var(--canalla-color-white) 0%, #f3f3f3 100%) center / 100% 100% no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}

body:not(.canalla-loading) .canalla-seq span {
  opacity: 1;
}

/*
 * Cada <span> lleva su índice en la variable CSS --i (ver front-page.php),
 * así que el retardo de entrada y de pulso se calculan solos para
 * cualquier número de palabras, sin necesidad de reglas nth-child fijas.
 */
body.canalla-site-ready .canalla-seq span {
  --canalla-seq-i: var(--i, 0);
  animation:
    canallaLineIn 0.8s ease forwards,
    canallaWordPulseSoftGold 4.6s ease-in-out infinite;
  animation-delay:
    calc(var(--canalla-seq-i) * 0.18s),
    calc(1.15s + (var(--canalla-seq-i) * 1.15s));
}

@media (prefers-reduced-motion: reduce) {
  .canalla-seq span {
    opacity: 1;
    transform: none;
    animation: none !important;
  }
}