/* =============================================================
   site-performance.css — Otimizações de performance do site público
   Não altera design visual. Reduz trabalho GPU em mobile e
   dispositivos fracos. Suporte a prefers-reduced-motion.
   ============================================================= */

/* ===== 1. Acessibilidade: prefers-reduced-motion ===== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  #neon-bg,
  #siteGlow,
  #heroGlow,
  #particles {
    display: none !important;
  }

  body.brand-neon-bg::before {
    animation: none !important;
  }
}

/* ===== 2. Pausar animações fora do viewport ===== */
.perf-offscreen {
  animation-play-state: paused !important;
}

/* ===== 3. Dispositivos fracos (classe adicionada pelo JS) ===== */
html.perf-reduced #neon-bg .b,
html.perf-reduced #siteGlow .b {
  animation: none !important;
}

html.perf-reduced body.brand-neon-bg::before {
  animation: none !important;
}

html.perf-reduced #particles {
  display: none !important;
}

html.perf-reduced #heroGlow {
  filter: blur(30px) saturate(100%) !important;
}

html.perf-reduced #neon-bg,
html.perf-reduced #siteGlow {
  filter: blur(40px) saturate(100%) !important;
}

/* ===== 4. Mobile: reduzir blur (visual quase idêntico, ~40% menos GPU) ===== */
@media (max-width: 768px) {
  #neon-bg,
  #siteGlow {
    filter: blur(60px) saturate(120%) !important;
  }

  #heroGlow {
    filter: blur(40px) saturate(120%) !important;
  }

  /* Desativa animação float do background no mobile */
  body.brand-neon-bg::before {
    filter: blur(15px) saturate(100%) !important;
    animation: none !important;
  }
}

/* ===== 5. Remover will-change permanente (browser gerencia compositing) ===== */
#neon-bg .b,
#siteGlow .b {
  will-change: auto;
}

#neon-bg,
#siteGlow {
  will-change: auto;
}

#heroGlow {
  will-change: auto;
}

.card {
  will-change: auto;
}

/* ===== 6. Card hover via CSS puro (substitui handler JS) ===== */
.card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

@media (hover: hover) {
  .card:hover {
    transform: translateY(-4px) scale(1.02);
  }
}

/* ===== 7. content-visibility para seções abaixo da dobra ===== */
/* Desativado: causava flash/pisca nas imagens ao entrar no viewport
   porque o browser recriava o conteúdo da section inteira.
section:not(:first-of-type) {
  content-visibility: auto;
  contain-intrinsic-size: 0 500px;
}
*/

/* ===== 8. Otimização de renderização de texto em alta Hz ===== */
html.perf-high-hz body {
  text-rendering: optimizeSpeed;
}

/* ===== 9. Partículas sem GPU layer permanente ===== */
#particles > div {
  will-change: auto;
}

/* ===== 10. Otimizar transições — usar GPU apenas durante hover ===== */
@media (hover: hover) {
  .card:hover,
  .brand-card:hover {
    will-change: transform;
  }
}

/* ===== 11. Conter layout paint em mobile ===== */
@media (max-width: 768px) {
  #neon-bg,
  #siteGlow {
    contain: layout style;
  }
}

/* ===== 12. Public UI: disable text selection sitewide ===== */
html,
body,
body *,
body *::before,
body *::after {
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none !important;
}

img,
a {
  -webkit-user-drag: none;
  user-drag: none;
}