/* ==========================================
   Animations
   ========================================== */

/* Reveal on Scroll */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}

.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

/* Fade In */
.fade-in {
  opacity: 0;
  transform: translateY(12px);
  animation: intro 1s var(--ease) .2s forwards;
}

@keyframes intro {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Toast Slide Up */
@keyframes slideUp {
  from {
    transform: translateX(-50%) translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
  }
}