@supports (animation-timeline: view()) {
  .valet-fade-up {
    animation: valet-fade-up both linear;
    animation-timeline: view();
    animation-range: entry 50% cover 50%;
  }
  .valet-fade-up-smaller {
    animation: valet-fade-up-smaller both linear;
    animation-timeline: view();
    animation-range: entry 50% cover 50%;
  }
  .valet-fade-left {
    animation: valet-fade-left both linear;
    animation-timeline: view();
    animation-range: entry 50% cover 50%;
  }
  .valet-fade-right {
    animation: valet-fade-right both linear;
    animation-timeline: view();
    animation-range: entry 50% cover 50%;
  }
  .valet-fade-right-before:before {
    animation: valet-fade-right both linear;
    animation-timeline: view();
    animation-range: entry 50% cover 50%;
  }
  .valet-fade-left-after:after {
    animation: valet-fade-left both linear;
    animation-timeline: view();
    animation-range: entry 50% cover 50%;
  }
  .valet-fade-in {
    animation: valet-fade-in both linear;
    animation-timeline: view();
    animation-range: entry 50% cover 50%;
  }
  @media (max-width: 768px) {
    .valet-fade-up, .valet-fade-up-smaller, .valet-fade-left, .valet-fade-right, .valet-fade-right-before, .valet-fade-left-after, .valet-fade-in {
      animation-range: entry 10% cover 30%;
    }
  }
}
@keyframes valet-fade-up {
  from {
    opacity: 0;
    transform: translateY(200px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes valet-fade-up-smaller {
  from {
    opacity: 0;
    transform: translateY(100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes valet-fade-left {
  from {
    opacity: 0;
    transform: translateX(200px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes valet-fade-right {
  from {
    opacity: 0;
    transform: translateX(-200px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes valet-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}