/* Topo da pagina inicial (secao .lfa-topo, ferramentas/topo-da-home.py).
 * ---------------------------------------------------------------------------
 * Pedido da diretoria em 15/10/2026: a foto da Liga aparece mais. Antes, duas
 * camadas escuras somadas (vertical de 70% a 100% e lateral de 90% a 0%)
 * deixavam a foto quase apagada. Agora o veu escurece so onde precisa: sob a
 * barra de navegacao, no pe (onde a foto encontra o fundo da pagina) e atras
 * do texto. A direita a foto fica limpa, com um brilho azul da marca. */

.lfa-topo .lfa-topo-foto {
  transform-origin: 62% 40%;
  animation: lfa-topo-respira 28s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes lfa-topo-respira {
  from { transform: scale(1.02); }
  to   { transform: scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  .lfa-topo .lfa-topo-foto { animation: none; transform: scale(1.02); }
}

/* De cima para baixo. */
.lfa-topo-veu {
  background: linear-gradient(180deg,
    rgba(10, 15, 22, 0.62) 0%,
    rgba(10, 15, 22, 0.20) 22%,
    rgba(10, 15, 22, 0.16) 55%,
    rgba(10, 15, 22, 0.72) 86%,
    #0a0f16 100%);
}

/* Da esquerda para a direita: forte so atras do texto. */
.lfa-topo-lado {
  background:
    linear-gradient(90deg,
      rgba(10, 15, 22, 0.9) 0%,
      rgba(10, 15, 22, 0.8) 32%,
      rgba(10, 15, 22, 0.44) 50%,
      rgba(10, 15, 22, 0.12) 68%,
      rgba(10, 15, 22, 0) 82%),
    radial-gradient(ellipse 60% 70% at 78% 45%, rgba(30, 111, 191, 0.16), transparent 70%);
}

/* Celular e tablet: o texto ocupa a largura toda, entao o veu e por igual. */
@media (max-width: 1023px) {
  .lfa-topo-lado {
    background: linear-gradient(180deg,
      rgba(10, 15, 22, 0.5) 0%,
      rgba(10, 15, 22, 0.66) 58%,
      rgba(10, 15, 22, 0.48) 100%);
  }
}

/* Leitura garantida sobre a foto mais clara. O titulo usa texto recortado em
 * degrade, que nao aceita text-shadow: a sombra vai por filtro. */
.lfa-topo h1 { filter: drop-shadow(0 2px 18px rgba(0, 0, 0, 0.55)); }
.lfa-topo p { text-shadow: 0 1px 14px rgba(0, 0, 0, 0.7); }
