/* ============================================================
   perf-fx.css (v1) — camada de desempenho compartilhada. Mesmo visual, menos trabalho por quadro.
   Uso: <link rel="stylesheet" href="perf-fx.css?v=1"> no <head> de cada página (a ordem não importa: usa !important
   só onde substitui uma regra da página). Para desfazer, remova o <link> — tudo volta a ser como antes.

   Princípio: o navegador só anima de graça (na GPU, sem passar pela thread principal) `transform` e `opacity`.
   Animar um ângulo de gradiente (@property), cor de borda, sombra ou background-position obriga, A CADA QUADRO,
   recalcular estilo + repintar + rasterizar o elemento inteiro. Aqui cada efeito é reescrito para girar/desbotar
   uma camada pintada uma única vez.
   ============================================================ */

/* ---------- 1. Anéis holográficos (.holo-ring e .hw-ring) ----------
   Antes: conic-gradient(from var(--holo-ring-ang)) com --holo-ring-ang animado = repintura por quadro, por anel.
   Agora: o mesmo gradiente, pintado uma vez num quadrado centrado, girado por transform.
   Identidade usada: um gradiente cônico "from θ" é o gradiente "from 0" girado de θ em torno do centro — o cônico só
   depende do ângulo em torno do centro, então girar a imagem e girar a origem dão o mesmo pixel em todo ponto.
   O quadrado precisa cobrir a caixa em qualquer ângulo: lado ≥ diagonal = √2·max(w,h) (+ folga da borda de 2px).
   A máscara/clip-path do anel recorta o excesso, exatamente como recortava o fundo.
   Duração, atraso e pausa são HERDADOS do anel: todas as regras das páginas (só gira na tela, pausa ao rolar,
   parado no celular, reduzir movimento) continuam valendo sem mudança. Navegador sem container queries ou overflow-clip-margin: fica a versão antiga (nada muda). */
@supports (container-type: size) and (width: 1cqmax) and (overflow-clip-margin: 2px) {
  .holo-ring, .hw-ring {
    animation-name: none !important;
    background: none !important;
    container-type: size;
    /* o quadrado girado é maior que o card: a máscara já o recortava na tela, mas ele ainda contava como largura da
       página (rolagem lateral no celular). clip + 2px de margem = recorta na borda externa do anel (que tem até 2px de borda). */
    overflow: clip; overflow-clip-margin: 2px;
  }
  .holo-ring::before, .holo-ring::after, .hw-ring::before {
    --lx-ring-d: calc(141.43cqmax + 8px);
    content: ''; position: absolute; left: 50%; top: 50%;
    width: var(--lx-ring-d); height: var(--lx-ring-d);
    margin: calc(var(--lx-ring-d) / -2) 0 0 calc(var(--lx-ring-d) / -2);
    pointer-events: none;
    animation-name: lxRingCw;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-duration: inherit;
    animation-delay: inherit;
    animation-play-state: inherit;
  }
  /* espectro "vai e volta" (h → h+r → h) — gira no sentido horário */
  .holo-ring::before {
    background: conic-gradient(
      hsl(var(--rh) var(--sl)),
      hsl(calc(var(--rh) + var(--rr) * .1667) var(--sl)),
      hsl(calc(var(--rh) + var(--rr) * .3333) var(--sl)),
      hsl(calc(var(--rh) + var(--rr) * .5)    var(--sl)),
      hsl(calc(var(--rh) + var(--rr) * .6667) var(--sl)),
      hsl(calc(var(--rh) + var(--rr) * .8333) var(--sl)),
      hsl(calc(var(--rh) + var(--rr))         var(--sl)),
      hsl(calc(var(--rh) + var(--rr) * .8333) var(--sl)),
      hsl(calc(var(--rh) + var(--rr) * .6667) var(--sl)),
      hsl(calc(var(--rh) + var(--rr) * .5)    var(--sl)),
      hsl(calc(var(--rh) + var(--rr) * .3333) var(--sl)),
      hsl(calc(var(--rh) + var(--rr) * .1667) var(--sl)),
      hsl(var(--rh) var(--sl)));
  }
  /* brilho especular branco — por cima do espectro, girando ao contrário */
  .holo-ring::after {
    background: conic-gradient(transparent 0 80%, rgba(255, 255, 255, .9) 91%, transparent 100%);
    animation-name: lxRingCcw;
  }
  /* cometa espectral do .hw-ring */
  .hw-ring::before {
    background: conic-gradient(transparent 0deg, hsl(165 100% 62% / .95) 55deg,
      hsl(235 100% 70% / .95) 115deg, hsl(300 100% 68% / .8) 170deg, transparent 230deg, transparent 360deg);
  }
}
@keyframes lxRingCw  { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes lxRingCcw { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }