/* =========================================================
   SH MOTION — Global reveal system
   (Use: .sh-reveal + optional data-anim + optional --d delay)
========================================================= */

:root{
  --m-dur: 780ms;
  --m-ease: var(--ease);
  --m-distance: 18px;
}

/* Default reveal */
.sh-reveal{
  opacity: 0;
  transform: translate3d(0, var(--m-distance), 0);
  transition:
    opacity var(--m-dur) var(--m-ease),
    transform var(--m-dur) var(--m-ease);
  transition-delay: var(--d, 0s);
 /*will-change: opacity, transform;*/
}

/* Variants */
.sh-reveal[data-anim="fade-in"]{ transform: none; }
.sh-reveal[data-anim="fade-down"]{ transform: translate3d(0, calc(var(--m-distance) * -1), 0); }
.sh-reveal[data-anim="left"]{ transform: translate3d(calc(var(--m-distance) * -1), 0, 0); }
.sh-reveal[data-anim="right"]{ transform: translate3d(var(--m-distance), 0, 0); }
.sh-reveal[data-anim="zoom-in"]{ transform: scale(.985); }

/* Enter */
.sh-reveal.is-in{
  opacity: 1;
  transform: none;
}

/* Reduced motion = always visible */
@media (prefers-reduced-motion: reduce){
  .sh-reveal{
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}