@supports not (-moz-appearance:none) {

  .fix-anim {
    animation-timeline: view();
    animation-name: fix-anim;
    animation-fill-mode: forwards;
    animation-range: entry 0% cover 100%;
  }

  @keyframes fix-anim {
    0% {
      opacity: 1;
    }

    25% {
      padding: 80px;
      opacity: 1;
    }

    45% {
      filter: blur(100px);
      opacity: 1;
    }

    75% {
      opacity: 1;
      filter: blur(0px);
    }

    100% {
      padding: 0px;
      opacity: 1;
    }
  }

  .move-anim {
    animation: move-anim linear;
    animation-timeline: view();
    animation-range-start: cover -19%;
    animation-range-end: cover 50%;
    animation-fill-mode: forwards;
  }

  @keyframes move-anim {
    0% {
      transform: translateY(-100%);
      /* filter: blur(30px); */
      /* clip-path: inset(0 100% 100% 0); */
    }

    50% {
      transform: translateY(-50%);
      /* filter: blur(0px); */
      /* clip-path: inset(0% 0% 0% 0%); */
    }

    100% {
      transform: translateY(0%);
      /* clip-path: inset(0% 0% 0% 0%); */
    }
  }

  .move-anim2 {
    animation: move-anim4 linear;
    animation-timeline: view();
    animation-range-start: cover -10%;
    animation-range-end: cover 50%;
    animation-fill-mode: forwards;
    z-index: 1;
    /* width: 100%; */
    height: auto;
    background-color: transparent;
    display: flex;
    transition: .3s;
  }

  @keyframes move-anim4 {
    0% {
      transform: translateY(-50%);
      filter: blur(30px);
    }

    50% {
      transform: translateY(-25%);
      filter: blur(0px);
    }

    100% {
      transform: translateY(0);
      /* filter: blur(0px); */
    }
  }

  .scale-anim {
    animation: scale-anim linear;
    animation-timeline: view();
    animation-range-start: cover -10%;
    animation-range-end: cover 50%;
    animation-fill-mode: forwards;
    transition: .3s;
  }

  @keyframes scale-anim {
    0% {
      /* transform: translateY(100%); */
      clip-path: inset(100% 100% 100% 100%);
    }

    100% {
      /* transform: translateY(0); */
      clip-path: inset(0 0 0 0);
    }
  }

  .view-tl {
    animation: scroll-anim linear;
    animation-timeline: view();
    animation-range-start: cover -10%;
    animation-range-end: cover 50%;
    z-index: 1;
    width: 100%;
    height: auto;
    background-color: transparent;
    display: flex;
    filter: blur(0px);
    opacity: 1;
    /* overflow-y: hidden; */
    /* clip-path: polygon(0 10%, 100% 0%, 100% 90%, 0% 100%); */
  }

  @keyframes scroll-anim {
    0% {
      transform: translateY(-30%);
      opacity: 1;
      filter: blur(0px);
    }

    50% {
      transform: translateY(-15%);
      opacity: 1;
      filter: blur(0px);
    }

    100% {
      transform: translateY(0);
      opacity: 1;
    }
  }

  .view-tl2 {
    animation: scroll-anim2 linear;
    animation-timeline: view();
    animation-range-start: cover -10%;
    animation-range-end: cover 50%;
    z-index: 1;
    width: 100%;
    background-color: transparent;
    display: flex;
    opacity: 1;
  }

  @keyframes scroll-anim2 {
    0% {
      transform: translateY(-60%);
      opacity: 1;
    }

    50% {
      transform: translateY(-30%);
      opacity: 1;
    }

    100% {
      transform: translateY(0);
      opacity: 1;
    }
  }

}

@media screen and (max-width:960px) {

  .view-tl,
  .move-anim,
  .move-anim2,
  .move-anim3,
  .move-anim4 {
    animation-timeline: unset;
  }
}