/* ========== Animações Base ========== */
@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-down {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-left {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fade-right {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ========== Classes Automáticas ========== */
.fade-up,
.fade-down,
.fade-left,
.fade-right {
  opacity: 0;
  animation-fill-mode: forwards;
  animation-duration: 0.6s;
  animation-timing-function: ease-out;
}

.fade-up {
  animation-name: fade-up;
}

.fade-down {
  animation-name: fade-down;
}

.fade-left {
  animation-name: fade-left;
}

.fade-right {
  animation-name: fade-right;
}
/* ======================================================= */
/* ======================================================= */
/* ======================================================= */
/* ======================================================= */
/* ======================================================= */
/* ======================================================= */
/* ======================================================= */
/* ======================================================= */

/* ========== Classes com IntersectionObserver ========== */

.i-fade-up,
.i-fade-down,
.i-fade-left,
.i-fade-right {
    filter: blur(14px);
    opacity: 0;
    transition: opacity 1.2s ease-out,transform 1.2s ease-out,filter .6s ease-out
}

.i-fade-up.in-view {
  filter: blur(0);
    opacity: 1;
    transform: translateY(0);
}

.i-fade-down.in-view {
  filter: blur(0);
    opacity: 1;
    transform: translateY(0);
}

.i-fade-left.in-view {
  filter: blur(0);
    opacity: 1;
    transform: translateX(0);
}

.i-fade-right.in-view {
    filter: blur(0);
    opacity: 1;
    transform: translateX(0);
}

/* Initial POS */
.i-fade-up {
  transform: translateY(20px);
}

.i-fade-down {
  transform: translateY(-20px);
}

.i-fade-left {
  transform: translateX(-20px);
}

.i-fade-right {
  transform: translateX(20px);
}

/* ========== Tutorial ========== */


/* <!-- Padrão: anima ao carregar -->
<div class="fade-up">Aparece subindo ao renderizar</div>

<!-- Com Observer: anima ao entrar na tela -->
<div class="i-fade-up">Aparece subindo ao entrar na viewport</div>


<div class="fade-up" style="animation-delay: 0.3s;">Com delay</div>


*/

/* ========== Classes com Intersection Observer script ========== */


/* <script>
  document.addEventListener("DOMContentLoaded", function () {
    const observer = new IntersectionObserver(
      (entries, observer) => {
        entries.forEach(entry => {
          if (entry.isIntersecting) {
            entry.target.classList.add('in-view');
            observer.unobserve(entry.target);
          }
        });
      },
      {
        threshold: 0.1
      }
    );

    const animatedElements = document.querySelectorAll(
      ".i-fade-up, .i-fade-down, .i-fade-left, .i-fade-right"
    );

    animatedElements.forEach(el => observer.observe(el));
  });
</script> */