/**
 * SAL (Scroll Animation Library) - CSS version
 */

[data-sal] {
  transition-duration: 0.2s;
  transition-delay: 0s;
  transition-timing-function: ease;
}

/* Duration classes */
[data-sal][data-sal-duration='200'] { transition-duration: 0.2s; }
[data-sal][data-sal-duration='250'] { transition-duration: 0.25s; }
[data-sal][data-sal-duration='300'] { transition-duration: 0.3s; }
[data-sal][data-sal-duration='350'] { transition-duration: 0.35s; }
[data-sal][data-sal-duration='400'] { transition-duration: 0.4s; }
[data-sal][data-sal-duration='450'] { transition-duration: 0.45s; }
[data-sal][data-sal-duration='500'] { transition-duration: 0.5s; }
[data-sal][data-sal-duration='600'] { transition-duration: 0.6s; }
[data-sal][data-sal-duration='700'] { transition-duration: 0.7s; }
[data-sal][data-sal-duration='800'] { transition-duration: 0.8s; }
[data-sal][data-sal-duration='900'] { transition-duration: 0.9s; }
[data-sal][data-sal-duration='1000'] { transition-duration: 1s; }

/* Delay classes */
[data-sal][data-sal-delay='50'] { transition-delay: 0.05s; }
[data-sal][data-sal-delay='100'] { transition-delay: 0.1s; }
[data-sal][data-sal-delay='150'] { transition-delay: 0.15s; }
[data-sal][data-sal-delay='200'] { transition-delay: 0.2s; }
[data-sal][data-sal-delay='250'] { transition-delay: 0.25s; }
[data-sal][data-sal-delay='300'] { transition-delay: 0.3s; }
[data-sal][data-sal-delay='400'] { transition-delay: 0.4s; }
[data-sal][data-sal-delay='500'] { transition-delay: 0.5s; }

/* Easing classes */
[data-sal][data-sal-easing='linear'] { transition-timing-function: linear; }
[data-sal][data-sal-easing='ease'] { transition-timing-function: ease; }
[data-sal][data-sal-easing='ease-in'] { transition-timing-function: ease-in; }
[data-sal][data-sal-easing='ease-out'] { transition-timing-function: ease-out; }
[data-sal][data-sal-easing='ease-in-out'] { transition-timing-function: ease-in-out; }

/**
 * Animations
 */

/* Fade */
[data-sal|='fade'] {
  opacity: 0;
  transition-property: opacity;
}

[data-sal|='fade'].sal-animate,
body.sal-disabled [data-sal|='fade'] {
  opacity: 1;
}

/* Slide */
[data-sal|='slide'] {
  opacity: 0;
  transition-property: opacity, transform;
}

[data-sal='slide-up'] {
  transform: translateY(20%);
}

[data-sal='slide-down'] {
  transform: translateY(-20%);
}

[data-sal='slide-left'] {
  transform: translateX(20%);
}

[data-sal='slide-right'] {
  transform: translateX(-20%);
}

[data-sal|='slide'].sal-animate,
body.sal-disabled [data-sal|='slide'] {
  opacity: 1;
  transform: none;
}

/* Zoom */
[data-sal|='zoom'] {
  opacity: 0;
  transition-property: opacity, transform;
}

[data-sal='zoom-in'] {
  transform: scale(0.5);
}

[data-sal='zoom-out'] {
  transform: scale(1.1);
}

[data-sal|='zoom'].sal-animate,
body.sal-disabled [data-sal|='zoom'] {
  opacity: 1;
  transform: none;
}

/* Flip */
[data-sal|='flip'] {
  backface-visibility: hidden;
  transition-property: transform;
}

[data-sal='flip-left'] {
  transform: perspective(2000px) rotateY(-91deg);
}

[data-sal='flip-right'] {
  transform: perspective(2000px) rotateY(91deg);
}

[data-sal='flip-up'] {
  transform: perspective(2000px) rotateX(-91deg);
}

[data-sal='flip-down'] {
  transform: perspective(2000px) rotateX(91deg);
}

[data-sal|='flip'].sal-animate,
body.sal-disabled [data-sal|='flip'] {
  transform: none;
}