/* casa_profundidade.css — LANE PROFUNDIDADE (28/08)
   Pedido do Founder (FEEDBACK_HC.md, item B3/B4): "dar efeitos de
   profundidade e efeitos ópticos em algumas palavras" + "vários níveis de
   profundidade, movimentos, 3D... layout futurista, padrão 2050".

   Arquivo PRÓPRIO desta lane (regra das lanes em paralelo — ver
   CONTRATO.md) — NÃO edita casa.css/casa.html/casa_core.js. Só usa as
   variáveis --oxxy-* já publicadas em casa.css (cores da marca) e classes
   que este MESMO arquivo introduz; casa_profundidade.js aplica essas
   classes sozinho, sem precisar de nenhuma edição no HTML existente.

   Onde ligar (o HC costura depois, ver relatório da lane):
     <link rel="stylesheet" href="casa_profundidade.css?v=1">
     <script src="casa_profundidade.js?v=1" defer></script>  — por último,
     depois de casa_cinema.js (precisa de window.CasaOXXY e do DOM já
     montado; não precisa ser literalmente o último script, mas não faz
     sentido vir antes de casa_core.js).

   ESCOLHA DE ARTE — 3 efeitos (não 4: "mais que isso vira poluição"):

   1) MATERIALIZAÇÃO ÓPTICA NA ENTRADA — a palavra nasce embaçada e um
      pouco maior, assenta nítida ao entrar na tela (como o enxame do Orbi
      "organizando" o texto). Disparo único por elemento (IntersectionObserver),
      custo zero depois de assentar.

   2) PROFUNDIDADE POR PONTEIRO (só desktop com mouse de verdade) — uma
      sombra colorida difusa (magenta + ciano, cores da marca) segue o
      mouse em DUAS velocidades/direções diferentes atrás do texto = 2
      planos de profundidade além do texto em si. Decisão deliberada: NÃO
      move o glifo em si com o mouse — só a luz ao redor reage. Mover a
      letra de verdade arriscava legibilidade (texto trepidando) e brigava
      com o rastro do cursor (casa_chapters.js) e o resto da página; a
      sombra reage sozinha, sem tocar no texto.

   3) RESPIRAÇÃO COM A VOZ DO ORBI — enquanto o Orbi FALA (ou escuta), a
      palavra-âncora que estiver visível pulsa/brilha bem de leve,
      sincronizada por "casa:estado-changed" — o mesmo evento público que
      o resto da Casa OXXY já usa (ver CONTRATO.md §3). Nenhum evento novo.

   ALVOS — poucos, de propósito ("algumas palavras", não a página toda):
   - .casa-slogan em / .casa-cap-titulo em — a cláusula de impacto de cada
     título (já é a parte com gradiente da marca — ver CONTRATO.md §1).
     Cobre "Converse com ele.", "É a OXXY rodando agora.", "ela já
     respondeu três clientes.", "Porque a sua empresa é única." e "E o
     Orbi já te mostrou o seu." — o <em> é estrutural nas 3 línguas (ver
     TXT.cap*Titulo em casa_core.js), então o alvo funciona em pt/en/es
     sem precisar reconhecer palavra por palavra em cada idioma.
   - .casa-trint-kicker e .casa-selo-mini — rótulos curtos de reforço ("UM
     SISTEMA. TRÊS INTELIGÊNCIAS.", "AO VIVO"/"MEDIDO") — tratamento mais
     leve (entrada + sombra fraca, sem a respiração de voz).
   Decisão consciente: não fui atrás de palavras soltas por regex dentro do
   texto corrido (ex.: minerar "futuro" no meio da frase) — quebra fácil
   entre pt/en/es e arrisca cortar palavra ao meio; o <em> estrutural cobre
   o mesmo espírito do pedido com muito menos risco. Também confirmado
   lendo casa_cinema.js: .casa-cap-titulo, .casa-slogan e .casa-trint-kicker
   já estão na lista "nunca esmaece" dele (EXCLUDE_SELECTOR) — ou seja, o
   dono daquele efeito já trata estes elementos como permanentes/hero;
   convivem sem nenhuma classe ou propriedade CSS em comum.

   PERFORMANCE:
   - Só transform/opacity/filter/text-shadow (GPU). Zero layout thrash.
   - will-change só enquanto a entrada ainda anima; sai depois
     (will-change:auto) — não deixa camada composta presa pra sempre.
   - A sombra por ponteiro só existe dentro de "@media (hover:hover) and
     (pointer:fine)" — em celular a regra nem é avaliada (custo zero,
     não é "desligado por JS", é inexistente pro navegador).
   - Em telas ≤480px tira o blur da entrada (mesma régua que casa_cinema.css
     já usa pro mesmo motivo) — só opacidade+leve deslocamento, mais barato.

   prefers-reduced-motion e forced-colors: leis, não enfeite — bloco no
   fim, na mesma régua do resto da Casa OXXY (defesa em camadas: CSS é a
   última palavra mesmo se o JS tiver algum bug). */

