/* =========================================================
   Viewport Animations – Dramatic but Safe
   ========================================================= */

.anim-box {
  opacity: 0;
  transition:
    transform 1.1s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.9s ease-out;
  will-change: transform, opacity;
}

/* Dramatic start positions (observer-safe) */
.anim-from-left {
  transform: translateX(-120px);
}

.anim-from-right {
  transform: translateX(120px);
}

.anim-from-bottom {
  transform: translateY(120px);
}

/* Final visible state */
.anim-box.is-visible {
  opacity: 1;
  transform: translateX(0) translateY(0);
}