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

  .sub .mv {
    animation: mv-anim linear;
    animation-duration: 1s;
    animation-timing-function: cubic-bezier(0.97, 0.01, 0.46, 1);
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-delay: 1s;
    z-index: 4;
    width: 100%;
    height: 100vh;
    background-color: transparent;
    display: flex;
    opacity: 1;
    justify-content: center;
  }

  @keyframes mv-anim {
    0% {
      height: 100vh;
    }

    100% {
      height: 50vh;
    }
  }

  .move-anim-mv {
    animation: move-anim-mv linear;
    animation-timeline: scroll();
    animation-range-start: cover 0%;
    animation-range-end: cover 50%;
    animation-fill-mode: forwards;
    z-index: 1;
    width: 100%;
    height: auto;
    background-color: transparent;
    display: flex;
    opacity: 1;
  }

  @keyframes move-anim-mv {
    0% {
      transform: translateY(0%);
    }

    100% {
      transform: translateY(100%);
    }
  }

  .rotate-anim {
    animation: rotate-anim linear;
    animation-timeline: view();
    animation-range-start: contain 0%;
    animation-range-end: contain 0%;
    animation-timing-function: cubic-bezier(0.4, 0, 1, 1);
    animation-fill-mode: forwards;
    height: auto;
    /* background-color: #ffffff87; */
    display: flex;
  }

  @keyframes rotate-anim {
    0% {
      transform: translateY(-20%);
    }

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

  .move-anim {
    animation: move-anim linear;
    animation-timeline: view();
    animation-range-start: cover 0%;
    animation-range-end: cover 50%;
    animation-fill-mode: forwards;
    z-index: 1;
    width: 100%;
    height: auto;
    background-color: transparent;
    display: flex;
    opacity: 1;
  }

  @keyframes move-anim {
    0% {
      transform: translateY(-50%);
    }

    50% {
      transform: translateY(-25%);
    }

    100% {
      transform: translateY(0);
      filter: brightness(0.5);
    }
  }

  .move-anim.alt {
    animation: move-anim-alt linear;
    animation-timeline: view();
    animation-range-start: cover 0%;
    animation-range-end: cover 50%;
    animation-fill-mode: forwards;
    z-index: 1;
    width: 100%;
    height: auto;
    background-color: transparent;
    display: flex;
    opacity: 1;
  }

  @keyframes move-anim-alt {
    0% {
      transform: translateY(-50%);
    }

    50% {
      transform: translateY(-25%);
    }

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

  .move-anim2 {
    animation: move-anim2 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;
    opacity: 1;
  }

  @keyframes move-anim2 {
    0% {
      transform: translateY(50%);
    }

    50% {
      transform: translateY(25%);
    }

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

  .view-tl {
    animation: scroll-anim linear;
    animation-timeline: view();
    animation-range-start: cover 0%;
    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; */
  }

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

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

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

}

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

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