:root {
  --sos-duration: 600ms;
  --sos-delay: 0s;
  --sos-easing: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  --sos-bounce-amount: 15px;
}

[data-sos] {
  opacity: 0;
  pointer-events: none;
}

[data-sos].sos-animate {
  opacity: 1;
  pointer-events: auto;
  animation-duration: var(--sos-duration);
  animation-delay: var(--sos-delay);
  animation-timing-function: var(--sos-easing);
  animation-fill-mode: both;
}

/* Fades */
[data-sos="fade"].sos-animate { animation-name: sos-fade; }
[data-sos="fade-up"].sos-animate { animation-name: sos-fade-up; }
[data-sos="fade-down"].sos-animate { animation-name: sos-fade-down; }
[data-sos="fade-left"].sos-animate { animation-name: sos-fade-left; }
[data-sos="fade-right"].sos-animate { animation-name: sos-fade-right; }

/* Zooms */
[data-sos="zoom-in"].sos-animate { animation-name: sos-zoom-in; }
[data-sos="zoom-in-up"].sos-animate { animation-name: sos-zoom-in-up; }
[data-sos="zoom-in-down"].sos-animate { animation-name: sos-zoom-in-down; }
[data-sos="zoom-in-left"].sos-animate { animation-name: sos-zoom-in-left; }
[data-sos="zoom-in-right"].sos-animate { animation-name: sos-zoom-in-right; }

[data-sos="zoom-out"].sos-animate { animation-name: sos-zoom-out; }
[data-sos="zoom-out-up"].sos-animate { animation-name: sos-zoom-out-up; }
[data-sos="zoom-out-down"].sos-animate { animation-name: sos-zoom-out-down; }
[data-sos="zoom-out-left"].sos-animate { animation-name: sos-zoom-out-left; }
[data-sos="zoom-out-right"].sos-animate { animation-name: sos-zoom-out-right; }

/* Slides */
[data-sos="slide-up"].sos-animate { animation-name: sos-slide-up; }
[data-sos="slide-down"].sos-animate { animation-name: sos-slide-down; }
[data-sos="slide-left"].sos-animate { animation-name: sos-slide-left; }
[data-sos="slide-right"].sos-animate { animation-name: sos-slide-right; }

/* Flips */
[data-sos="flip-up"].sos-animate { animation-name: sos-flip-up; }
[data-sos="flip-down"].sos-animate { animation-name: sos-flip-down; }
[data-sos="flip-left"].sos-animate { animation-name: sos-flip-left; }
[data-sos="flip-right"].sos-animate { animation-name: sos-flip-right; }

/* Bounce modifications for slides */
[data-sos="slide-up"].sos-animate.sos-bounce { animation-name: sos-slide-up-bounce; }
[data-sos="slide-down"].sos-animate.sos-bounce { animation-name: sos-slide-down-bounce; }
[data-sos="slide-left"].sos-animate.sos-bounce { animation-name: sos-slide-left-bounce; }
[data-sos="slide-right"].sos-animate.sos-bounce { animation-name: sos-slide-right-bounce; }

/* KEYFRAMES */

/* Fade */
@keyframes sos-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes sos-fade-up { from { opacity: 0; transform: translateY(50px); } to { opacity: 1; transform: translateY(0); } }
@keyframes sos-fade-down { from { opacity: 0; transform: translateY(-50px); } to { opacity: 1; transform: translateY(0); } }
@keyframes sos-fade-left { from { opacity: 0; transform: translateX(50px); } to { opacity: 1; transform: translateX(0); } }
@keyframes sos-fade-right { from { opacity: 0; transform: translateX(-50px); } to { opacity: 1; transform: translateX(0); } }

