/* casa_cinema.css — LANE CINEMA (28/08)
   Companheiro de casa_cinema.js. Ver o cabeçalho daquele arquivo pra regra
   completa de "já foi lido". Aqui só o visual: esmaecimento suave (opacity +
   um toque de blur), nunca display:none/visibility:hidden — o texto continua
   100% no DOM e 100% legível por leitor de tela em qualquer estado.

   Arquivo próprio — não mexe em casa.css. Reusa as variáveis --oxxy-* já
   publicadas em casa.css (mesma identidade visual), sem duplicar nada. */

:root{
  --oxxy-cinema-opacidade: .22;   /* o quanto o texto "lido" recua — nunca 0 */
  --oxxy-cinema-blur: .5px;       /* toque de profundidade de campo, bem sutil */
  --oxxy-cinema-saida: 1.4s;      /* esmaecer é lento e cinematográfico */
  --oxxy-cinema-volta: .3s;       /* voltar é rápido — "na hora" */
}

/* Estado-base de todo alvo (aplicado pelo JS em quem é candidato a esmaecer).
   A transição RÁPIDA mora aqui de propósito: é ela que toca quando a classe
   .casa-cinema-esmaecido é REMOVIDA (restauração ao rolar de volta). */
.casa-cinema-alvo{
  transition: opacity var(--oxxy-cinema-volta) ease, filter var(--oxxy-cinema-volta) ease;
}

/* Esmaecido: já foi lido e ficou pra trás. A transição LENTA mora aqui — é
   ela que toca quando esta classe é ADICIONADA (o próprio ato de esmaecer). */
.casa-cinema-alvo.casa-cinema-esmaecido{
  opacity: var(--oxxy-cinema-opacidade);
  filter: blur(var(--oxxy-cinema-blur));
  transition: opacity var(--oxxy-cinema-saida) ease .05s, filter var(--oxxy-cinema-saida) ease .05s;
}

/* Volta fácil: hover do mouse, foco (teclado/leitor de tela) ou toque
   (.casa-cinema-revela, ligada pelo JS no touchstart/focusin) devolvem na
   hora, com transição suave — nunca um corte seco. Especificidade de 3
   classes/pseudo-classes garante que isto sempre vence o estado esmaecido. */
.casa-cinema-alvo.casa-cinema-esmaecido:hover,
.casa-cinema-alvo.casa-cinema-esmaecido:focus-within,
.casa-cinema-alvo.casa-cinema-esmaecido.casa-cinema-revela{
  opacity: 1;
  filter: none;
  transition: opacity var(--oxxy-cinema-volta) ease, filter var(--oxxy-cinema-volta) ease;
}

/* Reforço redundante: foco de teclado NUNCA fica esmaecido, mesmo se por
   algum motivo o JS ainda não tiver reagido no mesmo frame. */
.casa-cinema-alvo:focus,
.casa-cinema-alvo:focus-within{
  opacity: 1 !important;
  filter: none !important;
}

/* Telas pequenas: sem blur (custo de composição em GPUs de entrada) — a
   opacidade sozinha já carrega o efeito de recuo. */
@media (max-width: 480px){
  .casa-cinema-alvo.casa-cinema-esmaecido{ filter: none; }
}

/* prefers-reduced-motion: LEI, não enfeite. Zero esmaecimento, zero
   transição — o texto fica exatamente como sempre foi, sempre. Isto é a
   garantia final e funciona mesmo se o JS tiver algum bug (defesa em
   camadas: o CSS é a última palavra). */
@media (prefers-reduced-motion: reduce){
  .casa-cinema-alvo,
  .casa-cinema-alvo.casa-cinema-esmaecido{
    opacity: 1 !important;
    filter: none !important;
    transition: none !important;
  }
}

/* Windows High Contrast / forced-colors: opacidade e blur não são
   confiáveis nesse modo (podem apagar contraste que o próprio SO tenta
   garantir) — desliga o efeito por segurança. */
@media (forced-colors: active){
  .casa-cinema-alvo.casa-cinema-esmaecido{
    opacity: 1 !important;
    filter: none !important;
  }
}