.over-anim{z-index:2}
.blur{animation:animate-blur linear both}
@keyframes animate-blur {
  0% {
    opacity:0;
    scale:.8;
    filter:blur(15px);
  }
  to{filter:blur(0px);scale:1;opacity:1;}
}
.slideL{animation:animate-slide-l linear both}
.slideR{animation:animate-slide-r linear both}
@keyframes animate-slide-l {
  0% {opacity:0;clip-path:inset(0% 100% 0% 0%)}
  to {opacity:1;clip-path:inset(0% 0% 0% 0%)}
}
@keyframes animate-slide-r {
  0% {opacity:0;clip-path:inset(0% 0% 0% 100%)}
  to {opacity:1;clip-path:inset(0% 0% 0% 0%)}
}
@supports (animation-timeline: view()) and (animation-range: entry 0% entry 100%){
  .animate {
    animation-timeline: view();
    animation-range: entry 0% entry 50%;
  }
  .animate.fullEntry{animation-range-end:entry 100%}
}
/*Respect reduced motion preference*/
@media screen and (prefers-reduced-motion: reduce) {
  .animate {
    animation:none !important;
  }
}