.mov-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* =========================================================
   MOVIMENTO
   Efeitos ativados por atributo no HTML. Exemplos:
     <h2 data-mov="titulo">Texto</h2>          título que sobe de trás de uma linha
     <div data-mov="surgir">...</div>           aparece suave ao rolar
     <div data-mov="deslizar">...</div>         entra deslizando de lado
     <ul data-mov="sequencia">...</ul>          itens aparecem um depois do outro
     <p data-mov="palavras">...</p>             texto acende palavra por palavra ao rolar
     <figure data-mov="aquarela">...</figure>   foto revelada como mancha de aquarela/tinta
     <img data-mov="paralaxe" data-velocidade="0.3">  move mais devagar que a página
     <svg data-mov="desenhar">...</svg>         linha que se desenha ao rolar
     <section data-processo>...</section>       etapas com foto e cronômetro (ver processo)
     <div data-petalas></div>                   pétalas caindo (só nos temas que permitem)
   O ritmo (duração, distância, curva) vem do tema em temas.css.
   Regra de ouro: sem JavaScript ou com "reduzir movimento" ligado,
   TUDO aparece normalmente, sem animação.
   ========================================================= */

/* ---------- Base de tipografia do tema ---------- */
h1, h2, .titulo-tema {
  font-family: var(--fonte-titulo);
  font-weight: var(--peso-titulo);
  text-transform: var(--caixa-titulo);
  letter-spacing: var(--espaco-letras-titulo);
}
h3, .subtitulo-tema {
  font-family: var(--fonte-subtitulo);
  font-weight: var(--peso-subtitulo);
  text-transform: var(--caixa-titulo);
}
.detalhe {
  font-family: var(--fonte-detalhe);
  font-size: .78rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--cor-texto-suave);
}

/* ---------- Efeitos (só com JS ativo e movimento permitido) ---------- */
@media (prefers-reduced-motion: no-preference) {

  /* surgir */
  .mov-ativo [data-mov="surgir"],
  .mov-ativo [data-mov="sequencia"] > * {
    opacity: 0;
    transform: translateY(var(--mov-distancia));
    transition: opacity var(--mov-duracao) var(--mov-curva),
                transform var(--mov-duracao) var(--mov-curva);
    transition-delay: calc(var(--mov-i, 0) * var(--mov-atraso));
  }
  .mov-ativo [data-mov="surgir"].mov-visivel,
  .mov-ativo [data-mov="sequencia"].mov-visivel > * {
    opacity: 1;
    transform: none;
  }

  /* deslizar */
  .mov-ativo [data-mov="deslizar"] {
    opacity: 0;
    transform: translateX(calc(var(--mov-distancia) * -1.6));
    transition: opacity var(--mov-duracao) var(--mov-curva),
                transform var(--mov-duracao) var(--mov-curva);
  }
  .mov-ativo [data-mov="deslizar"].mov-visivel { opacity: 1; transform: none; }

  /* titulo: cada palavra sobe de trás de uma linha invisível */
  .mov-ativo [data-mov="titulo"] .mov-p {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
    /* folga para letras que sobem e descem além da linha (cursivas como o "f") */
    padding: .25em .12em .4em;
    margin: -.25em -.12em -.4em;
  }
  /* depois que a palavra sobe, o recorte é desligado: nada fica cortado */
  .mov-ativo [data-mov="titulo"].mov-solto .mov-p { overflow: visible; }
  .mov-ativo [data-mov="titulo"] .mov-p > span {
    display: inline-block;
    transform: translateY(115%);
    transition: transform var(--mov-duracao) var(--mov-curva);
    transition-delay: calc(var(--mov-i, 0) * 60ms);
  }
  .mov-ativo [data-mov="titulo"].mov-visivel .mov-p > span { transform: none; }

  /* palavras: acendem conforme a rolagem */
  .mov-ativo [data-mov="palavras"] .mov-p { color: color-mix(in srgb, var(--cor-texto) 55%, var(--cor-fundo)); transition: color .35s ease; }
  .mov-ativo [data-mov="palavras"] .mov-p.mov-acesa { color: var(--cor-texto); }

  /* aquarela: a foto se espalha a partir de um ponto, com borda macia */
  .mov-ativo.mov-mascara [data-mov="aquarela"] {
    -webkit-mask-image: radial-gradient(circle at var(--mov-origem, 30% 70%), #000 var(--mov-raio), transparent calc(var(--mov-raio) + 30%));
            mask-image: radial-gradient(circle at var(--mov-origem, 30% 70%), #000 var(--mov-raio), transparent calc(var(--mov-raio) + 30%));
    transition: --mov-raio calc(var(--mov-duracao) * 2) var(--mov-curva);
  }
  .mov-ativo.mov-mascara [data-mov="aquarela"].mov-visivel { --mov-raio: 160%; }
  .mov-ativo.mov-mascara [data-mov="aquarela"] img {
    transform: scale(1.08);
    transition: transform calc(var(--mov-duracao) * 2.4) var(--mov-curva);
  }
  .mov-ativo.mov-mascara [data-mov="aquarela"].mov-visivel img { transform: none; }

  /* paralaxe: o JS define --mov-y */
  .mov-ativo [data-mov="paralaxe"] {
    transform: translate3d(0, var(--mov-y, 0px), 0);
    will-change: transform;
  }
}


/* =========================================================
   PROCESSO COM CRONÔMETRO
   Sem JS: mostra a foto final, a lista completa e o tempo total.
   Com JS: a seção fica parada na tela enquanto a pessoa rola;
   a foto muda a cada etapa e o cronômetro conta o tempo.
   ========================================================= */
.processo { position: relative; background: var(--cor-fundo-claro); }
.processo__fixo {
  display: grid;
  gap: 1.5rem;
  padding-block: 3rem;
}
.processo__fotos {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--raio);
  overflow: hidden;
  background: var(--cor-borda);
}
.processo__fotos img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .6s ease;
}
.processo__fotos img:last-child,
.processo__fotos img.mov-atual { opacity: 1; }
.processo__titulo { margin-bottom: .25rem; }
.processo__intro { color: var(--cor-texto-suave); margin-bottom: 1rem; }
.processo__etapas {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--cor-borda);
}
.processo__etapas li {
  display: grid;
  grid-template-columns: 2.2rem 1fr auto;
  gap: 0 .75rem;
  padding: .7rem 0;
  border-bottom: 1px solid var(--cor-borda);
  color: var(--cor-texto-suave);
  transition: color .3s ease;
}
.processo__etapas .processo__n,
.processo__etapas .processo__t { font-family: var(--fonte-detalhe); font-size: .8rem; }
.processo__etapas strong { color: var(--cor-texto); font-weight: 700; }
.processo__etapas p {
  grid-column: 2 / 4;
  margin: .25rem 0 0;
  font-size: .92rem;
}
.processo__cronometro {
  display: flex;
  align-items: baseline;
  align-content: flex-start;
  gap: .75rem;
  flex-wrap: wrap;
}
.processo__tempo {
  font-family: var(--fonte-numeros);
  font-weight: var(--peso-subtitulo);
  font-size: clamp(3rem, 12vw, 6.5rem);
  line-height: 1;
  color: var(--cor-primaria);
  font-variant-numeric: tabular-nums;
  text-transform: var(--caixa-titulo);
}
.processo__rotulo { font-family: var(--fonte-detalhe); font-size: .8rem; color: var(--cor-texto-suave); text-transform: uppercase; letter-spacing: .04em; }

