/* mov.css — os PERFIS DE ENTRADA do PRUMO.

   Perfil escolhido por data-mov no <html>:
     parado · sobrio · instrumento · profundidade      (12/09, 1ª rodada)
     cortina · foco · slogan                           (12/09, variações do VIVO)
     focoslogan                                        (12/09, a escolhida: slogan no título, foco no resto)

   ⚠️ DUAS REGRAS DE SEGURANÇA, as duas aprendidas no ar:

   1. NADA É ESCONDIDO SEM JAVASCRIPT VIVO. Todo seletor que zera opacidade
      exige `html.js-mov`, que o mov.js escreve na primeira linha. Sem script,
      sem classe, página inteira e parada. Falha fechada.

   2. A ENTRADA SAI DO CAMINHO QUANDO TERMINA. Até 12/09 o estado final da
      entrada era uma declaração fixa (`.visivel { transform: none }`) com
      seletor forte — e ela vencia para sempre o hover do tema e da reação:
      o bloco não subia, não inclinava e o medidor não completava. Agora:
        · o estado ESCONDIDO só vale em `:not(.visivel)`
        · a TRANSIÇÃO só vale em `:not(.pronto)`
      e o mov.js marca `.pronto` quando a entrada acaba. Depois disso nenhuma
      regra deste arquivo casa com o bloco, e quem manda é o resto da página. */

:root { --curva: cubic-bezier(.22, .61, .36, 1); }

/* --------------------------------------------------- estado escondido ---- */
html.js-mov:not([data-mov="parado"]) [data-rev]:not(.visivel) { opacity: 0; }

/* ------------------------------------------------------------- sobrio ---- */
html.js-mov[data-mov="sobrio"] [data-rev]:not(.visivel) { transform: translateY(8px); }
html.js-mov[data-mov="sobrio"] [data-rev]:not(.pronto) {
  transition: opacity .18s ease-out, transform .18s ease-out;
}

/* -------------------------------------------------------- instrumento --- */
html.js-mov[data-mov="instrumento"] [data-rev]:not(.visivel) { transform: translateY(12px); }
html.js-mov[data-mov="instrumento"] [data-rev]:not(.pronto) {
  transition: opacity .26s ease-out, transform .26s ease-out;
}

/* ------------------------------------------------------- profundidade --- */
html.js-mov[data-mov="profundidade"] [data-rev]:not(.visivel) {
  transform: translateY(18px) scale(.988);
}
html.js-mov[data-mov="profundidade"] [data-rev]:not(.pronto) {
  transition: opacity .52s var(--curva), transform .52s var(--curva);
  transition-delay: var(--atraso, 0ms);
}
/* o fio de luz atravessa o topo do bloco uma vez, quando ele entra.
   (Mantido com este seletor de propósito: o respiro do vida.css empata com ele
   e vence por carregar depois — mexer aqui quebra o clarão recorrente.) */
html.js-mov[data-mov="profundidade"] .bloco.visivel::before {
  background: linear-gradient(90deg,
    rgba(255, 255, 255, .07) 0%, rgba(255, 255, 255, .07) 35%,
    rgba(234, 223, 198, .55) 50%,
    rgba(255, 255, 255, .07) 65%, rgba(255, 255, 255, .07) 100%);
  background-size: 300% 100%;
  animation: corre 1.5s cubic-bezier(.3, .1, .3, 1) .15s 1 both;
}
@keyframes corre { from { background-position: 120% 0; } to { background-position: -60% 0; } }

/* ------------------------------------------------------------ cortina --- */
/* O bloco é revelado de baixo para cima, como se uma cortina descesse na
   frente dele. É o clip reveal do wix-studio-spacing do banco.
   O estado final vai a inset(-3rem), não a inset(0): com 0 a cortina cortaria
   a sombra e o translateY do hover durante a transição. */
