/* ===== smooth slow fade-in (all directions) ===== */
@media (prefers-reduced-motion: reduce) {
  .fade-slow { opacity: 1 !important; transform: none !important; animation: none !important; }
}

.fade-slow {
  opacity: 0;
  will-change: opacity, transform;
  --dur: 2600ms;   /* tweak: 2200ms / 2600ms / 3000ms */
  --dist: 60px;    /* travel distance */
  --easing: cubic-bezier(.12,.68,.25,1);
}

/* keyframes */
@keyframes sUp { from{opacity:0; transform:translate3d(0,var(--dist),0)} to{opacity:1; transform:translate3d(0,0,0)} }
@keyframes sDown { from{opacity:0; transform:translate3d(0,calc(var(--dist)*-1),0)} to{opacity:1; transform:translate3d(0,0,0)} }
@keyframes sLeft { from{opacity:0; transform:translate3d(calc(var(--dist)*-1),0,0)} to{opacity:1; transform:translate3d(0,0,0)} }
@keyframes sRight { from{opacity:0; transform:translate3d(var(--dist),0,0)} to{opacity:1; transform:translate3d(0,0,0)} }

/* play when .in-view is present */
.fade-slow.up.in-view    { animation: sUp var(--dur) var(--easing) both; }
.fade-slow.down.in-view  { animation: sDown var(--dur) var(--easing) both; }
.fade-slow.left.in-view  { animation: sLeft var(--dur) var(--easing) both; }
.fade-slow.right.in-view { animation: sRight var(--dur) var(--easing) both; }