.anim-self.anim-scale, .anim-self.anim-fade, .anim-self.anim-fade-left, .anim-self.anim-fade-bottom, .anim-self.anim-fade-right, .anim-self.anim-fade-top,
.anim-scale .anim-child,
.anim-fade .anim-child,
.anim-fade-left .anim-child,
.anim-fade-bottom .anim-child,
.anim-fade-right .anim-child,
.anim-fade-top .anim-child {
  opacity: 0;
}
.anim-revealing.anim-self.anim-scale, .anim-revealing.anim-self.anim-fade, .anim-revealing.anim-self.anim-fade-left, .anim-revealing.anim-self.anim-fade-bottom, .anim-revealing.anim-self.anim-fade-right, .anim-revealing.anim-self.anim-fade-top,
.anim-revealing.anim-scale .anim-child,
.anim-revealing.anim-fade .anim-child,
.anim-revealing.anim-fade-left .anim-child,
.anim-revealing.anim-fade-bottom .anim-child,
.anim-revealing.anim-fade-right .anim-child,
.anim-revealing.anim-fade-top .anim-child {
  animation-name: reveal-fade;
  animation-fill-mode: var(--anim-fill, forwards);
  animation-duration: var(--anim-duration, 500ms);
  animation-delay: var(--anim-delay, 200ms);
  animation-timing-function: var(--anim-easing, ease-in);
}

.anim-self.anim-fade-left, .anim-self.anim-fade-bottom, .anim-self.anim-fade-right, .anim-self.anim-fade-top,
.anim-fade-left .anim-child,
.anim-fade-bottom .anim-child,
.anim-fade-right .anim-child,
.anim-fade-top .anim-child {
  position: relative;
}

@keyframes reveal-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes reveal-fade-left {
  from {
    opacity: 0;
    left: -20px;
  }
  to {
    opacity: 1;
    left: 0;
  }
}
@keyframes reveal-fade-top {
  from {
    opacity: 0;
    transform: translate3d(0, -100%, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes reveal-fade-right {
  from {
    opacity: 0;
    right: -20px;
  }
  to {
    opacity: 1;
    right: 0;
  }
}
@keyframes reveal-fade-bottom {
  from {
    opacity: 0;
    top: 20px;
  }
  to {
    opacity: 1;
    top: 0;
  }
}
@keyframes reveal-scale {
  from {
    opacity: 0;
    transform: scale(0.5);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.anim-scale.anim-revealing.anim-self,
.anim-scale.anim-revealing .anim-child {
  --anim-duration: 200ms;
  animation-name: reveal-scale;
}

.anim-fade-top.anim-revealing.anim-self,
.anim-fade-top.anim-revealing .anim-child {
  --anim-duration: 100ms;
}
@media (min-width: 1200px) {
  .anim-fade-top.anim-revealing.anim-self,
  .anim-fade-top.anim-revealing .anim-child {
    --anim-delay: 200ms;
    animation-name: reveal-fade-top;
  }
}

.anim-fade-right.anim-revealing.anim-self,
.anim-fade-right.anim-revealing .anim-child {
  --anim-duration: 100ms;
}
@media (min-width: 1200px) {
  .anim-fade-right.anim-revealing.anim-self,
  .anim-fade-right.anim-revealing .anim-child {
    --anim-delay: 200ms;
    animation-name: reveal-fade-right;
  }
}

.anim-fade-bottom.anim-revealing.anim-self,
.anim-fade-bottom.anim-revealing .anim-child {
  --anim-duration: 100ms;
}
@media (min-width: 1200px) {
  .anim-fade-bottom.anim-revealing.anim-self,
  .anim-fade-bottom.anim-revealing .anim-child {
    --anim-delay: 200ms;
    animation-name: reveal-fade-bottom;
  }
}

.anim-fade-left.anim-revealing.anim-self,
.anim-fade-left.anim-revealing .anim-child {
  --anim-duration: 100ms;
}
@media (min-width: 1200px) {
  .anim-fade-left.anim-revealing.anim-self,
  .anim-fade-left.anim-revealing .anim-child {
    --anim-delay: 200ms;
    animation-name: reveal-fade-left;
  }
}

@keyframes ripple {
  0% {
    transform: scale(0, 0);
    opacity: 0;
  }
  25% {
    transform: scale(0.4, 0.8);
    opacity: 1;
    border-radius: 50%;
  }
  50% {
    transform: scale(0.8, 1.1);
    opacity: 0.5;
    border-radius: 30%;
  }
  75% {
    transform: scale(1.2, 1.2);
    opacity: 0.25;
    border-radius: 20%;
  }
  100% {
    opacity: 0;
  }
}