﻿/* ==========================================
   Fade Up
========================================== */

.reveal {
  opacity: 0;
  transform: translateY(45px);
  transition: opacity .8s ease, transform .8s ease;
}

  .reveal.show {
    opacity: 1;
    transform: translateY(0);
  }

/* ==========================================
   Fade Left
========================================== */

.reveal-left {
  opacity: 0;
  transform: translateX(-50px);
  transition: opacity .8s ease, transform .8s ease;
}

  .reveal-left.show {
    opacity: 1;
    transform: translateX(0);
  }

/* ==========================================
   Fade Right
========================================== */

.reveal-right {
  opacity: 0;
  transform: translateX(50px);
  transition: opacity .8s ease, transform .8s ease;
}

  .reveal-right.show {
    opacity: 1;
    transform: translateX(0);
  }

/* ==========================================
   Zoom
========================================== */

.reveal-scale {
  opacity: 0;
  transform: scale(.92);
  transition: opacity .8s ease, transform .8s ease;
}

  .reveal-scale.show {
    opacity: 1;
    transform: scale(1);
  }

/* ==========================================
   Stagger Delay
========================================== */

.delay-1 {
  transition-delay: .10s;
}

.delay-2 {
  transition-delay: .20s;
}

.delay-3 {
  transition-delay: .30s;
}

.delay-4 {
  transition-delay: .40s;
}

.delay-5 {
  transition-delay: .50s;
}

.delay-6 {
  transition-delay: .60s;
}

/* ==========================================
   Floating
========================================== */

.float-animation {
  animation: floating 6s ease-in-out infinite;
}

@keyframes floating {

  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-12px);
  }

  100% {
    transform: translateY(0);
  }
}

/* ==========================================
   Pulse
========================================== */

.pulse {
  animation: pulse 2.5s infinite;
}

@keyframes pulse {

  0% {
    box-shadow: 0 0 0 0 rgba(37,99,235,.35);
  }

  70% {
    box-shadow: 0 0 0 14px rgba(37,99,235,0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(37,99,235,0);
  }
}