/* Base: hidden until in view */
.iv-anim {
  opacity: 0;
  transform: translate3d(0, 0, 0);
  transition: opacity 700ms ease, transform 700ms ease;
  will-change: opacity, transform;
}

.iv-anim.is-inview {
  opacity: 1;
}

/* Effects via extra class you add in editor */
.iv-anim.fade-up { transform: translate3d(0, 18px, 0); }
.iv-anim.fade-up.is-inview { transform: translate3d(0, 0, 0); }

.iv-anim.fade-down { transform: translate3d(0, -18px, 0); }
.iv-anim.fade-down.is-inview { transform: translate3d(0, 0, 0); }

.iv-anim.fade-left { transform: translate3d(18px, 0, 0); }
.iv-anim.fade-left.is-inview { transform: translate3d(0, 0, 0); }

.iv-anim.fade-right { transform: translate3d(-18px, 0, 0); }
.iv-anim.fade-right.is-inview { transform: translate3d(0, 0, 0); }

.iv-anim.zoom-in { opacity: 0.85; transform: scale(1.04); transition: opacity 900ms cubic-bezier(0.22,1,0.36,1), transform 1600ms cubic-bezier(0.22,1,0.36,1); }
.iv-anim.zoom-in.is-inview { opacity: 1; transform: scale(1); }


/* Cinematic reveal (mask wipe from left)
   Usage: add classes "iv-anim iv-reveal" (works great for titles/H1).
   Optional tuning:
     data-iv-reveal-duration="900"   (ms)
     data-iv-reveal-delay="0"        (ms)
*/
.iv-anim.iv-reveal {
  /* mask-based reveal: background-independent */
  -webkit-mask-image: linear-gradient(#000 0 0);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: 0 0;
  -webkit-mask-size: 0% 100%;
  mask-image: linear-gradient(#000 0 0);
  mask-repeat: no-repeat;
  mask-position: 0 0;
  mask-size: 0% 100%;
}

.iv-anim.iv-reveal.is-inview {
  /* run once; keeps normal opacity transition */
  animation: iv-reveal-mask var(--iv-reveal-duration, 1500ms) cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  animation-delay: var(--iv-reveal-delay, 300ms);
}

@keyframes iv-reveal-mask {
  to {
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
  }
}




/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  .iv-anim {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .iv-anim.iv-reveal {
    -webkit-mask: none !important;
    mask: none !important;
  }
}