/* Revelação ao scroll: baixo → cima + opacidade */

@media (prefers-reduced-motion: no-preference) {
  .js-reveal {
    opacity: 0;
    transform: translate3d(0, 36px, 0);
    /* Transição também ao sair da viewport (remove .is-revealed) */
    transition:
      opacity 0.72s cubic-bezier(0.22, 1, 0.36, 1),
      transform 0.72s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: 0ms;
  }

  /* Works (#works) + cases: movimento um pouco mais curto por elemento */
  .js-reveal.js-reveal-individual {
    transform: translate3d(0, 28px, 0);
    transition:
      opacity 0.88s cubic-bezier(0.16, 1, 0.32, 1),
      transform 0.88s cubic-bezier(0.16, 1, 0.32, 1);
    transition-delay: 0ms;
  }

  .js-reveal.is-revealed {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: var(--reveal-delay, 0ms);
  }

  /* Garante que individual + revealed zera o translate (mesma especificidade que o estado inicial) */
  .js-reveal.js-reveal-individual.is-revealed {
    transform: translate3d(0, 0, 0);
  }

  /* Ao esconder, sem atraso em cadeia (evita “fantasma” ao sair da secção) */
  .js-reveal:not(.is-revealed) {
    transition-delay: 0ms;
  }

  /* Divisores: só fade — sem translate, para ficarem centrados no respiro */
  .case-section-divider.js-reveal,
  .case-section-divider.js-reveal.js-reveal-individual,
  .case-section-divider.js-reveal.is-revealed,
  .case-section-divider.js-reveal.js-reveal-individual.is-revealed {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .js-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Cards com hover em transform continuam funcionando após .is-revealed */
.card.js-reveal.is-revealed:hover {
  transform: translateY(-4px);
}

.bento-card.js-reveal.is-revealed:hover {
  transform: translateY(-2px);
}