@charset "UTF-8";
/* CSS Document */

/* Base states */
.fadein, .fadeup, .fadein-onload {
  opacity: 0;
  transition: opacity 2s ease-out var(--delay, 0s),
              transform 2s ease-out var(--delay, 0s);
}

/* Fadeup starts shifted */
.fadeup { 
    transform: translateY(var(--start-y, 50px)); 
}

/* Animated states */
.animate-fadein { opacity: 1; }
.animate-fadeup { opacity: 1; transform: translateY(0); }

/* Accessibility: Respect users with reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .fadein,
  .fadeup,
  .fadein-onload {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}


/*

Example Usage

<div class="fadeup" data-delay="300">I fade up with delay</div>
<div class="fadein">I fade in immediately on scroll</div>
<div class="fadein-onload" data-delay="1000">I fade in after 1s on page load</div>

*/