/* site/css/lupa.css — mesmo desenho da Lupa de acessibilidade do app (../css/lupa.css),
   sem o bloco de prévia dos Ajustes (não existe painel de Ajustes aqui no site). */

#lupaBlocker {
    position: fixed; inset: 0; z-index: 999998;
    background: transparent;
    cursor: none;
    -webkit-tap-highlight-color: transparent;
}
#lupaBlocker.on { display: block; }
#lupaBlocker:not(.on) { display: none; }

/* Estado inteiro mora no próprio #lupaLens (".on" / ".acess"), nunca em document.body —
   mesma razão do app: aqui o site troca body.className inteiro ao ciclar tema (ver
   js/site.js cicloTema()), então uma classe solta em body sumiria no primeiro toque em T. */
body:has(#lupaLens.on) > *:not(#lupaLens):not(#lupaBlocker) { pointer-events: none; }
body:has(#lupaLens.on.acess) > *:not(#lupaLens):not(#lupaBlocker) { filter: saturate(0.25) brightness(0.88); }
body:has(#lupaLens.on.acess) * { animation-play-state: paused !important; }
#lupaLens, #lupaLens * { filter: none !important; animation-play-state: running !important; }

#lupaLens {
    position: fixed; z-index: 999999; pointer-events: none;
    border-radius: 50%;
    overflow: hidden;
    border: 2.5px solid rgba(255,255,255,0.9);
    box-shadow:
        0 0 0 1px rgba(0,0,0,0.35),
        0 10px 34px rgba(0,0,0,0.55),
        inset 0 0 24px rgba(0,0,0,0.18);
    background: #0b0b12;
    opacity: 0; transform: scale(0.85);
    transition: opacity 0.14s ease, transform 0.14s cubic-bezier(.2,.9,.3,1.3);
}
#lupaLens.on { opacity: 1; transform: scale(1); }

#lupaLens::after {
    content: ''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle at 30% 22%, rgba(255,255,255,0.22) 0%, transparent 42%);
}

#lupaConteudo {
    position: absolute; top: 0; left: 0; width: 100vw;
    transform-origin: 0 0;
    will-change: transform;
}
#lupaConteudo, #lupaConteudo * { transition: none !important; animation: none !important; }