  .oho-animate {
  transition:
    opacity var(--primary-animation),
    transform var(--primary-animation);
  transform: none;
  opacity: 1;
}

/* The transition when adding .oho-animate--ready is none, so that there is
   no visible reversed transition when loading the page with an element
   already in view. */
.oho-animate--ready {
  transition: none;
}

/* Animation states: .oho-animate--ready or .oho-animate--out */
.oho-animate--ready.fade-in,
.oho-animate--out.fade-in {
  opacity: 0;
}

.oho-animate--ready.fade-in-big,
.oho-animate--out.fade-in-big {
  transform: scale(0.5);
  transform-origin: center;
  opacity: 0;
}

.oho-animate--ready.fade-in-up,
.oho-animate--out.fade-in-up {
  transform: translateY(5rem);
  opacity: 0;
}

.oho-animate--ready.fade-in-right,
.oho-animate--out.fade-in-right {
  transform: translateX(5rem);
  opacity: 0;
}

.oho-animate--ready.fade-in-down,
.oho-animate--out.fade-in-down {
  transform: translateY(-5rem);
  opacity: 0;
}

.oho-animate--ready.fade-in-left,
.oho-animate--out.fade-in-left {
  transform: translateX(-5rem);
  opacity: 0;
}
/*
  Usage:
  Add the .animation-bgcolor-swipe class to any element.
  Optionally override --start-color and --end-color on the element or a parent.
*/

.animation-bgcolor-swipe {
  --start-color: var(--accent-orange);
  --end-color: var(--accent-red);
  background-image: linear-gradient(
    to left,
    var(--start-color) 50%,
    var(--end-color) 50%
  );
  background-position: right bottom;
  background-size: 200% 100%;
  transition: background-position 0.4s var(--bezier-ease);
}

.animation-bgcolor-swipe:hover,
.animation-bgcolor-swipe:focus {
  background-position: left bottom;
}
