/**
 * Helpers: Scroll animation
 * ------------------------------------------------------------------------------
 * Animation helpers to apply basic fade-ins.
 *
 * - Available animations:
 * -- fadeIn
 * -- fadeDirectionUp
 * -- fadeDirectionDown
 * -- fadeDirectionLeft
 * -- fadeDirectionRight
 *
 */
[js-sssa*=fade],
[data-sssa*=fade] {
  .sssa-enabled & {
    opacity: 0;
    transition: opacity 0.6s cubic-bezier(0.42, 0, 0.58, 1);
  }
}

[js-sssa*=fade].is-visible,
.is-visible [data-sssa*=fade] {
  opacity: 1;
}

[js-sssa*=fadeDirection],
[data-sssa*=fadeDirection] {
  .sssa-enabled & {
    transition: opacity 0.6s cubic-bezier(0.42, 0, 0.58, 1), transform 0.6s cubic-bezier(0.42, 0, 0.58, 1);
  }
}

[js-sssa*=fadeDirection].is-visible,
.is-visible [data-sssa*=fadeDirection] {
  opacity: 1;
  transform: translate(0, 0);
}

[js-sssa=fadeDirectionUp],
[data-sssa=fadeDirectionUp] {
  .sssa-enabled & {
    transform: translateY(1rem);
  }
}

[js-sssa=fadeDirectionDown],
[data-sssa=fadeDirectionDown] {
  .sssa-enabled & {
    transform: translateY(-1rem);
  }
}

[js-sssa=fadeDirectionLeft],
[data-sssa=fadeDirectionLeft] {
  .sssa-enabled & {
    transform: translateX(1rem);
  }
}

[js-sssa=fadeDirectionRight],
[data-sssa=fadeDirectionRight] {
  .sssa-enabled & {
    transform: translateY(-1rem);
  }
}