html.js-mov[data-mov="cortina"] [data-rev]:not(.visivel) {
  clip-path: inset(0 0 100% 0);
  transform: translateY(22px);
}
html.js-mov[data-mov="cortina"] [data-rev].visivel:not(.pronto) { clip-path: inset(-3rem); }
html.js-mov[data-mov="cortina"] [data-rev]:not(.pronto) {
  transition: opacity .5s ease, clip-path .75s var(--curva), transform .75s var(--curva);
  transition-delay: var(--atraso, 0ms);
}

/* --------------------------------------------------------------- foco --- */
/* Chega desfocado e levemente maior, assenta nítido — uma câmera ajustando o
   foco. O gesto do lumina-video. O filtro some de verdade no .pronto: filtro
   esquecido no elemento pesa na rolagem. */
html.js-mov[data-mov="foco"] [data-rev]:not(.visivel) {
  filter: blur(12px);
  transform: scale(1.025);
}
html.js-mov[data-mov="foco"] [data-rev].visivel:not(.pronto) { filter: blur(0); }
html.js-mov[data-mov="foco"] [data-rev]:not(.pronto) {
  transition: opacity .8s ease, filter .8s var(--curva), transform .8s var(--curva);
  transition-delay: var(--atraso, 0ms);
}

/* ------------------------------------------------------------- slogan --- */
/* O slogan tem três batidas e entra em três batidas. O resto da página entra
   como no profundidade. */
html.js-mov[data-mov="slogan"] [data-rev]:not(.visivel) { transform: translateY(14px); }
html.js-mov[data-mov="slogan"] [data-rev]:not(.pronto) {
  transition: opacity .5s var(--curva), transform .5s var(--curva);
  transition-delay: var(--atraso, 0ms);
}
/* o bloco do título NÃO some inteiro: quem entra são as palavras */
html.js-mov[data-mov="slogan"] .hero__titulo:not(.visivel) { opacity: 1; transform: none; }
html.js-mov[data-mov="slogan"] .hero__titulo .pal { display: inline-block; }
html.js-mov[data-mov="slogan"] .hero__titulo:not(.visivel) .pal {
  opacity: 0; transform: translateY(.45em); filter: blur(5px);
}
html.js-mov[data-mov="slogan"] .hero__titulo:not(.pronto) .pal {
  transition: opacity .6s ease, transform .75s var(--curva), filter .6s ease;
  transition-delay: var(--pal-atraso, 0ms);
}
/* o subtítulo espera a última palavra assentar */
html.js-mov[data-mov="slogan"] .hero__titulo:not(.visivel) .hero__sub {
  opacity: 0; transform: translateY(8px);
}
html.js-mov[data-mov="slogan"] .hero__titulo:not(.pronto) .hero__sub {
  transition: opacity .6s ease .78s, transform .6s var(--curva) .78s;
}

/* ------------------------------ medidor, linha e haste nos perfis ricos --- */
/* O medidor sai do zero, a linha se desenha e a haste cresce enquanto o bloco
   entra. Depois do .pronto, as regras soltam e o hover do tema volta a
   completar o medidor. */
html.js-mov:is([data-mov="instrumento"], [data-mov="profundidade"], [data-mov="cortina"],
  [data-mov="foco"], [data-mov="slogan"]) .bloco--medido:not(.visivel)::after { width: 0; }
html.js-mov:is([data-mov="instrumento"], [data-mov="profundidade"], [data-mov="cortina"],
  [data-mov="foco"], [data-mov="slogan"]) .bloco--medido:not(.pronto)::after {
  transition: width .9s var(--curva) .15s;
}

html.js-mov:is([data-mov="instrumento"], [data-mov="profundidade"], [data-mov="cortina"],
  [data-mov="foco"], [data-mov="slogan"]) [data-rev]:not(.visivel) .faisca .linha {
  stroke-dashoffset: var(--traco, 0);
}
html.js-mov:is([data-mov="instrumento"], [data-mov="profundidade"], [data-mov="cortina"],
  [data-mov="foco"], [data-mov="slogan"]) [data-rev]:not(.pronto) .faisca .linha {
  transition: stroke-dashoffset 1.1s var(--curva) .1s;
}

