/* vida.css — o que faz a página parecer VIVA (12/09/2026).

   Vida não é animação de ENTRADA (isso é o mov.css, que acontece uma vez e
   acaba). Vida é o que continua depois que a página parou de chegar.

   Três modos, que agora podem CONVIVER na mesma página: data-vida aceita mais
   de um, separados por espaço, e todo seletor usa ~= (casa uma palavra da
   lista). Uma página só com "respiro" continua funcionando igual.

     respiro  · da própria página  — ela pulsa sozinha
     reacao   · de quem está lendo — a página sente o cursor
     pulso    · da operação        — o dado se mexe

   Referências do banco: glow do volta-ev, beams do white-medical, halo no
   cursor do glass-effect2, marquee do finex-finance-saas.

   ⚠️ Dois defeitos corrigidos em 12/09, os dois achados medindo a página no ar:
   1. A luz da REAÇÃO usava o ::after do bloco — o mesmo pseudo-elemento do
      MEDIDOR dourado. Nos blocos medidos a barra sumia. Agora a luz mora no
      background-image do próprio bloco e não disputa pseudo-elemento nenhum.
   2. O clarão recorrente do RESPIRO perdia para a animação de ENTRADA do
      profundidade (seletor mais forte no mov.css): depois que o bloco entrava,
      rodava o "corre" uma vez e o "varrer" nunca mais. Agora o seletor do
      respiro empata em força e, carregado depois, vence.

   Nada aqui esconde conteúdo. Se CSS ou JS não carregar, a página fica
   exatamente como o profundidade: viva menos, quebrada nunca. */

/* =========================================================== 1. RESPIRO === */

[data-vida~="respiro"] .hero { position: relative; }
[data-vida~="respiro"] .hero::after {
  content: "";
  position: absolute; left: 50%; bottom: 8%;
  width: min(90%, 780px); height: 300px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(224, 185, 111, .16), transparent 72%);
  filter: blur(24px);
  z-index: -1; pointer-events: none;
  animation: respirar 9s ease-in-out infinite;
}
@keyframes respirar {
  0%, 100% { opacity: .45; transform: translateX(-50%) scale(.97); }
  50%      { opacity: 1;   transform: translateX(-50%) scale(1.03); }
}

/* O clarão que atravessa o fio de luz. O atraso escalonado vem de uma
   variável no PRÓPRIO bloco, herdada pelo ::before — assim a força do seletor
   do atraso deixa de importar, que foi parte do que quebrou antes. */
.grade > .bloco:nth-child(2) { --fio-atraso: 2.6s; }
.grade > .bloco:nth-child(3) { --fio-atraso: 5.2s; }
.grade > .bloco:nth-child(4) { --fio-atraso: 7.8s; }

[data-vida~="respiro"] .bloco::before,
html.js-mov[data-vida~="respiro"] .bloco::before,
html.js-mov[data-vida~="respiro"] .bloco.visivel::before {
  background: linear-gradient(90deg,
    rgba(255, 255, 255, .07) 0%, rgba(255, 255, 255, .07) 40%,
    rgba(234, 223, 198, .6) 50%,
    rgba(255, 255, 255, .07) 60%, rgba(255, 255, 255, .07) 100%);
  background-size: 300% 100%;
  animation: varrer 11s cubic-bezier(.4, 0, .2, 1) var(--fio-atraso, 0s) infinite;
}
@keyframes varrer {
  0%   { background-position: 130% 0; }
  22%  { background-position: -70% 0; }
  100% { background-position: -70% 0; }
}

[data-vida~="respiro"] .faisca .linha { animation: brasa 6s ease-in-out infinite; }
@keyframes brasa {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(224, 185, 111, 0)); }
  50%      { filter: drop-shadow(0 0 4px rgba(224, 185, 111, .75)); }
}

/* =========================================================== 2. REACAO ==== */

/* --luz registrada para poder TRANSICIONAR: sem @property, variável não anima
   e a luz acenderia de estalo. */
@property --luz { syntax: "<number>"; inherits: true; initial-value: 0; }