:root{
  --casa-prof-mx: 0;   /* -1..1, atualizado por casa_profundidade.js */
  --casa-prof-my: 0;
}

/* ================= 1) materialização óptica na entrada ================= */
.casa-prof-hero{
  /* <em> é inline por padrão; inline-block garante que opacity/filter/
     transform se comportem como UM bloco só, sem fragmentar em quebra de
     linha (mesma técnica seria desnecessária em .casa-trint-kicker/
     .casa-selo-mini, que já são block/inline-flex — por isso só aqui). */
  display:inline-block;
}
.casa-prof-hero,
.casa-prof-label{
  --prof-sy: 10px;
  --prof-ss: 1.04;
  opacity:0;
  filter:blur(7px);
  transform:translate3d(0, var(--prof-sy), 0) scale(var(--prof-ss));
  transition:
    opacity .62s cubic-bezier(.16,.8,.28,1),
    filter .62s cubic-bezier(.16,.8,.28,1),
    transform .5s cubic-bezier(.16,.8,.28,1);
  will-change:opacity, filter, transform;
}
.casa-prof-label{ transition-delay:.08s; }  /* assenta um instante depois da hero */

.casa-prof-hero.casa-prof-visto,
.casa-prof-label.casa-prof-visto{
  --prof-sy:0px;
  --prof-ss:1;
  opacity:1;
  filter:blur(0);
  will-change:auto;
}

/* ================= 2) profundidade por ponteiro (sombra, não a letra) ================= */
@media (hover:hover) and (pointer:fine){
  html.casa-prof-ponteiro-on .casa-prof-hero{
    text-shadow:
      calc(var(--casa-prof-mx) * -8px) calc(var(--casa-prof-my) * -6px) 16px rgba(226,55,145,.40),
      calc(var(--casa-prof-mx) * 10px) calc(var(--casa-prof-my) * 7px)  18px rgba(66,201,232,.36);
    transition:text-shadow .16s ease-out;
  }
  html.casa-prof-ponteiro-on .casa-prof-label{
    text-shadow:calc(var(--casa-prof-mx) * 4px) calc(var(--casa-prof-my) * 3px) 9px rgba(155,93,229,.28);
    transition:text-shadow .16s ease-out;
  }
}

/* ================= 3) respiração com a voz do Orbi ================= */
@keyframes casa-prof-respirar-fala{
  0%,100%{ filter:brightness(1); transform:scale(1); }
  50%{ filter:brightness(1.22); transform:scale(1.018); }
}
@keyframes casa-prof-respirar-escuta{
  0%,100%{ filter:brightness(1); }
  50%{ filter:brightness(1.1); }
}
html.casa-prof-orbi-falando .casa-prof-hero.casa-prof-em-vista{
  animation:casa-prof-respirar-fala 2.1s ease-in-out infinite;
}
html.casa-prof-orbi-ouvindo .casa-prof-hero.casa-prof-em-vista{
  animation:casa-prof-respirar-escuta 2.6s ease-in-out infinite;
}

/* ================= telas pequenas: tira o blur (custo de composição) ================= */
@media (max-width:480px){
  .casa-prof-hero, .casa-prof-label,
  .casa-prof-hero.casa-prof-visto, .casa-prof-label.casa-prof-visto{
    filter:none;
  }
}

/* ================= foco de teclado nunca fica escondido/borrado ================= */
.casa-prof-hero:focus, .casa-prof-hero:focus-within,
.casa-prof-label:focus, .casa-prof-label:focus-within{
  opacity:1 !important;
  filter:none !important;
  transform:none !important;
}

/* ================= prefers-reduced-motion: lei, não enfeite ================= */
@media (prefers-reduced-motion:reduce){
  .casa-prof-hero, .casa-prof-label{
    opacity:1 !important;
    filter:none !important;
    transform:none !important;
    text-shadow:none !important;
    transition:none !important;
    animation:none !important;
  }
}

/* ================= forced-colors (Windows High Contrast) ================= */
@media (forced-colors:active){
  .casa-prof-hero, .casa-prof-label{
    filter:none !important;
    text-shadow:none !important;
    transform:none !important;
    opacity:1 !important;
  }
}