/* =============================================================================
   FEM — CAMADA DE MOVIMENTO
   Carrega DEPOIS de fem.css. Só acrescenta vida: apagar este arquivo deixa o
   site estático, mas inteiro e funcional.

   Regra de convivência: fem.css usa os pseudo-elementos para ESTRUTURA
   (marcas de canto, barras, halos). Aqui só se anima o que já existe ou se usa
   pseudo ainda livre. Nada é sobrescrito, nada some.

   CASCATA
     Nada de listas de :nth-child. Cada elemento carrega --i (o efeitos.js
     numera sozinho) e o atraso sai de calc(). Um item novo entra na sequência
     sem tocar em CSS.

   ÍNDICE
     01. Entrada de página e cascata
     02. Revelar ao rolar
     03. Hero vivo (refletor, poeira, texto que brilha)
     04. Refletores do topo
     05. Brilho ao passar o mouse
     06. Escudos e placares
     07. Pódio e medalhas
     08. Botões e chamadas
     09. Tabelas e listas
     10. Ao vivo
     11. Preferência por menos movimento
   ============================================================================= */

/* =============================================================================
   01. ENTRADA DE PÁGINA E CASCATA
   ============================================================================= */
.reveal {
  opacity: 0;
  animation: reveal var(--dur-4) var(--saida) forwards;
  animation-delay: calc(var(--i, 0) * var(--cascata));
}
@keyframes reveal {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

/* troca de tela do roteador — o conteúdo novo sobe suave */
.tela-entra { animation: tela-entrar var(--dur-3) var(--saida); }
@keyframes tela-entrar {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* =============================================================================
   02. REVELAR AO ROLAR
   O efeitos.js marca .ao-rolar e alterna .mostrar via IntersectionObserver.
   ============================================================================= */
.ao-rolar {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--dur-4) var(--saida), transform var(--dur-4) var(--saida);
}
.ao-rolar.mostrar { opacity: 1; transform: none; }

/* Filhos diretos entram em sequência quando o pai aparece.
   O :not(.reveal) evita animação dupla: quem já é .reveal cuida de si mesmo. */
.ao-rolar.mostrar > *:not(.reveal),
.ao-rolar-grade.mostrar > *:not(.reveal) {
  animation: reveal var(--dur-4) var(--saida) both;
  animation-delay: calc(var(--i, 0) * var(--cascata));
}

/* =============================================================================
   03. HERO VIVO
   ============================================================================= */
/* refletor respirando atrás do título (fem.css usa ::after para as linhas do campo) */
.hero::before {
  content: '';
  position: absolute; inset: -20% -10% -40%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38% 55% at 22% 15%, rgba(0, 232, 132, .17), transparent 60%),
    radial-gradient(30% 45% at 82% 8%, rgba(255, 183, 3, .12), transparent 62%);
  animation: respirar-hero 14s ease-in-out infinite alternate;
}
@keyframes respirar-hero {
  0%   { transform: translate(0, 0) scale(1); opacity: .85; }
  100% { transform: translate(2%, -3%) scale(1.06); opacity: 1; }
}

/* poeira de estádio subindo devagar */
.hero-grid { position: relative; }
.hero-grid::after {
  content: '';
  position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .8;
  background-image:
    radial-gradient(2px 2px at 10% 85%, rgba(0, 232, 132, .55), transparent),
    radial-gradient(2px 2px at 32% 92%, rgba(255, 183, 3, .45), transparent),
    radial-gradient(1.5px 1.5px at 58% 88%, rgba(0, 232, 132, .4), transparent),
    radial-gradient(1.5px 1.5px at 78% 95%, rgba(234, 244, 239, .3), transparent),
    radial-gradient(2px 2px at 90% 82%, rgba(255, 183, 3, .35), transparent);
  background-repeat: no-repeat;
  animation: poeira-subir 9s linear infinite;
}
@keyframes poeira-subir {
  0%   { transform: translateY(0); opacity: 0; }
  10%  { opacity: .8; }
  85%  { opacity: .4; }
  100% { transform: translateY(-120px); opacity: 0; }
}

