:root {
  --delay: .5s;
}

.watch {
  position: relative;
  opacity: 0;
}

.watch.animate {
  animation-duration: 1.5s;
  animation-fill-mode: forwards;
  animation-delay: var(--delay, 0s);
}

/* General animation rules */
.animate {
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  animation-delay: var(--delay, 0s);
}

.animate.appear,
.animate.appear-up,
.animate.appear-down,
.animate.disappear {
  animation-delay: var(--delay);
}

/* Fade-out */
@keyframes fade-out {
  0% {
    opacity: 1;
  }
  95% {
    height: 0;
  }
  100% {
    display: none;
  }
}
.animate.disappear {
  animation-name: fade-out;
}

/* Fade-in */
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.animate.appear {
  animation-name: fade-in;
}

/* Fade-in-up */
@keyframes fade-in-up {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.animate.appear-up {
  animation-name: fade-in-up;
}

/* Fade-in-down */
@keyframes fade-in-down {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.animate.appear-down {
  animation-name: fade-in-down;
}

/* Custom delays */
.animate.slow {
  --delay: .75s;
}

.animate.fast {
  --delay: 0s;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.spin {
  animation-name: spin;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}

/* Slide-up */
@keyframes slide-up {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.animate.slide-up {
  animation-name: slide-up;
}