/* =====================================================
   IndexSolar - Scroll Fade
   Clase a usar: .ix-scrollfade
   ===================================================== */

html.ix-scrollfade-ready .ix-scrollfade{
  --ix-scrollfade-distance: 28px;
  --ix-scrollfade-dur: 700ms;
  --ix-scrollfade-ease: cubic-bezier(.22,1,.36,1);
  --ix-scrollfade-delay: 0ms;

  opacity: 0;
  translate: 0 var(--ix-scrollfade-distance);
  will-change: opacity, translate;

  transition:
    opacity var(--ix-scrollfade-dur) var(--ix-scrollfade-ease),
    translate var(--ix-scrollfade-dur) var(--ix-scrollfade-ease);
  transition-delay: var(--ix-scrollfade-delay);
}

html.ix-scrollfade-ready .ix-scrollfade.ix-inview{
  opacity: 1;
  translate: 0 0;
}

@media (prefers-reduced-motion: reduce){
  html.ix-scrollfade-ready .ix-scrollfade{
    opacity: 1 !important;
    translate: 0 0 !important;
    transition: none !important;
  }
}