/* Correções de desempenho e nitidez — carregar DEPOIS de landing.css */

/* 1. Fundo: blur de 90px em camadas animadas era o maior custo de GPU.
      Os gradientes radiais já são suaves; sem filter, sem repaint. */
.lp-bg__blob, .fx-bg i { filter: none; will-change: transform; animation-duration: 60s; }
.lp-bg__blob--b { animation-duration: 75s; }
.lp-bg__blob--c { animation-duration: 90s; }

/* 2. backdrop-filter recalcula a cada frame de scroll/animação: removido
      (os fundos já são quase opacos via color-mix / gradientes). */
.lp-btn--ghost, .lp-chip, .lp-stats, .lp-plan, .lp-compare .comparison-table,
.lp-buy--dark, .lp-buy--free, .hero-choice, .security-card, .fx-cta,
.home-nav, .testimonial-arrow, .language-popup, .theme-popup {
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.lp-chip, .lp-stats, .lp-plan { background-color: color-mix(in srgb, var(--home-surface, #08080b) 92%, transparent); }

/* 3. Brilho dos botões: animava `left` (layout a cada frame). Agora só transform. */
.lp-btn--primary::after, .lp-buy::before, .lp-page .hero-choice-glow::after,
.fx-btn::after, .fx-choice__glow::after {
  left: -45%; will-change: transform;
  animation-name: lp-shine-t;
}
@keyframes lp-shine-t {
  0%, 55% { transform: translate3d(0, 0, 0) skewX(-22deg); }
  100% { transform: translate3d(560%, 0, 0) skewX(-22deg); }
}

/* 4. Demo 3D: a transição de .45s brigava com a atualização por scroll (travadinha),
      e will-change rasterizava num tamanho fixo (texto borrado ao ampliar). */
.lp-frame { transition: none; will-change: auto; }
.lp-frame::before { animation: none; --lp-ang: 215deg; }
.lp-chip { transform: none; }
.lp-chip { animation-duration: 8s; }

/* 5. Botões nítidos: sem flutuação sub-pixel, sem escala em texto. */
.hero-choice { animation: none !important; }
.lp-plan--hot { animation: none; --lp-ang: 215deg; }
@media (min-width: 981px) {
  .lp-plan--hot, .lp-plan--hot:hover { transform: translate3d(0, -14px, 0); }
}
.lp-btn, .lp-buy, .hero-choice-action, .premium-nav, .primary-action {
  -webkit-font-smoothing: antialiased; backface-visibility: hidden;
}
.premium-nav:hover, .primary-action:hover { filter: none; }

/* 6. transition: all → só o necessário */
.security-card { transition: transform .3s ease, border-color .3s ease, background-color .3s ease, box-shadow .3s ease; }

/* 7. Seções fora da tela: não renderizar nem animar (classe aplicada por perf.js). */
.lp-page main > section { content-visibility: auto; contain-intrinsic-size: auto 800px; }
.lp-page main > section:first-child, .lp-page main > .lp-hero { content-visibility: visible; }
.is-offscreen, .is-offscreen *, .is-offscreen *::before, .is-offscreen *::after { animation-play-state: paused !important; }

/* 8. Dispositivos fracos / economia de dados */
@media (max-width: 760px), (prefers-reduced-motion: reduce) {
  .lp-bg__blob, .fx-bg i, .lp-chip, .lp-final__ring, .fx-ring { animation: none !important; }
}

/* 9. Botão "Comprar Premium" cortado: o par Free/Premium ficava lado a lado com ~225px por
      botão (o conteúdo precisa de ~262px) e o texto virava reticências. Empilha mais cedo e,
      em telas muito estreitas, compacta e permite quebra de linha. */
@media (max-width: 760px) {
  .lp-page .hero-choice { flex-direction: column; width: 100%; max-width: 560px; }
  .lp-page .hero-choice-glow { display: none; }
  .lp-page .hero-choice-premium { background: linear-gradient(125deg, #8e22f4, #c13bea 62%, #ff4f9a); }
  .lp-page .hero-choice-action { min-height: 66px; justify-content: flex-start; }
  .lp-page .hero-choice-action small { display: block; }
  .lp-page .hero-choice-icon { display: grid; }
}
@media (max-width: 380px) {
  .lp-page .hero-choice-action { padding: 8px 14px; gap: 10px; }
  .lp-page .hero-choice-icon { flex-basis: 34px; width: 34px; height: 34px; }
  .lp-page .hero-choice-action strong { font-size: 14px; white-space: normal; }
  .lp-page .hero-choice-action small { font-size: 11px; white-space: normal; }
}

/* 10. Otimização profunda (medida no navegador, não suposta) ---------------------------- */

/* 10a. O gradiente fluido do título animava uma @property herdada por TODAS as letras:
        repintura do texto na thread principal a cada frame, para sempre. Agora faz um
        único movimento e descansa. */
.lp-grad { animation: lp-flow 7s ease-in-out 1 forwards; }
.fx-h1 { animation-iteration-count: 1; animation-fill-mode: forwards; }

/* 10b. Onda de brilho por letra: era infinita e usava filter: drop-shadow (27+ letras).
        Passa a ser só transform (compositor), repetida duas vezes. */
@keyframes lp-wave-lite {
  0%, 30%, 100% { transform: none; }
  12% { transform: translate3d(0, -.07em, 0); }
}
.lp-wave.is-in .lp-ch { animation-name: lp-wave-lite; animation-iteration-count: 2; }
.fx-h1.is-in .fx-ch { animation-iteration-count: 2; }

/* 10c. 149 letras tinham blur(8px) até aparecerem (um filtro por letra). Só o título do
        hero mantém o blur de entrada; o resto entra por opacidade + movimento. */
.lp-js [data-split]:not([data-split-now]) .lp-ch { filter: none; }

/* 10d. Barra de navegação e banner são fixos e ficam sobre a página inteira: o
        backdrop-filter reborrava o conteúdo a cada frame de scroll. Fundo quase opaco
        no lugar, com o mesmo visual. */
.zkk-navbar, .beta-banner, .cookie-consent { -webkit-backdrop-filter: none; backdrop-filter: none; }
html:not([data-theme="light"]) .zkk-navbar { background-image: linear-gradient(rgba(15, 15, 18, .93), rgba(5, 5, 7, .9)); }
html[data-theme="light"] .zkk-navbar { background-color: rgba(255, 255, 255, .9); }

/* 10e. Brilho (drop-shadow) em linhas SVG que rolam sem parar: reprocessado a cada frame. */
.rep-spark polyline { filter: none; }

/* 10f. A réplica do app (1920x1032 escalada) não afeta o layout do resto da página. */
.rep { contain: layout paint; }

/* 10g. Faixa em movimento promovida a camada própria. */
.lp-marquee__track { will-change: transform; }