/* Camada de animações e micro-interações (CSS-first). Compartilhada entre as páginas.
   Tudo aqui é desligado em prefers-reduced-motion (ver final do arquivo). */

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: none; }
}
@keyframes popIn {
    0%   { opacity: 0; transform: scale(0.96); }
    60%  { opacity: 1; transform: scale(1.01); }
    100% { transform: scale(1); }
}
@keyframes pulseLive {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.35; }
}

/* ── Fix: badge "AO VIVO" referencia .animate-pulse mas a classe não existia ── */
.animate-pulse { animation: pulseLive 1.4s ease-in-out infinite; }

/* ── Entrada ao trocar de aba (Bootstrap só faz opacity; somamos um slide-up) ── */
.tab-pane.fade.show.active { animation: fadeInUp 0.4s ease both; }

/* ── Card de login entra suave ── */
.auth-card { animation: popIn 0.5s ease both; }

/* ── Feedback tátil: botão "afunda" um toque ao clicar ── */
.btn { transition: transform 0.15s ease, background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; }
.btn:active { transform: scale(0.97); }

/* 💡 A11y: foco visível por teclado (não remove o anel, realça no verde da marca) */
.btn:focus-visible,
a:focus-visible,
.nav-link:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible {
    outline: 2px solid var(--bright-green, #2ecc71);
    outline-offset: 2px;
}

/* ── Loader: leve pulsar no conteúdo enquanto carrega ── */
#loader .text-center { animation: pulseLive 1.6s ease-in-out infinite; }

/* ── Cards de preço/jogadores: realça a sombra no hover (além do translate já existente) ── */
.pricing-card:hover { box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45); }

/* ── Underline animado nos links da navbar (landing) ── */
.navbar-nav .nav-link {
    position: relative;
}
.navbar-nav .nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 2px;
    width: 100%;
    height: 2px;
    background: var(--bright-green, #2ecc71);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s ease;
}
.navbar-nav .nav-link:hover::after { transform: scaleX(1); }

/* ── Botões com ícone (editar/excluir) já têm scale; adiciona transição mais suave ── */
.btn-icon-sm { transition: transform 0.2s ease, color 0.2s ease; }

/* ─────────────────────────────────────────────────────────────────────────
   Acessibilidade: desliga animações para quem pediu menos movimento no SO.
   ───────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .animate-pulse,
    .tab-pane.fade.show.active,
    .auth-card,
    #loader .text-center { animation: none; }

    .btn,
    .navbar-nav .nav-link::after,
    .btn-icon-sm { transition: none; }

    .btn:active { transform: none; }
}