/* ============================================================================
   polish.css — camada GLOBAL de motion (acabamento premium).
   Carregada por ÚLTIMO. Não muda identidade visual, cores, layout nem
   funcionalidade: só suaviza interações e dá resposta de toque/clique — o que
   faltava no mobile (o projeto tinha só 5 :active). Fácil de ajustar/reverter.
   Só transform/opacity/filter (barato, sem reflow). Respeita reduced-motion.
   ============================================================================ */
:root {
  --mo-ease: cubic-bezier(.2, .8, .2, 1);
  --mo-ease-out: cubic-bezier(.16, 1, .3, 1);
  --mo-fast: .14s;
  --mo-mid: .22s;
}

/* tira o flash cinza do toque no mobile; o feedback passa a vir do :active */
a, button, [role="button"], input, label,
.es-chip, .gcard, .ccard, .cs-card, .es-card, [data-es-oid], [data-dir], [data-cwin], [data-tab] {
  -webkit-tap-highlight-color: transparent;
}

/* -------- resposta ao toque / clique nos alvos de AÇÃO (botões, odds, chips, tabs, nav) -------- */
.btn, .top-go, .cp-go, .cp-code-btn, .es-more, .cdirs button, .cwins button,
.cs-cat, .es-tab, .es-op, .es-odd, .es-tb-pick, [data-es-oid], [data-dir], [data-cwin],
nav a, nav button, .foot-nav-list a, .cp-x, .cp-fab, .cp-boost-x {
  transition:
    transform var(--mo-fast) var(--mo-ease),
    filter var(--mo-fast) var(--mo-ease),
    background-color var(--mo-mid) var(--mo-ease),
    border-color var(--mo-mid) var(--mo-ease),
    color var(--mo-mid) var(--mo-ease),
    box-shadow var(--mo-mid) var(--mo-ease);
}
.btn:active, .top-go:active, .cp-go:active, .cp-code-btn:active, .es-more:active,
.cdirs button:active:not([disabled]), .cwins button:active, .cs-cat:active, .es-tab:active,
.es-op:active:not([disabled]), .es-odd:active:not([disabled]), .es-tb-pick:active,
[data-es-oid]:active:not([disabled]), [data-dir]:active:not([disabled]), [data-cwin]:active,
nav a:active, nav button:active, .foot-nav-list a:active, .cp-x:active, .cp-fab:active {
  transform: scale(.955);
}

/* -------- cards: resposta de toque mais sutil (são maiores) -------- */
.gcard, .ccard, .cs-card, .es-card, .es-chip {
  transition: transform var(--mo-mid) var(--mo-ease), filter var(--mo-mid) var(--mo-ease);
}
.gcard:active, .ccard:active, .cs-card:active, .es-card:active, .es-chip:active { transform: scale(.975); }

/* -------- rolagem com inércia + contida nas trilhas horizontais e listas (mobile) -------- */
.es-rail, .grow, .bet-rail, .cs-grid, .es-chips, .cwins, .es-odds-g, [class*="-rail"] {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

/* -------- foco suave nos campos (sem mudar a cor da marca) -------- */
input, textarea, select {
  transition:
    border-color var(--mo-mid) var(--mo-ease),
    box-shadow var(--mo-mid) var(--mo-ease),
    background-color var(--mo-mid) var(--mo-ease);
}

/* -------- entrada premium de modais / sheets / backdrops --------
   A animação toca quando o elemento sai do display:none ([hidden] removido).
   Todos são position:fixed (overlay), então animar não afeta o layout. */
@keyframes mo-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes mo-modal-in { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes mo-toast-in { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }

/* backdrop escurece com fade */
.sheet:not([hidden]), .fmodal:not([hidden]), .side-veil:not([hidden]), .cs-play:not([hidden]) {
  animation: mo-fade-in var(--mo-mid) var(--mo-ease-out) both;
}
/* a caixa do modal entra com leve fade + scale (sobe um tiquinho) */
.sheet:not([hidden]) .panel { animation: mo-modal-in var(--mo-mid) var(--mo-ease-out) both; }
/* toasts deslizam de cima */
.es-toast { animation: mo-toast-in var(--mo-mid) var(--mo-ease-out) both; }

/* -------- SAÍDA suave (polish.js aplica .mo-exit antes de esconder de verdade) -------- */
@keyframes mo-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes mo-modal-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(8px) scale(.985); } }
.mo-exit { animation: mo-fade-out .18s var(--mo-ease) both !important; }
.mo-exit .panel { animation: mo-modal-out .18s var(--mo-ease) both !important; }

/* -------- transição de página (polish.js aplica .mo-nav SÓ ao navegar, nunca no re-render da cripto) -------- */
@keyframes mo-page-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.mo-nav > * { animation: mo-page-in var(--mo-mid) var(--mo-ease-out) both; }

/* -------- quem pediu menos movimento no sistema: desliga animações/transições -------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}