/* AXIS · v3 · "A mesa do jurídico" · os efeitos (engenheiro de efeitos, 16/10/2026, 22h50). Carregado depois das folhas
   da direção e de motor.css. Pedido: ../EFEITOS-PEDIDO.md; registro: ../efeitos.md. Tudo o que se move está dentro de
   prefers-reduced-motion: no-preference; a composição final é o estado padrão; nenhum texto nasce apagado.
   A consulta estreita é a do diagramador: (max-width:899px), (orientation:portrait) and (max-width:1100px).

   1. O vidro: toda tela de vidro (monitor, tablet, portátil, celular) recebe uma camada .axs-vidro (efeitos.js) por cima da
      interface, em screen: o véu da sala (o preto da tela sobe ao nível de exposição da foto, medido no aro de cada
      aparelho) e o brilho do vidro. É o que tira a interface de "recorte colado": numa foto de sala clara, o preto de uma
      tela acesa nunca é mais escuro que o aro do aparelho.
   2. O paredão sobre a foto real (V-M12): sem o aro e o reflexo da maquete; o papel com o impresso em multiply (a fibra, a
      luz e a sombra da folha passam pela tinta); o fio por cima da -frente até a borda de fora do aparelho, medida na foto (17/10); o hover que acende sem levitar
      (só o que tem luz própria muda de brilho: a tela escolhida sobe a 1,1 e as outras baixam a 0,72; o papel não muda, um
      papel não acende); o foco do teclado no rótulo (o recorte da tela engolia o contorno).
   3. A abertura: o app já aceso no primeiro quadro; com html.axs-cedo (posto no <head>) a tela acorda (o brilho do
      conteúdo sobe de 0,86 a 1 em 300 ms), as nove barras crescem uma vez de 40% a 100% (600 ms, escalonadas 30 ms) e o
      marcador do relato pousa por último, quando html.axs-aceso chega (a página pronta). Sem axs-cedo, nada se move.
   4. A bandeirinha que pousa (HTML, .axs-bandeira), o marca-texto e o traço (motor.css). */

/* ===== 1. o vidro ===== */
.axs-vidro{position:absolute;inset:0;z-index:6;display:block;pointer-events:none;border-radius:inherit;mix-blend-mode:screen;
  background:
    linear-gradient(168deg,rgba(255,255,255,var(--vidro-brilho,.05)) 0,rgba(255,255,255,0) 46%),
    rgb(var(--vidro-veu-cor,214 222 232) / var(--vidro-veu,.07))}
/* o reflexo medido na foto de origem (comum/reflexos/, quando existe para o mestre e a área): a imagem retificada da área,
   em screen, com a força medida (a variação do cinza da placa na origem); o brilho sintético sai */
.axs-vidro::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--vidro-reflexo,none) 0 0/100% 100% no-repeat;
  opacity:calc(var(--vidro-reflexo-a,0) * var(--vidro-reflexo-k,1));mix-blend-mode:screen}
.axs-vidro--foto{--vidro-brilho:0}

/* o desfoque da foto no conteúdo da tela (efeitos.js, data-desfoque): só o que está dentro, o vidro e o recorte ficam */
.axs-tela[data-desfoque]>:not(.axs-vidro),.axs-tv-tela[data-desfoque]>:not(.axs-vidro){filter:blur(var(--vidro-desfoque,0px))}

/* ===== 2. o paredão sobre a foto real ===== */
/* o palco da foto não recebe ponteiro (v3.css); no paredão, os links recebem */
.axs-palco--parede .axs-tvs,.axs-palco--parede .axs-tv a{pointer-events:auto}
/* a maquete do molde desenhava o aparelho em CSS; na foto, o aparelho é a foto */
.axs-palco--parede:not(.axs-palco--maquete) .axs-tvs{z-index:auto}          /* sem contexto próprio: o papel multiplica sobre a foto */
.axs-palco--parede:not(.axs-palco--maquete) .axs-tv-tela{box-shadow:none;--giro:none}
.axs-palco--parede:not(.axs-palco--maquete) .axs-tv-tela::after,
.axs-palco--parede:not(.axs-palco--maquete) .axs-tv-tela::before,
.axs-palco--parede:not(.axs-palco--maquete) .axs-tv-base,
.axs-palco--parede:not(.axs-palco--maquete) .axs-tv-pe{display:none}
/* o papel: fundo da folha da foto, tinta em multiply */
html .axs-palco--parede:not(.axs-palco--maquete) .axs-tvs .axs-tv--papel a .axs-tv-tela{background:transparent;mix-blend-mode:multiply}
/* sem JavaScript a tela preenche a caixa da área: o recorte pelo polígono medido (o montador escreve --clip e --clip-e) */
html:not(.axs-js) .axs-palco--parede:not(.axs-palco--maquete) .axs-tv-tela{clip-path:var(--clip,inset(0))}
@media (max-width:899px),(orientation:portrait) and (max-width:1100px){
  html:not(.axs-js) .axs-palco--parede:not(.axs-palco--maquete) .axs-tv-tela{clip-path:var(--clip-e,var(--clip,inset(0)))}
}
/* O fio e o rótulo por cima da -frente da sala (z 3: as molduras, o suporte, o percevejo; revisão visual, erro 1: o fio
   sumia sob a moldura e só um traço de 5 px aparecia abaixo do rótulo). Nada entre o fio e o palco cria contexto de
   empilhamento (a ul e o li ficam em z auto), então o z 4 vale contra a -frente. O ponto tem um contorno da cor da luz
   da parede: pousa na moldura escura e continua visível. */
