/* sutil.css — o SITE mais calmo que as provas (12/09/2026, noite).

   Pedido dele ao ver a página inicial: "quando passa o mouse nos botões eles
   estão com um efeito muito maluco... a cor está muito louca... está muito
   animado, tem que diminuir um pouco as animações do site e deixar mais sutis".

   Os efeitos continuam os mesmos que ele aprovou (entrada foco + slogan,
   respiro, reação, magnetismo, crescer numa seção). Muda a INTENSIDADE. Este
   arquivo só sobrescreve e é carregado por último, então mov.css, vida.css e
   perf.css seguem iguais para as provas, que servem de comparação.

   O que baixou, e por quê:
   · botão: o hover trocava o dourado pelo creme (quase branco), subia 2 px,
     acendia uma luz branca a 45% seguindo o cursor e ainda era puxado 10 px
     pelo magnetismo. Agora é um dourado um tom mais claro, sem subir, sem luz,
     e o puxão cai para 30% (3 px).
   · entrada: desfoque de 12 px com zoom virou 4 px com 6 px de subida.
   · bloco: inclinação 3D saiu; a luz do cursor caiu de 17% para 7%.
   · respiro, clarão do fio e brilho do logo: mais fracos e mais espaçados. */

/* ---------------------------------------------------------------- botões -- */
.botao--principal:hover,
.nav a.botao--principal:hover { background: #EBC98A; color: #241905; transform: none; }
.botao--linha:hover { transform: none; }

/* a luz branca que seguia o cursor dentro do botão */
html[data-vida~="reacao"] .botao--principal::after { display: none; }

/* magnetismo a 30%: o botão ainda percebe o cursor, mas não pula até ele */
html[data-perf~="magnetismo"] .botao {
  translate: calc(var(--pux-x, 0px) * .3) calc(var(--pux-y, 0px) * .3);
  transition: translate .5s cubic-bezier(.22, .61, .36, 1), background var(--lento), border-color var(--lento);
}
/* selo é etiqueta, não botão: parado */
html[data-perf~="magnetismo"] .selo { translate: none; }

/* brilho do logo: metade da força e a cada 16 s (era 9 s) */
html[data-perf~="magnetismo"] .nav__marca::after {
  background: linear-gradient(105deg, transparent 40%, rgba(255, 240, 205, .45) 50%, transparent 60%);
  background-size: 260% 100%;
  animation-duration: 16s;
  /* o recorte do brilho segue o logo que está na tela: o perf.css aponta para o quadrado */
  -webkit-mask-image: url("../midia/logo-houzzes-horizontal.png");
  mask-image: url("../midia/logo-houzzes-horizontal.png");
}

/* --------------------------------------------------------------- entrada -- */
html.js-mov[data-mov="focoslogan"] [data-rev]:not(.visivel) { filter: blur(4px); transform: translateY(6px); }
html.js-mov[data-mov="focoslogan"] [data-rev]:not(.pronto) {
  transition: opacity .6s ease, filter .6s ease, transform .6s var(--curva);
  transition-delay: var(--atraso, 0ms);
}
html.js-mov[data-mov="focoslogan"] .hero__titulo:not(.visivel) .pal { transform: translateY(.2em); filter: blur(2px); }
html.js-mov[data-mov="focoslogan"] .hero__titulo:not(.visivel) { filter: none; transform: none; }

/* ----------------------------------------------------------------- blocos -- */
html[data-vida~="reacao"] .bloco {
  background-image: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%),
    rgba(224, 185, 111, calc(var(--luz) * .07)), transparent 68%);
}
html[data-vida~="reacao"] .bloco:hover {
  background-image: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%),
    rgba(224, 185, 111, calc(var(--luz) * .07)), transparent 68%);
  transform: translateY(-2px);
}

/* o clarão que atravessa o fio de cima: de 60% para 28%, a cada 16 s */
html[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, .28) 50%,
    rgba(255, 255, 255, .07) 60%, rgba(255, 255, 255, .07) 100%);
  background-size: 300% 100%;
  animation: varrer 16s cubic-bezier(.4, 0, .2, 1) var(--fio-atraso, 0s) infinite;
}

/* ------------------------------------------------------ respiro e faixa -- */
@keyframes respirar {
  0%, 100% { opacity: .35; transform: translateX(-50%) scale(.99); }
  50%      { opacity: .7;  transform: translateX(-50%) scale(1.01); }
}
.faixa-viva__trilho { animation-duration: 70s; }