html.js-mov:is([data-mov="profundidade"], [data-mov="cortina"], [data-mov="foco"],
  [data-mov="slogan"]) .rotulo:not(.visivel)::before { transform: scaleY(0); }
html.js-mov:is([data-mov="profundidade"], [data-mov="cortina"], [data-mov="foco"],
  [data-mov="slogan"]) .rotulo:not(.pronto)::before {
  transform-origin: top;
  transition: transform .5s var(--curva) .1s;
}

/* ------------------------------------------------------- foco + slogan --- */
/* 12/09: ele escolheu as duas. O título entra palavra por palavra (slogan) e
   todo o resto chega fora de foco e assenta nítido (foco). */
html.js-mov[data-mov="focoslogan"] [data-rev]:not(.visivel) { filter: blur(12px); transform: scale(1.025); }
html.js-mov[data-mov="focoslogan"] [data-rev].visivel:not(.pronto) { filter: blur(0); }
html.js-mov[data-mov="focoslogan"] [data-rev]:not(.pronto) {
  transition: opacity .8s ease, filter .8s var(--curva), transform .8s var(--curva);
  transition-delay: var(--atraso, 0ms);
}
/* o bloco do título não desfoca inteiro: quem entra são as palavras */
html.js-mov[data-mov="focoslogan"] .hero__titulo:not(.visivel) { opacity: 1; transform: none; filter: none; }
html.js-mov[data-mov="focoslogan"] .hero__titulo .pal { display: inline-block; }
html.js-mov[data-mov="focoslogan"] .hero__titulo:not(.visivel) .pal {
  opacity: 0; transform: translateY(.45em); filter: blur(5px);
}
html.js-mov[data-mov="focoslogan"] .hero__titulo:not(.pronto) .pal {
  transition: opacity .6s ease, transform .75s var(--curva), filter .6s ease;
  transition-delay: var(--pal-atraso, 0ms);
}
html.js-mov[data-mov="focoslogan"] .hero__titulo:not(.visivel) .hero__sub { opacity: 0; transform: translateY(8px); }
html.js-mov[data-mov="focoslogan"] .hero__titulo:not(.pronto) .hero__sub {
  transition: opacity .6s ease .78s, transform .6s var(--curva) .78s;
}
html.js-mov[data-mov="focoslogan"] .bloco--medido:not(.visivel)::after { width: 0; }
html.js-mov[data-mov="focoslogan"] .bloco--medido:not(.pronto)::after { transition: width .9s var(--curva) .15s; }
html.js-mov[data-mov="focoslogan"] [data-rev]:not(.visivel) .faisca .linha { stroke-dashoffset: var(--traco, 0); }
html.js-mov[data-mov="focoslogan"] [data-rev]:not(.pronto) .faisca .linha { transition: stroke-dashoffset 1.1s var(--curva) .1s; }
html.js-mov[data-mov="focoslogan"] .rotulo:not(.visivel)::before { transform: scaleY(0); }
html.js-mov[data-mov="focoslogan"] .rotulo:not(.pronto)::before { transform-origin: top; transition: transform .5s var(--curva) .1s; }

/* ------------------------------------------------------------ respeito --- */
@media (prefers-reduced-motion: reduce) {
  html.js-mov [data-rev], html.js-mov .hero__titulo .pal, html.js-mov .hero__sub {
    opacity: 1 !important; transform: none !important; filter: none !important;
    clip-path: none !important; transition: none !important;
  }
  html.js-mov .bloco--medido::after { transition: none !important; }
  html.js-mov .faisca .linha { stroke-dashoffset: 0 !important; transition: none !important; }
  html.js-mov .rotulo::before { transform: none !important; transition: none !important; }
  html.js-mov .bloco.visivel::before { animation: none !important; }
}