/* 260829 — hover do card troca o FUNDO INTEIRO da página de projetos.
   Pedido do Henrique: "transição rápida, do fundo todo pra esse efeito equivalente
   ao card e o projeto, pode usar até umas fotos do projeto pra dar uma curiosidade".

   Técnica: mesma do fundo do case Among Us (a imagem borrada por trás da cena), que
   já é vocabulário do site — duas camadas fixas que fazem crossfade, para dois hovers
   seguidos não piscarem. O roxo da marca continua sendo a base: a foto entra POR CIMA
   com opacidade parcial, então a página nunca deixa de ser o portfólio.

   Números: 420ms de entrada (rápido, não instantâneo) e 620ms de saída — voltar mais
   devagar que entrar evita o pisca-pisca quando o mouse atravessa a grade.

   260829 — OPÇÃO C aplicada (DECISOES 036). O Henrique pediu "menos blurried" e citou
   o hover da globo.com como referência; medido pelo agente `8e0e4a2a` no Chrome
   conectado, a globo.com NÃO tem mais esse efeito (o hover de lá só faz
   `brightness .95 → .90` na própria imagem do card, sem blur e sem fundo reativo).
   Sem número para copiar, foram renderizadas 4 opções e ele escolheu a C na folha
   `260829_hover-4-opcoes-COMPARATIVO.png`.
   Blur 38px → 18px em todos os modos (é o pedido literal dele).
   Brilho, opacidade e véu ficam ESCOPADOS por modo: os valores antigos (.5 / .72 /
   véu roxo `rgba(20,5,52,.72)`) foram calibrados no modo ROXO e, no claro, apagavam a
   página inteira — mesmo padrão do véu do hover (031), do véu dos cards (032) e do
   canvas `#hs-bg` (034). Roxo e escuro seguem com os valores originais. */

body.hs-projetos .hs-fundo-projeto{
  position:fixed; inset:-6%;
  background-size:cover; background-position:center;
  filter:blur(18px) brightness(.5) saturate(1.2);
  transform:scale(1.12);
  opacity:0;
  transition:opacity .62s ease;        /* saída: a regra .on abaixo acelera a entrada */
  pointer-events:none;
  z-index:0;
  will-change:opacity;
}
body.hs-projetos .hs-fundo-projeto.on{
  opacity:.72;
  transition:opacity .42s cubic-bezier(.22,.61,.36,1);
}

/* 260829 — VÉU DESLIGADO (DECISOES 037). O véu nasceu para proteger o contraste do
   título e dos rótulos sobre foto clara, mas na comparação lado a lado ele custava
   mais do que entregava: veredito do Henrique sobre a imagem 4 —
   "bem melhor porra, mt mais clareza e contraste, tira o veu".
   A camada continua existindo no DOM (o JS ainda a referencia); só nunca acende.
   Para religar: devolver `opacity:1` na regra `.hs-fundo-ativo` abaixo. */
body.hs-projetos .hs-fundo-veu{
  position:fixed; inset:0; pointer-events:none; z-index:1;
  background:radial-gradient(ellipse at 50% 45%, rgba(30,8,74,.28) 0%, rgba(20,5,52,.72) 100%);
  opacity:0; transition:opacity .62s ease;
}
body.hs-projetos.hs-fundo-ativo .hs-fundo-veu{
  opacity:0;
}

/* ── MODO CLARO — opção C ────────────────────────────────────────────────
   No claro a base é #EEF0F6 chapado (DECISOES 034), então o véu roxo .72 e o
   brilho .5 não "aprofundam" nada: apagam a página e somem com o lockup.
   Aqui a foto entra quase no brilho natural, com um véu claro só o bastante
   para os rótulos brancos dos cards não perderem contraste sobre foto clara
   (o card-jogo-da-solda é quase branco — era o motivo original do véu).      */
html:not([data-modo="roxo"]):not([data-modo="escuro"]) body.hs-projetos .hs-fundo-projeto{
  filter:blur(18px) brightness(.95) saturate(1.2);
}
html:not([data-modo="roxo"]):not([data-modo="escuro"]) body.hs-projetos .hs-fundo-projeto.on{
  opacity:.80;
}
/* Esta regra está INERTE desde DECISOES 037 (o véu nunca acende). Fica guardada
   porque é a versão clara já calibrada, caso ele queira religar o véu um dia. */
html:not([data-modo="roxo"]):not([data-modo="escuro"]) body.hs-projetos .hs-fundo-veu{
  background:radial-gradient(ellipse at 50% 45%, rgba(238,240,246,.10) 0%, rgba(20,10,45,.34) 100%);
}

/* o conteúdo sobe acima das duas camadas */
body.hs-projetos .hs-projetos-root{ position:relative; z-index:2; }

/* o card em hover ganha um anel para o olho saber quem está pintando o fundo */
body.hs-projetos .hs-projetos-card{
  transition:transform .42s cubic-bezier(.22,.61,.36,1), box-shadow .42s ease;
}
body.hs-projetos .hs-projetos-card:hover{
  box-shadow:0 0 0 2px rgba(255,255,255,.55), 0 26px 60px rgba(0,0,0,.45);
}
/* 260829 — RECUO DOS VIZINHOS DESLIGADO (DECISOES 037).
   Era ISTO, e não o véu, que apagava os cards no hover: o véu está em `z-index:1`
   e o conteúdo em `z-index:2`, então o véu nunca chegou a cobrir card nenhum
   [MEDIDO: `elementsFromPoint` no centro de um card não devolve `.hs-fundo-veu`].
   O que apagava era `opacity:.62` aqui. O Henrique comparou a imagem 3 (só sem véu,
   cards ainda em .62) com a 4 (sem véu e sem recuo) e escolheu a 4.
   A profundidade agora vem só do anel branco + sombra no card apontado. */
body.hs-projetos.hs-fundo-ativo .hs-projetos-card:not(:hover){
  transform:none; opacity:1;
}

@media (prefers-reduced-motion:reduce){
  body.hs-projetos .hs-fundo-projeto,
  body.hs-projetos .hs-fundo-veu,
  body.hs-projetos .hs-projetos-card{ transition:none!important; }
  body.hs-projetos.hs-fundo-ativo .hs-projetos-card:not(:hover){ transform:none; opacity:1; }
}

/* em touch não existe hover: nada disso deve disparar por tap acidental */
@media (pointer:coarse){
  body.hs-projetos .hs-fundo-projeto,
  body.hs-projetos .hs-fundo-veu{ display:none; }
}

/* 260829 — o mecanismo passou a rodar na Home (site one-page: a pagina de projetos
   e a secao #projetos do post 63). As camadas do fundo usam z-index 0/1 e o canvas
   animado da Home (#hs-bg) fica em -1; sem esta regra as camadas cobririam o
   conteudo, que no GeneratePress nao e posicionado. */
body.hs-front.hs-projetos .site-content{ position:relative; z-index:2; }