.over-anim{z-index:2}
@keyframes animate-blur{
  0% {
    opacity:0;
    scale:.8;
    filter:blur(15px);
  }
  to{filter:blur(0px);scale:1;opacity:1}
}
@keyframes slide-l{
  0% {opacity:0;clip-path:inset(0% 100% 0% 0%)}
  to {opacity:1;clip-path:inset(0%)}
}
@keyframes slide-r{
  0% {opacity:0;clip-path:inset(0% 0% 0% 100%)}
  to {opacity:1;clip-path:inset(0%)}
}
@keyframes slide-d{
  0% {opacity:0;clip-path:inset(0% 0% 100% 0%)}
  to {opacity:1;clip-path:inset(0%)}
}
@keyframes sword-anim{
  0% {opacity:.25;translate:0 -1.245em}
  to {opacity:1;translate:0}
}
@keyframes glow{
  95% {filter:brightness(1.2)}
  0%,90%,to {filter:brightness(1)}
}
@supports (animation-timeline: view()) and (animation-range: entry 0% entry 100%){
  .slideDT{animation:sword-anim cubic-bezier(0.260, -0.005, 0.935, 0.020) both, glow linear both}
  .animate {
    animation-timeline: view();
    animation-timing-function:linear;
    animation-fill-mode:both;
    animation-range:entry 0% entry 50%;
  }
  .animate.fullEntry{animation-range-end:entry 100%}
  .blur{animation-name:animate-blur}
  .slideL{animation-name:slide-l}
  .slideR{animation-name:slide-r}
  .slideD{animation-name:slide-d}
}
/*Respect reduced motion preference*/
@media screen and (prefers-reduced-motion: reduce) {
  .animate {
    animation:none !important;
  }
}