/* A luz no background-image do próprio bloco. O tema declara `background` em
   shorthand no .bloco e no :hover, e shorthand zera background-image — por
   isso a luz é redeclarada nas duas regras, com força maior que a do tema. */
[data-vida~="reacao"] .bloco {
  --luz: 0;
  background-color: var(--sup);
  background-image: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%),
    rgba(224, 185, 111, calc(var(--luz) * .17)), transparent 68%);
  transition: --luz .3s ease, transform .12s ease-out,
              background-color var(--lento), border-color var(--lento);
}
[data-vida~="reacao"] .bloco:hover {
  --luz: 1;
  background-color: var(--elevada);
  background-image: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%),
    rgba(224, 185, 111, calc(var(--luz) * .17)), transparent 68%);
  transform: translateY(-2px) perspective(760px)
             rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
}

[data-vida~="reacao"] .botao--principal { position: relative; overflow: hidden; }
[data-vida~="reacao"] .botao--principal::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(90px circle at var(--mx, 50%) var(--my, 50%),
    rgba(255, 255, 255, .45), transparent 65%);
  opacity: 0; transition: opacity .25s ease; pointer-events: none;
}
[data-vida~="reacao"] .botao--principal:hover::after { opacity: 1; }

/* Telefone não tem cursor: o toque vira o gatilho, com a luz centralizada. */
@media (hover: none) {
  [data-vida~="reacao"] .bloco:hover { transform: translateY(-2px); }
  [data-vida~="reacao"] .bloco:active { --luz: 1; }
}

/* ============================================================ 3. PULSO ==== */

.so-pulso { display: none; }
[data-vida~="pulso"] .so-pulso { display: inline-flex; }
[data-vida~="pulso"] .faixa-viva.so-pulso { display: block; }

.vivo { align-items: center; gap: .45rem; font-family: var(--maquina);
  font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--acento); }
.vivo::before { content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--acento); animation: bater 2.4s ease-out infinite; }
@keyframes bater {
  0%   { box-shadow: 0 0 0 0 rgba(224, 185, 111, .65); }
  70%  { box-shadow: 0 0 0 9px rgba(224, 185, 111, 0); }
  100% { box-shadow: 0 0 0 0 rgba(224, 185, 111, 0); }
}

.medida__valor.mudou { animation: acender .9s ease-out 1; }
@keyframes acender {
  0%   { color: var(--creme); text-shadow: 0 0 12px rgba(224, 185, 111, .8); }
  100% { color: var(--acento); text-shadow: none; }
}

.faixa-viva { overflow: hidden; border-top: 1px solid var(--borda);
  border-bottom: 1px solid var(--borda); background: var(--poco);
  margin-top: var(--e5, 2.5rem); padding: .6rem 0; }
.faixa-viva__trilho { display: flex; width: max-content;
  animation: correr 42s linear infinite; }
.faixa-viva:hover .faixa-viva__trilho { animation-play-state: paused; }
.faixa-viva span { font-family: var(--maquina); font-size: .78rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--apoio);
  padding: 0 1.6rem; white-space: nowrap; }
.faixa-viva span b { color: var(--acento); font-weight: 500; }
@keyframes correr { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ======================================================= combinações ====== */
/* Quando RESPIRO e PULSO convivem, a linha de tendência já se mexe pelo pulso
   (ganha ponto, anda). Brasa por cima seriam duas animações no mesmo traço —
   ruído, não vida. A brasa sai; o halo e o clarão ficam. */
[data-vida~="respiro"][data-vida~="pulso"] .faisca .linha { animation: none; }

/* ========================================================== respeito ====== */
@media (prefers-reduced-motion: reduce) {
  [data-vida] .hero::after,
  [data-vida] .bloco::before,
  html.js-mov[data-vida] .bloco.visivel::before,
  [data-vida] .faisca .linha,
  [data-vida] .vivo::before,
  [data-vida] .faixa-viva__trilho,
  [data-vida] .medida__valor.mudou { animation: none !important; }
  [data-vida~="reacao"] .bloco:hover { transform: translateY(-2px) !important; }
}