<style>
  .elementor-element:not(.dont) {
    opacity: 0;
    transform: translateY(8vh) skewY(-3deg);
    transition: opacity 0.5s ease, transform 0.8s ease 0.2s;
  }
  .elementor-element.animated:not(.dont) {
    opacity: 1;
    transform: translateY(0) skewY(0deg);
  }
</style>

<script>
  document.addEventListener("DOMContentLoaded", () => {
    const handleIntersection = (entries, observer) => {
      entries.forEach(entry => {
        entry.target.classList.toggle('animated', entry.isIntersecting);
      });
    };
    const observer = new IntersectionObserver(handleIntersection, {
      root: null,
      rootMargin: '0px',
      threshold: 0
    });
    document.querySelectorAll('.elementor-element').forEach(element => observer.observe(element));
  });