/* ==========================================================================
   BCLWEB - PERFORMANCE, POLISH & ACCESSIBILITY (PHASE 4 FINALE)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. HARDWARE ACCELERATION & ZERO SCROLL-JANK
   -------------------------------------------------------------------------- */
.ea-app-wrap,
.ea-topbar,
.ea-bottom-nav,
.more-hub-sheet,
.podium-step,
.ranking-card,
.jr-fut-card-preview-wrap {
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform, opacity;
}

/* --------------------------------------------------------------------------
   2. ELIMINAÇÃO DE OVERFLOW HORIZONTAL ACIDENTAL NO MOBILE
   -------------------------------------------------------------------------- */
html, body {
  max-width: 100vw;
  overflow-x: hidden;
  scroll-behavior: smooth;
  text-rendering: optimizeLegibility;
}

/* --------------------------------------------------------------------------
   3. ACESSIBILIDADE WCAG & CONTRASTE DINÂMICO
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--bcl-neon-cyan) !important;
  outline-offset: 3px !important;
}

/* Scrollbars Modernas e Elegantes */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: rgba(6, 10, 18, 0.7);
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.16);
  border-radius: var(--bcl-radius-pill);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--bcl-neon-cyan);
}

/* --------------------------------------------------------------------------
   4. TOASTS & FEEDBACK FLUIDO DE TOQUE (TOUCH RESPONSE)
   -------------------------------------------------------------------------- */
button, 
.ea-pill-btn, 
.more-hub-card, 
.ea-nav-item {
  user-select: none;
  -webkit-user-select: none;
}

/* Micro-animação de Entrada de Páginas */
.ea-section {
  animation: bclPageFadeIn 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes bclPageFadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}