/* =====================================================================
   Biblioteca — animações de rolagem (origem: Gandra v3.0 - animado)
   Tudo aqui só vale com html.anim (o <head> liga isso se o JS rodar e a
   pessoa não pediu "reduzir movimento"). Sem isso, nada some nem trava.
   O JS (animacoes.js) escreve o progresso da rolagem em --p (0 a 1).

   Ajuste por site, no :root do style.css do cliente:
     --altura-topo  altura do menu fixo (padrão 84px)
     --largura      largura máxima do conteúdo (padrão 1180px)
     --pb           filtro das fotos "apagadas" (padrão preto e branco)
     --anim-destaque cor do título da máscara (padrão currentColor)
   ===================================================================== */

/* ---------- 1. Título que sobe linha a linha (abertura) ----------
   <h1 data-titulo-linhas><span class="linha"><span>Linha 1</span></span>
                          <span class="linha"><em>Linha 2</em></span></h1> */
[data-titulo-linhas] .linha { display: block; }
.anim [data-titulo-linhas] .linha { overflow: hidden; padding-bottom: .06em; }
.anim [data-titulo-linhas] .linha > * {
  display: inline-block;
  transform: translateY(105%);
  animation: anim-subir 1s cubic-bezier(.2, .7, .1, 1) forwards;
}
.anim [data-titulo-linhas] .linha:nth-child(2) > * { animation-delay: .15s; }
.anim [data-titulo-linhas] .linha:nth-child(3) > * { animation-delay: .3s; }

/* itens que aparecem em seguida ao carregar: data-aparecer="0.45" (atraso em s) */
.anim [data-aparecer] { opacity: 0; animation: anim-aparecer .9s ease forwards; animation-delay: var(--atraso-entrada, 0s); }
@keyframes anim-subir { to { transform: none; } }
@keyframes anim-aparecer { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }

/* ---------- 2. Abertura que reage à rolagem ----------
   <section data-rolagem="abertura"> com a foto em [data-zoom] e o texto em [data-sobe] */
.anim [data-rolagem="abertura"] [data-zoom] { transform: scale(calc(1 + var(--p, 0) * .18)); transform-origin: 60% 40%; }
.anim [data-rolagem="abertura"] [data-sobe] {
  transform: translateY(calc(var(--p, 0) * -90px));
  opacity: calc(1 - var(--p, 0) * 1.3);
}

/* ---------- 3. Entradas suaves ao aparecer na tela ----------
   data-revelar | data-revelar="esquerda" | "direita" | "foto" (foto abre de baixo) */
.anim [data-revelar] {
  opacity: 0;
  transform: translateY(46px);
  transition: opacity .9s ease, transform 1s cubic-bezier(.2, .7, .1, 1);
  transition-delay: var(--atraso, 0s);
}
.anim [data-revelar="esquerda"] { transform: translateX(-70px); }
.anim [data-revelar="direita"] { transform: translateX(70px); }
.anim [data-revelar].revelado { opacity: 1; transform: none; }

.anim [data-revelar="foto"] { transform: none; opacity: 1; }
.anim [data-revelar="foto"] img { clip-path: inset(100% 0 0 0); transition: clip-path 1.3s cubic-bezier(.7, 0, .2, 1), filter .6s; }
.anim [data-revelar="foto"].revelado img { clip-path: inset(0); }
/* moldura em ::before (se o site tiver) desliza até o lugar */
.anim [data-revelar="foto"]::before { transform: translate(-18px, -18px); opacity: 0; transition: transform 1.2s .5s ease, opacity 1.2s .5s; }
.anim [data-revelar="foto"].revelado::before { transform: none; opacity: 1; }

/* lista em cascata: os <li> de um bloco com data-cascata entram um a um */
.anim [data-cascata] li { opacity: 0; transform: translateX(-14px); transition: opacity .5s, transform .5s; transition-delay: calc(var(--i, 0) * .08s); }
.anim [data-cascata].revelado li { opacity: 1; transform: none; }

/* ---------- 4. Trilho horizontal (galeria/portfólio) ----------
   <section class="trilho"><div class="trilho__palco"> cabeçalho
     <div class="trilho__faixa"> <figure class="trilho__item">...</figure>... </div>
   </div></section>
   Sem animação, a faixa vira grade normal (defina no CSS do site). */
.anim .trilho { padding: 0; }
.anim .trilho__palco {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: var(--altura-topo, 84px);
}
.anim .trilho__faixa {
  display: flex;
  gap: 1.2rem;
  width: max-content;
  padding-inline: max(20px, (100vw - var(--largura, 1180px)) / 2);
  transform: translateX(calc(var(--deslocamento, 0) * -1px));
  will-change: transform;
}
.anim .trilho__item {
  flex: none;
  width: min(26vw, (100svh - var(--altura-topo, 84px) - 260px) * .8);
  transition: transform .6s;
}
.anim .trilho__item img { filter: var(--pb, grayscale(1)); transition: filter .6s; }
/* a foto mais perto do centro sobe e ganha cor */
.anim .trilho__item.em-foco { transform: translateY(-10px); }
.anim .trilho__item.em-foco img { filter: none; }

/* ---------- 5. Máscara: foto abre de dentro de um círculo ----------
   <section class="mascara"><div class="mascara__palco"><img ...>
     <div class="mascara__texto"><p class="mascara__titulo">Pode <em>entrar.</em></p>
     <p class="mascara__sub">endereço ou chamada</p></div></div></section> */
.mascara { position: relative; }
.mascara__palco { position: relative; height: 70svh; overflow: hidden; display: grid; place-items: center; }
.mascara__palco img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: var(--pb, grayscale(1)) brightness(.6); }
.mascara__texto { position: relative; text-align: center; padding: 0 20px; }
.mascara__titulo { margin: 0; font-size: clamp(3.5rem, 13vw, 10rem); line-height: .95; text-shadow: 0 4px 30px rgba(0,0,0,.6); }
.mascara__titulo em { font-style: normal; color: var(--anim-destaque, currentColor); }
.mascara__sub { margin: 1rem 0 0; letter-spacing: .25em; text-transform: uppercase; }

.anim .mascara { height: 260vh; }
.anim .mascara__palco { position: sticky; top: 0; height: 100svh; }
.anim .mascara__palco img {
  clip-path: circle(calc(9% + var(--p, 0) * 85%) at 50% 50%);
  transform: scale(calc(1.25 - var(--p, 0) * .25));
  filter: grayscale(calc(1 - var(--p, 0))) brightness(calc(.95 - var(--p, 0) * .4));
}
.anim .mascara__titulo { transform: scale(calc(1.15 - var(--p, 0) * .2)); }
.anim .mascara__sub { opacity: calc((var(--p, 0) - .55) * 3); }

@media (max-width: 920px) {
  .anim .trilho__item { width: min(68vw, (100svh - var(--altura-topo, 68px) - 240px) * .8); }
}