/* ============================================================
   SCROLL REVEAL — imagens surgem de baixo ao entrar na seção
   Uso: adicionar classe .js-anim-section na seção do Elementor
        e .anim-img .anim-d1~d8 em cada widget de imagem
   ============================================================ */

.anim-img {
  opacity: 0;
  transform: translateY(100vh);
  transition: opacity 2s ease, transform 2s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

/* Stagger: cada imagem chega com um atraso diferente */
.anim-d1 {
  transition-delay: 0s;
}

.anim-d2 {
  transition-delay: 0.1s;
}

.anim-d3 {
  transition-delay: 0.2s;
}

.anim-d4 {
  transition-delay: 0.3s;
}

.anim-d5 {
  transition-delay: 0.4s;
}

.anim-d6 {
  transition-delay: 0.5s;
}

.anim-d7 {
  transition-delay: 0.6s;
}

.anim-d8 {
  transition-delay: 0.7s;
}

/* Estado final: disparado quando .is-visible entra na seção */
.js-anim-section.is-visible .anim-img {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   PONTE REVEAL → FLOAT (experimental)
   Combina .anim-img com .float-p* no mesmo elemento. O float anima
   'translate' e o reveal anima 'transform': são propriedades distintas
   e compõem, então não conflitam.
   O float fica pausado até a seção aparecer, e só entra quando o
   reveal daquela imagem terminou (2s de transition + o stagger dN).
   ============================================================ */

.js-anim-section .anim-img[class*="float-p"] {
  animation-play-state: paused;
}

.js-anim-section.is-visible .anim-img[class*="float-p"] {
  animation-play-state: running;
}

.js-anim-section.is-visible .anim-d1[class*="float-p"] { animation-delay: 2s; }
.js-anim-section.is-visible .anim-d2[class*="float-p"] { animation-delay: 2.1s; }
.js-anim-section.is-visible .anim-d3[class*="float-p"] { animation-delay: 2.2s; }
.js-anim-section.is-visible .anim-d4[class*="float-p"] { animation-delay: 2.3s; }
.js-anim-section.is-visible .anim-d5[class*="float-p"] { animation-delay: 2.4s; }
.js-anim-section.is-visible .anim-d6[class*="float-p"] { animation-delay: 2.5s; }
.js-anim-section.is-visible .anim-d7[class*="float-p"] { animation-delay: 2.6s; }
.js-anim-section.is-visible .anim-d8[class*="float-p"] { animation-delay: 2.7s; }

/* Tamanhos responsivos por imagem */
.img-size-lg { width: clamp(200px, 20.8vw, 300px); height: auto; }
.img-size-md { width: clamp(130px, 13.9vw, 200px); height: auto; }
.img-size-sm { width: clamp(80px,   8.3vw, 120px);  height: auto; }

/* No editor do Elementor: exibe tudo visível pra não confundir na edição */
.elementor-editor-active .anim-img {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  animation: none !important; /* congela o float pra não atrapalhar o posicionamento */
}