@-webkit-keyframes zoom {
    0% {
      opacity: 0;
      transform: scale(0)
    }
    100% {
      opacity: 1;
      transform: scale(1)
    }
  }

@keyframes zoom {
    0% {
        opacity: var(--opacity);
        transform: scale(0);
        filter: blur(2px);
      }
      100% {
        opacity: 1;
        transform: scale(1);
        filter: blur(0px);
      }
}

@-webkit-keyframes zoomspin {
    0% {
      opacity: 0;
      transform: scale(0) rotate(-4turn);
      filter: blur(2px)
    }
    100% {
      opacity: 1;
      transform: scale(1) rotate(0);
      filter: blur(0px)
    }
  }

@keyframes zoomspin {
    0% {

        opacity: var(--opacity);
        transform: scale(0) rotate(-4turn);
      filter: blur(2px);
      }
      100% {
        opacity: 1;
        transform: scale(1) rotate(0);
        filter: blur(0px);
      }
}


@keyframes fade {
  0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
}

@-webkit-keyframes fade {
  0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
}

@keyframes overlay {
  0% {
    background-color: transparent;
  }
    50% {
      background-color: var(--color);
    }
    100% {
      background-color: transparent;

    }
}

@-webkit-keyframes overlay {
  0% {
    background-color: transparent;
  }
    50% {
      background-color: var(--color);
    }
    100% {
      background-color: transparent;

    }
}