/* animacao.css — o site mais vivo, sem atrapalhar a leitura.
 *
 * Tres coisas, todas baratas (transform e opacity, que o navegador anima sem
 * recalcular layout):
 *   1. as fotos e os cartoes entram ao rolar, um depois do outro;
 *   2. a foto cresce de leve quando o dedo ou o mouse passa;
 *   3. uma linha fina no topo mostra o quanto da pagina ja foi lido.
 *
 * Nada fica escondido sem JavaScript: o estado inicial so existe quando o
 * animacao.js liga a classe `anima-on` — e ele nunca esconde o que ja esta na
 * tela. Quem pediu menos movimento no aparelho nao recebe nenhum.
 */
:root { --anima-cor: var(--pessego, var(--shu, var(--rosso, #c4161c))); }

/* 1. entrada ao rolar */
html.anima-on .anima {
  opacity: 0; transform: translateY(26px) scale(.985);
  transition: opacity .8s ease, transform .9s cubic-bezier(.2,.7,.3,1);
  transition-delay: calc(var(--i, 0) * 110ms);
  will-change: opacity, transform;
}
html.anima-on .anima.entrou { opacity: 1; transform: none; will-change: auto; }

/* 2. a foto respira ao passar */
.scatto, .foto, .facciata, .fachada, .destaque__foto { overflow: hidden; }
.scatto img, .foto img, .facciata img, .fachada img {
  transition: transform 1.1s cubic-bezier(.2,.7,.3,1), filter .6s ease;
}
@media (hover: hover) {
  .scatto:hover img, .foto:hover img, .facciata:hover img, .fachada:hover img {
    transform: scale(1.06); filter: saturate(1.08) contrast(1.03);
  }
}

/* 3. linha de leitura */
.anima-progresso {
  position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 200;
  background: var(--anima-cor); transform-origin: 0 50%; transform: scaleX(0);
  pointer-events: none;
}

/* o botao flutuante de reservar chama atencao de tempos em tempos: um anel
   que sai dele e se apaga. E um pseudo-elemento, para nao tocar na sombra que
   o botao ja tem. */
@keyframes anima-pulso {
  0%, 80%, 100% { opacity: 0; box-shadow: 0 0 0 0 var(--anima-cor); }
  82%           { opacity: .55; box-shadow: 0 0 0 0 var(--anima-cor); }
  98%           { opacity: 0; box-shadow: 0 0 0 18px var(--anima-cor); }
}
.wa::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none; opacity: 0;
  animation: anima-pulso 7s ease-out 3s infinite;
}

@media (prefers-reduced-motion: reduce) {
  html.anima-on .anima { opacity: 1; transform: none; transition: none; }
  .anima-progresso { display: none; }
  .scatto img, .foto img, .facciata img, .fachada img { transition: none; transform: none !important; filter: none !important; }
  .wa::after { animation: none; }
}