.axs-palco--parede:not(.axs-palco--maquete) .axs-tv-fio,.axs-palco--parede:not(.axs-palco--maquete) .axs-tv-rotulo{z-index:4}
.axs-palco--parede:not(.axs-palco--maquete) .axs-tv-fio::after{box-shadow:0 0 0 1.5px color-mix(in oklab,var(--campo-luz,#fff) 88%,transparent)}
/* o fio desce até a borda de FORA do aparelho no x do próprio fio, com o ponto na moldura (E8): homografia.js mede a
   moldura na foto e escreve --fio-y (onde o ponto pousa, px abaixo do alto da caixa; negativo se a moldura passa acima
   dela) e --fio-topo (o menor de 0 e --fio-y: o fio e o rótulo sobem junto quando a moldura passa da caixa); sem a medida,
   o lado de cima da área (--fio-dy) */
html.axs-js .axs-palco--parede:not(.axs-palco--maquete) .axs-tv-fio{left:var(--fio-x,14px);bottom:calc(100% - var(--fio-y,var(--fio-dy,0px)));height:calc(var(--fio-h,28px) + var(--fio-y,var(--fio-dy,0px)) - var(--fio-topo,0px))}
/* sem vão acima, o rótulo desce (homografia.js põe axs-tv--chao): o fio sai da borda de baixo do aparelho no mesmo x
   (--fio-yb: px acima do pé da caixa; --fio-pe: o menor de 0 e --fio-yb) */
html.axs-js .axs-palco--parede:not(.axs-palco--maquete) .axs-tv--chao .axs-tv-fio{bottom:auto;top:calc(100% - var(--fio-yb,var(--fio-dyb,0px)));height:calc(var(--fio-h,28px) + var(--fio-yb,var(--fio-dyb,0px)) - var(--fio-pe,0px))}
html.axs-js .axs-palco--parede:not(.axs-palco--maquete) .axs-tv--chao .axs-tv-fio::after{bottom:auto;top:-3px}
/* o rótulo acompanha o fio (na folha girada o canto de cima não é o da caixa) e sobe com ele */
html.axs-js .axs-palco--parede:not(.axs-palco--maquete) .axs-tv-rotulo{left:calc(var(--fio-x,14px) - 14px);bottom:calc(100% - var(--fio-topo,0px) + var(--fio-h,28px) + 4px)}
html.axs-js .axs-palco--parede:not(.axs-palco--maquete) .axs-tv--chao .axs-tv-rotulo{bottom:auto;top:calc(100% - var(--fio-pe,0px) + var(--fio-h,28px) + 4px)}
@media (max-width:899px),(orientation:portrait) and (max-width:1100px){html.axs-js .axs-palco--parede:not(.axs-palco--maquete) .axs-tv-rotulo{left:calc(var(--fio-x,10px) - 10px)}}
/* o hover e o foco: só o que tem luz própria muda; o filtro vai no conteúdo (a luz de fundo), não no vidro: o véu e o
   reflexo da sala ficam onde estão, como num monitor de verdade quando o brilho baixa */
html .axs-palco--parede:not(.axs-palco--maquete) .axs-tvs .axs-tv a .axs-tv-tela{filter:none}
html .axs-palco--parede:not(.axs-palco--maquete) .axs-tvs .axs-tv--tela a .axs-tvi{transition:filter .28s cubic-bezier(.4,0,.2,1)}
@media (hover:hover){
  html .axs-palco--parede:not(.axs-palco--maquete) .axs-tvs:has(.axs-tv a:hover) .axs-tv--tela:not(:hover) a .axs-tvi{filter:brightness(.72)}
  html .axs-palco--parede:not(.axs-palco--maquete) .axs-tvs .axs-tv--tela a:hover .axs-tvi{filter:brightness(1.1)}
}
html .axs-palco--parede:not(.axs-palco--maquete) .axs-tvs:has(.axs-tv a:focus-visible) .axs-tv--tela:not(:focus-within) a .axs-tvi{filter:brightness(.72)}
html .axs-palco--parede:not(.axs-palco--maquete) .axs-tvs .axs-tv--tela a:focus-visible .axs-tvi{filter:brightness(1.1)}
/* o contorno do foco no rótulo (o clip-path da tela recorta o outline) */
.axs-palco--parede .axs-tv a:focus-visible .axs-tv-tela{outline:none}
.axs-palco--parede .axs-tv a:focus-visible .axs-tv-rotulo{outline:2px solid var(--tinta);outline-offset:4px;border-radius:3px}
@media (prefers-reduced-motion:reduce){html .axs-palco--parede .axs-tvs .axs-tv a .axs-tvi{transition:none}}

/* ===== 3. a abertura: a tela acorda, as barras crescem uma vez, o relato pousa ===== */
/* a barra é pintada por um ::before que cresce do pé; a caixa (e o "9" que mora nela) fica no lugar desde o primeiro quadro */
html.axs-cedo .axs-c0 .axs-barras>i{background:transparent}
html.axs-cedo .axs-c0 .axs-barras>i::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--c);transform-origin:50% 100%}
.axs-c0 .axs-barras>i:nth-child(1){--i:0}.axs-c0 .axs-barras>i:nth-child(2){--i:1}.axs-c0 .axs-barras>i:nth-child(3){--i:2}
.axs-c0 .axs-barras>i:nth-child(4){--i:3}.axs-c0 .axs-barras>i:nth-child(5){--i:4}.axs-c0 .axs-barras>i:nth-child(6){--i:5}
.axs-c0 .axs-barras>i:nth-child(7){--i:6}.axs-c0 .axs-barras>i:nth-child(8){--i:7}.axs-c0 .axs-barras>i:nth-child(9){--i:8}
@media (prefers-reduced-motion:no-preference){
  html.axs-cedo .axs-c0 .axs-tela .axs-app{animation:axs-acorda .3s cubic-bezier(.2,.8,.2,1) .05s both}
  html.axs-cedo .axs-c0 .axs-barras>i::before{animation:axs-barra .6s cubic-bezier(.2,.8,.2,1) calc(.14s + var(--i,0) * 30ms) both}
  html.axs-cedo .axs-c0 .axs-barras>.axs-relato{animation:axs-pousa .26s cubic-bezier(.2,.8,.2,1) .9s both}   /* sem passar do ponto (o impeccable lia o 1,15 como "bounce") */
  /* tudo espera parado no começo até a página estar pronta (efeitos.js põe html.axs-aceso com a foto decodificada, a
     letra carregada e a tela assentada; a linha do <head> põe a classe aos 3 s de qualquer jeito): a 1440 o acender que
     corria durante a carga tinha um quadro de 565 ms */
  html.axs-cedo:not(.axs-aceso) .axs-c0 .axs-app,
  html.axs-cedo:not(.axs-aceso) .axs-c0 .axs-barras>i::before,
  html.axs-cedo:not(.axs-aceso) .axs-c0 .axs-barras>.axs-relato,
  html.axs-cedo .axs-c0[data-axs-foto="espera"] .axs-app,
  html.axs-cedo .axs-c0[data-axs-foto="espera"] .axs-barras>i::before,
  html.axs-cedo .axs-c0[data-axs-foto="espera"] .axs-barras>.axs-relato{animation-play-state:paused}
}
@keyframes axs-acorda{from{filter:brightness(.86)}to{filter:none}}
@keyframes axs-barra{from{transform:scaleY(.4)}to{transform:none}}
@keyframes axs-pousa{from{translate:-50% -5cqw}to{translate:-50% 0}}

/* ===== 4. a bandeirinha pousa (HTML) ===== */
@media (prefers-reduced-motion:no-preference){
  html.axs-js .axs-ct--atual:not(.axs-ct--sai) .axs-bandeira,html:not(.axs-js) .axs-ct:target .axs-bandeira,
  html.axs-js .axs-cena.axs-em-vista .axs-bandeira{animation:axs-bandeira .22s cubic-bezier(.2,.8,.2,1) .3s backwards}
}
@keyframes axs-bandeira{from{translate:0 -12px;scale:.86}}

/* ===== a passagem líquida (só com a chave "liquido" na trilha "O que a AXIS faz"; efeitos.js põe html.axs-fx-liquido):
   o canvas mora no palco da cena que sai, entre a foto e a interface; a foto da cena que entra fica escondida até o último
   quadro e as interfaces em HTML das duas cenas se dissolvem por cima (a que sai nos primeiros 220 ms, a que entra nos
   últimos 260 ms); o texto, como em motor.css ===== */
html.axs-js .axs-palco>.axs-fx-passagem{position:absolute;inset:0;z-index:1;width:100%;height:100%;display:block;pointer-events:none}
html.axs-fx-liquido .axs-trilha .axs-ct--entra.axs-ct--shader .axs-palco{visibility:visible}
html.axs-fx-liquido .axs-trilha .axs-ct--entra.axs-ct--shader .axs-palco>.axs-foto{visibility:hidden}
@media (prefers-reduced-motion:no-preference){
  html.axs-fx-liquido .axs-trilha .axs-ct--sai.axs-ct--shader .axs-palco>:not(.axs-foto):not(.axs-fx-passagem){animation:axs-sai .22s ease-in both}
  html.axs-fx-liquido .axs-trilha .axs-ct--entra.axs-ct--shader .axs-palco>:not(.axs-foto){animation:axs-entra .26s ease-out .39s both}
}

/* ===== a pilha que cresce (cena 1, B-M2, só com a chave "pilha"): o quadro da vez sobre a foto, mesma geometria ===== */
.axs-palco--foto .axs-quadro{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:fill;pointer-events:none}