@charset "utf-8";

/* fade in */
.fadein { opacity: 0; }
.fadein.on { animation: fadeInAnime ease-in-out 1.2s forwards; }

@keyframes fadeInAnime{
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* fade up */
.fadeup { opacity: 0; }
.fadeup.on { animation: fadeUpAnime ease-out 1.2s forwards; }
@keyframes fadeUpAnime{
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* drop up */
.dropup { opacity: 0; }
.dropup.on { animation: dropUp 1.2s ease-out forwards; }

@keyframes dropUp{
  from {
    opacity: 0;
    clip-path: inset(100% 0 0 0);
  }

  to {
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }
}

/* drop down */
.dropdown { opacity: 0; }
.dropdown.on { animation: dropDown 1.2s ease-out forwards; }

@keyframes dropDown{
  from {
    opacity: 0;
    clip-path: inset(0 0 100% 0);
  }

  to {
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }
}