/*
  decorative-optics.css — círculos/arcos ópticos discretos ao fundo, como no
  mockup aprovado. Puramente decorativo: CSS (gradientes radiais), sem
  imagem pesada, sem capturar clique, marcado aria-hidden no HTML.
*/
.decorative-optics {
  position: absolute;
  top: 0;
  right: 0;
  width: min(420px, 40vw);
  height: 220px;
  pointer-events: none;
  overflow: hidden;
  /* revisão visual 3 (item 9): agora ancorado direto em .app-shell (canto
     real da página, antes preso ao card do cabeçalho). z-index NEGATIVO
     testado e descartado aqui: dentro de um container CSS Grid os itens do
     grid (.sidebar, .app-shell__main) pintam como se tivessem
     position:relative — SEMPRE acima de z-index negativo, mesmo em pixels
     transparentes (confirmado empiricamente com Playwright, não só por
     teoria: com z-index:-1 o elemento ficava 100% invisível mesmo com borda
     vermelha opaca de teste). z-index:0 (ordem do DOM: primeiro filho de
     .app-shell) resolve — pinta atrás dos irmãos opacos, mas visível nas
     áreas transparentes do cabeçalho, como esperado. */
  z-index: 0;
}

.decorative-optics__ring {
  position: absolute;
  border-radius: 50%;
  border: 1.5px solid var(--brand-cyan);
  opacity: 0.12;
}

.decorative-optics__ring--a {
  width: 260px;
  height: 260px;
  top: -120px;
  right: -60px;
}

.decorative-optics__ring--b {
  width: 160px;
  height: 160px;
  top: -40px;
  right: 60px;
  opacity: 0.08;
}

.decorative-optics__ring--c {
  width: 90px;
  height: 90px;
  top: 30px;
  right: 200px;
  opacity: 0.1;
}

/* simplifica/oculta em telas pequenas, conforme pedido explicitamente */
@media (max-width: 900px) {
  .decorative-optics__ring--c {
    display: none;
  }
  .decorative-optics {
    width: 60vw;
    height: 140px;
  }
}

@media (max-width: 640px) {
  .decorative-optics {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .decorative-optics {
    /* elemento já é estático (sem animação); regra mantida por clareza */
    transition: none;
  }
}