/* Zoom In */
@keyframes sos-zoom-in { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } }
@keyframes sos-zoom-in-up { from { opacity: 0; transform: scale(0.8) translateY(50px); } to { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes sos-zoom-in-down { from { opacity: 0; transform: scale(0.8) translateY(-50px); } to { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes sos-zoom-in-left { from { opacity: 0; transform: scale(0.8) translateX(50px); } to { opacity: 1; transform: scale(1) translateX(0); } }
@keyframes sos-zoom-in-right { from { opacity: 0; transform: scale(0.8) translateX(-50px); } to { opacity: 1; transform: scale(1) translateX(0); } }

/* Zoom Out */
@keyframes sos-zoom-out { from { opacity: 0; transform: scale(1.2); } to { opacity: 1; transform: scale(1); } }
@keyframes sos-zoom-out-up { from { opacity: 0; transform: scale(1.2) translateY(50px); } to { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes sos-zoom-out-down { from { opacity: 0; transform: scale(1.2) translateY(-50px); } to { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes sos-zoom-out-left { from { opacity: 0; transform: scale(1.2) translateX(50px); } to { opacity: 1; transform: scale(1) translateX(0); } }
@keyframes sos-zoom-out-right { from { opacity: 0; transform: scale(1.2) translateX(-50px); } to { opacity: 1; transform: scale(1) translateX(0); } }

/* Slide */
@keyframes sos-slide-up { from { opacity: 0; transform: translateY(100px); } to { opacity: 1; transform: translateY(0); } }
@keyframes sos-slide-down { from { opacity: 0; transform: translateY(-100px); } to { opacity: 1; transform: translateY(0); } }
@keyframes sos-slide-left { from { opacity: 0; transform: translateX(100px); } to { opacity: 1; transform: translateX(0); } }
@keyframes sos-slide-right { from { opacity: 0; transform: translateX(-100px); } to { opacity: 1; transform: translateX(0); } }

/* Flip */
@keyframes sos-flip-up { from { opacity: 0; transform: perspective(2000px) rotateX(-100deg); } to { opacity: 1; transform: perspective(2000px) rotateX(0); } }
@keyframes sos-flip-down { from { opacity: 0; transform: perspective(2000px) rotateX(100deg); } to { opacity: 1; transform: perspective(2000px) rotateX(0); } }
@keyframes sos-flip-left { from { opacity: 0; transform: perspective(2000px) rotateY(-100deg); } to { opacity: 1; transform: perspective(2000px) rotateY(0); } }
@keyframes sos-flip-right { from { opacity: 0; transform: perspective(2000px) rotateY(100deg); } to { opacity: 1; transform: perspective(2000px) rotateY(0); } }

/* Bounce Keyframes for Slides */
@keyframes sos-slide-up-bounce {
  0% { transform: translateY(100px); opacity: 0; }
  60% { transform: translateY(calc(var(--sos-bounce-amount-override, var(--sos-bounce-amount)) * -1)); opacity: 1; }
  80% { transform: translateY(calc(var(--sos-bounce-amount-override, var(--sos-bounce-amount)) * 0.5)); }
  100% { transform: translateY(0); }
}
@keyframes sos-slide-down-bounce {
  0% { transform: translateY(-100px); opacity: 0; }
  60% { transform: translateY(var(--sos-bounce-amount-override, var(--sos-bounce-amount))); opacity: 1; }
  80% { transform: translateY(calc(var(--sos-bounce-amount-override, var(--sos-bounce-amount)) * -0.5)); }
  100% { transform: translateY(0); }
}
@keyframes sos-slide-left-bounce {
  0% { transform: translateX(100px); opacity: 0; }
  60% { transform: translateX(calc(var(--sos-bounce-amount-override, var(--sos-bounce-amount)) * -1)); opacity: 1; }
  80% { transform: translateX(calc(var(--sos-bounce-amount-override, var(--sos-bounce-amount)) * 0.5)); }
  100% { transform: translateX(0); }
}
@keyframes sos-slide-right-bounce {
  0% { transform: translateX(-100px); opacity: 0; }
  60% { transform: translateX(var(--sos-bounce-amount-override, var(--sos-bounce-amount))); opacity: 1; }
  80% { transform: translateX(calc(var(--sos-bounce-amount-override, var(--sos-bounce-amount)) * -0.5)); }
  100% { transform: translateX(0); }
}