/* ============================================================
   TEXT REEL — cortes secos DENTRO do "RODRIGUES"
   A tipografia vira a janela do reel; o resto da tela respira.
   Arquivo independente: não altera style.css.
   ============================================================ */

/* quando o banner.js ativa (.reel-text), o accent vira máscara do reel */
.hero__title .accent.reel-text {
  background-size: cover;
  background-position: 50% 35%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  /* fallback: se background-clip:text não rolar, fica magenta */
  color: var(--accent, #ff2bd6);
  /* contorno sutil: garante a silhueta da letra em qualquer frame */
  -webkit-text-stroke: 1.5px color-mix(in srgb, var(--accent, #ff2bd6) 55%, transparent);
  /* presença/glow contra o preto */
  filter: saturate(1.1)
          drop-shadow(0 0 28px color-mix(in srgb, var(--accent, #ff2bd6) 38%, transparent));
}

@supports not (-webkit-background-clip: text) {
  .hero__title .accent.reel-text {
    background-image: none !important;
    color: var(--accent, #ff2bd6);
  }
}

/* movimento reduzido: frame único estático (o JS cuida de não cortar) */
@media (prefers-reduced-motion: reduce) {
  .hero__title .accent.reel-text { filter: none; }
}