/* o gradiente do título desliza devagar, como luz passando */
.hero h1 .traco {
  background-size: 220% auto;
  animation: brilho-texto 7s ease-in-out infinite;
}
@keyframes brilho-texto {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* =============================================================================
   04. REFLETORES DO TOPO
   Dois feixes finos varrendo o topo da página, bem discretos.
   ============================================================================= */
.refletores {
  position: fixed; inset: 0 0 auto; height: 60vh; z-index: var(--z-grade);
  pointer-events: none; overflow: hidden; opacity: .5;
}
.refletores i {
  position: absolute; top: -30vh; left: var(--x, 20%);
  width: 26vw; height: 90vh; display: block;
  background: linear-gradient(180deg, rgba(0, 232, 132, .10), transparent 62%);
  filter: blur(28px);
  transform-origin: 50% 0;
  animation: varrer-feixe var(--t, 22s) ease-in-out infinite alternate;
}
.refletores i:nth-child(2) {
  --x: 68%; --t: 30s;
  background: linear-gradient(180deg, rgba(255, 183, 3, .08), transparent 62%);
  animation-delay: -8s;
}
@keyframes varrer-feixe {
  from { transform: rotate(-13deg) scaleY(.92); opacity: .5; }
  to   { transform: rotate(11deg) scaleY(1.08); opacity: 1; }
}

/* =============================================================================
   05. BRILHO AO PASSAR O MOUSE
   Feixe diagonal que varre a superfície. Vem do background do próprio elemento
   (posição animada), então não disputa pseudo-elemento com ninguém.
   ============================================================================= */
.jogo, .time-card, .podio-item, .placar-destaque, .stat-box, .numero {
  background-image: linear-gradient(100deg,
    transparent 42%, rgba(255, 255, 255, .05) 50%, transparent 58%);
  background-size: 260% 100%;
  background-position: 180% 0;
  background-repeat: no-repeat;
  transition: background-position var(--dur-5) var(--saida);
}
.jogo:hover, .time-card:hover, .podio-item:hover,
.placar-destaque:hover, .stat-box:hover, .numero:hover {
  background-position: -80% 0;
}

/* =============================================================================
   06. ESCUDOS E PLACARES
   ============================================================================= */
/* o escudo "acorda" quando o mouse chega na linha inteira */
.time-card:hover .escudo,
.rank-item:hover .escudo,
.jogo:hover .escudo,
.busca-res a:hover .escudo {
  transform: scale(1.09) rotate(-3deg);
  box-shadow: inset 0 0 0 1px var(--linha-3), 0 0 22px -8px var(--grama);
}

/* cada gol assenta no lugar quando o placar aparece */
.contagem-gol {
  display: inline-block;
  animation: assentar-gol var(--dur-3) var(--mola) both;
  animation-delay: calc(var(--i, 0) * 70ms);
}
@keyframes assentar-gol {
  0%   { opacity: 0; transform: translateY(-8px) scale(.65); filter: blur(3px); }
  60%  { opacity: 1; filter: blur(0); }
  100% { transform: none; }
}

/* linhas de gol/assistência entram em sequência ao abrir o jogo */
.jogo.aberto .jd-linha, .jogo.aberto .jd-mvp {
  animation: reveal var(--dur-3) var(--saida) both;
  animation-delay: calc(var(--i, 0) * 45ms);
}

/* =============================================================================
   07. PÓDIO E MEDALHAS
   ============================================================================= */
.podio-item { animation: saltar-podio var(--dur-4) var(--mola) both; }
.podio-item.p2 { animation-delay: .05s; }
.podio-item.p1 { animation-delay: .15s; }
.podio-item.p3 { animation-delay: .25s; }
@keyframes saltar-podio {
  0%   { opacity: 0; transform: translateY(26px) scale(.85); }
  70%  { opacity: 1; transform: translateY(-5px) scale(1.02); }
  100% { transform: none; }
}

.podio-item.p1 .medalha { animation: brilhar-medalha 2.4s ease-in-out .6s infinite; }
@keyframes brilhar-medalha {
  0%, 100% { box-shadow: 0 0 0 -4px var(--refletor); }
  50%      { box-shadow: 0 0 26px -2px var(--refletor); }
}

/* =============================================================================
   08. BOTÕES E CHAMADAS
   ============================================================================= */
/* Só o primeiro botão do hero pulsa — chamar atenção uma vez, não o site todo.
   O brilho é INSET de propósito: o clip-path pixelado cortaria um halo externo. */
.hero-acoes .btn:first-child { animation: pulsar-cta 3.2s ease-in-out infinite; }
.hero-acoes .btn:first-child:hover { animation: none; }
@keyframes pulsar-cta {
  0%, 100% { box-shadow: var(--bisel), inset 0 0 0 0 rgba(255, 255, 255, 0); }
  50%      { box-shadow: var(--bisel), inset 0 0 30px 0 rgba(255, 255, 255, .38); }
}

/* o botão magnético (efeitos.js escreve --dx/--dy conforme o mouse se aproxima) */
.btn[data-ima] {
  transform: translate(var(--dx, 0px), var(--dy, 0px));
  transition: transform var(--dur-2) var(--saida), filter var(--dur-2) var(--saida);
}
.btn[data-ima]:hover  { transform: translate(var(--dx, 0px), calc(var(--dy, 0px) - 3px)); }
.btn[data-ima]:active { transform: translate(var(--dx, 0px), calc(var(--dy, 0px) + 2px)); }

/* =============================================================================
   09. TABELAS E LISTAS
   ============================================================================= */
table.fem tbody tr:hover { transform: translateX(3px); }

/* linhas da classificação entram de baixo, em sequência */
.tabela-wrap.mostrar tbody tr {
  animation: reveal var(--dur-3) var(--saida) both;
  animation-delay: calc(var(--i, 0) * 28ms);
}

/* itens de ranking também */
.rank.mostrar .rank-item {
  animation: entrar-lista var(--dur-3) var(--saida) both;
  animation-delay: calc(var(--i, 0) * 40ms);
}
@keyframes entrar-lista {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: none; }
}

/* =============================================================================
   10. AO VIVO
   ============================================================================= */
.pill-vivo { animation: respirar-vivo 1.8s ease-in-out infinite; }
@keyframes respirar-vivo {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 61, 90, 0); }
  50%      { box-shadow: 0 0 12px 1px rgba(255, 61, 90, .35); }
}

/* =============================================================================
   11. PREFERÊNCIA POR MENOS MOVIMENTO
   Os tokens --dur-* já viram ~0 em tokens.css; aqui desligamos os laços
   infinitos (que não dependem de duração) e garantimos o conteúdo visível.
   ============================================================================= */
@media (prefers-reduced-motion: reduce) {
  .hero::before, .hero-grid::after, .hero h1 .traco, .refletores i,
  .podio-item, .podio-item.p1 .medalha, .hero-acoes .btn:first-child,
  .pill-vivo, .ticker-fita, .contagem-gol, .skel::after {
    animation: none !important;
  }
  .reveal, .ao-rolar, .ao-rolar.mostrar > *, .ao-rolar-grade.mostrar > *,
  .tabela-wrap.mostrar tbody tr, .rank.mostrar .rank-item, .jogo.aberto .jd-linha {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .refletores { display: none; }
}