@media (min-width: 900px) {
  .processo__fixo {
    grid-template-columns: 1.15fr 1fr;
    grid-template-areas: "fotos info" "fotos tempo";
    align-items: center;
    gap: 1.5rem 3rem;
  }
  .processo__fotos { grid-area: fotos; aspect-ratio: 4 / 5; }
  .processo__info { grid-area: info; }
  .processo__cronometro { grid-area: tempo; align-self: end; }
}

/* Versão com rolagem: só com JS e movimento permitido */
@media (prefers-reduced-motion: no-preference) {
  .mov-ativo .processo { height: calc((var(--mov-etapas, 4) + 1) * 70vh + 100vh); }
  .mov-ativo .processo__fixo {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    align-content: center;
    padding-block: 4.5rem 1.5rem;
  }
  .mov-ativo .processo__fotos img:last-child { opacity: 0; }
  .mov-ativo .processo__fotos img.mov-atual { opacity: 1; }
  .mov-ativo .processo__etapas li.mov-atual { color: var(--cor-texto); }
  .mov-ativo .processo__etapas li.mov-atual .processo__n { color: var(--cor-primaria); }
  .mov-ativo .processo__etapas li:not(.mov-atual) p { display: none; }
  .mov-ativo .processo__etapas li.mov-feita strong { color: var(--cor-texto-suave); }

  @media (max-width: 899px) {
    .mov-ativo .processo__fixo { gap: .9rem; grid-template-rows: auto auto 1fr; }
    .mov-ativo .processo__fotos { aspect-ratio: auto; height: 34svh; order: 2; }
    .mov-ativo .processo__info { order: 1; }
    .mov-ativo .processo__intro { display: none; }
    .mov-ativo .processo__cronometro { order: 3; }
    .mov-ativo .processo__etapas li:not(.mov-atual) { display: none; }
    .mov-ativo .processo__etapas { border-top: 0; }
    .mov-ativo .processo__tempo { font-size: clamp(3rem, 16vw, 5rem); }
  }
}


/* =========================================================
   PÉTALAS (decoração da abertura; o tema decide se aparecem)
   ========================================================= */
[data-petalas] {
  opacity: var(--petalas, 1);
  transition: opacity .6s ease;
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.mov-petala {
  position: absolute;
  top: -8%;
  width: var(--tam, 14px);
  height: calc(var(--tam, 14px) * .8);
  border-radius: 80% 0 80% 0;
  background: linear-gradient(135deg, var(--cor-acento), var(--cor-fundo-claro));
  opacity: .75;
  animation: mov-cair var(--dur, 14s) linear var(--atraso, 0s) infinite;
}
@keyframes mov-cair {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg); }
  50%  { transform: translate3d(var(--vento, 40px), 55vh, 0) rotate(160deg); }
  100% { transform: translate3d(calc(var(--vento, 40px) * -0.5), 115vh, 0) rotate(320deg); }
}
@media (prefers-reduced-motion: reduce) {
  [data-petalas] { display: none; }
}