@keyframes top-card-appearance {
  from {
    opacity: 0;
    background-size: 140%;
    transform: scale(0.2);
  }

  to {
    opacity: 1;
    background-size: 106%;
    transform: scale(1);
  }
}

@keyframes events-appearance {
  from {
    opacity: 0;
    transform: scale(0.6);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes copy-appearance {
  from {
    opacity: 0;
    transform: scale(0.6);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

/*
@keyframes events-appearance {
  from {
    opacity: 0;
    transform: scale(1.1);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes copy-appearance {
  from {
    opacity: 0;
    transform: scale(1.1);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}
*/

@keyframes assets-appearance {
  from {
    opacity: 0;
    top: 2vw;
  }

  to {
    opacity: 1;
    top: 0;
  }
}

@keyframes image-box-appearance {
  from {
    opacity: 0;
    width: 80%;
    background-size: 120%;
  }

  to {
    opacity: 1;
    width: 100%;
    background-size: 100%;
  }
}

@media all and (max-width:540px) {
  @keyframes image-box-appearance {
    from {
      opacity: 0;
      width: 80%;
      background-size: 150%;
    }

    to {
      opacity: 1;
      width: 100%;
      background-size: 138%;
    }
  }
}

@keyframes assets-disappearance {
  from {
    opacity: 1;
    top: 0;
  }

  to {
    opacity: 0;
    top: -2vw;
  }
}

@keyframes focus-appearance {
  from {
    opacity: 0;
    top: 2vw;
  }

  to {
    opacity: 1;
    top: 0;
  }
}

@keyframes sustain-in {
  from {
    background-position-x: 0%;
    background-size: 100%;
  }

  to {
    background-position-x: 50%;
    background-size: 140%;
  }
}

@media all and (max-width:768px) {
  @keyframes sustain-in {
    from {
      background-position-x: 40%;
      background-size: 180%;
    }

    to {
      background-position-x: 30%;
      background-size: 190%;
    }
  }
}