/* Rodapé padrão do site. Cópia literal do componente da home
   (apps/web/src/components/layout/Footer.tsx + o bloco Footer do globals.css).

   O HTML do partial carrega os mesmos estilos inline do componente React.
   Aqui ficam só as regras que na home vivem em classe: a luz que percorre o
   divisor, o empilhamento no mobile, e os hovers (que no React são handlers
   onMouseEnter/onMouseLeave, com estes mesmos valores). */

/* Luz do footer: anda da esquerda e PARA onde a linha desbota (~58%). */
@keyframes footer-flow {
  0%   { left: -8%; opacity: 0; }
  10%  { opacity: 0.85; }
  48%  { opacity: 0.85; }
  62%  { left: 58%; opacity: 0; }
  100% { left: 58%; opacity: 0; }
}

.footer-flow {
  position: absolute;
  height: 1px;
  width: 3rem;
  background: linear-gradient(to right, transparent, rgba(255, 160, 26, 0.6), transparent);
  border-radius: 9999px;
  pointer-events: none;
  animation: footer-flow 3.4s var(--ease-apple, cubic-bezier(0.16, 1, 0.3, 1)) infinite;
}

/* Contraste dos links legais: o repouso vive no style inline (0.5 de branco sobre
   o preto do rodapé, ~5,2:1, acima do mínimo de 4,5:1 de texto pequeno). O hover
   sobe para 0.72 para continuar sendo um degrau visível, e não uma correção. */

/* hovers: os mesmos valores dos handlers do componente */
.footer-social:hover {
  background: rgba(255, 160, 26, 0.08);
  border-color: rgba(255, 160, 26, 0.25);
  color: #FFA01A;
}
.footer-legal:hover { color: rgba(255, 255, 255, 0.72); }

/* Alvo de toque. Os botões têm 34px e os links legais 17px de altura, abaixo dos
   44px que o dedo precisa. Em vez de engordar o desenho (o rodapé é cópia literal
   da home e tem que continuar idêntico), a área clicável cresce por fora com um
   ::after invisível. O pixel na tela não muda; o alvo, sim. */
.footer-social, .footer-legal { position: relative; }
.footer-social::after, .footer-legal::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: max(100%, 44px);
  height: max(100%, 44px);
}

.footer-social:focus-visible,
.footer-legal:focus-visible { outline: 2px solid #FFA01A; outline-offset: 2px; }

/* ── Footer ────────────────────────────────────────── */
@media (max-width: 600px) {
  .footer-main-row {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 20px !important;
  }
  .footer-sep {
    display: none !important;
  }
  .footer-bottom-bar {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 0.5rem !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .footer-flow { animation: none; }
}