@charset "utf-8";
/* CSS Document */
/* Öppna från vänster */
.modal.open-left .modal-dialog {
  animation: slideFromLeft 0.6s ease-out forwards;
}
@keyframes slideFromLeft {
  0% {
    opacity: 0;
    transform: scale(0.5) translateX(-200px);
  }
  60% {
    opacity: 1;
    transform: scale(1.05) translateX(0);
  }
  100% {
    transform: scale(1);
  }
}

/* Öppna från höger */
.modal.open-right .modal-dialog {
  animation: slideFromRight 0.6s ease-out forwards;
}
@keyframes slideFromRight {
  0% {
    opacity: 0;
    transform: scale(0.5) translateX(200px);
  }
  60% {
    opacity: 1;
    transform: scale(1.05) translateX(0);
  }
  100% {
    transform: scale(1);
  }
}

/* Stäng mot vänster */
.modal.close-left .modal-dialog {
  animation: slideToLeft 0.6s ease-in forwards;
}
@keyframes slideToLeft {
  0% {
    opacity: 1;
    transform: scale(1) translateX(0);
  }
  100% {
    opacity: 0;
    transform: scale(0.5) translateX(-200px);
  }
}

/* Stäng mot höger */
.modal.close-right .modal-dialog {
  animation: slideToRight 0.6s ease-in forwards;
}
@keyframes slideToRight {
  0% {
    opacity: 1;
    transform: scale(1) translateX(0);
  }
  100% {
    opacity: 0;
    transform: scale(0.5) translateX(200px);
  }
}
.modal.fold-in .modal-dialog {
  transform-origin: top center;
  animation: foldDown 0.6s ease-out forwards;
}

@keyframes foldDown {
  0% {
    opacity: 0;
    transform: rotateX(-90deg);
  }
  60% {
    opacity: 1;
    transform: rotateX(20deg);
  }
  100% {
    transform: rotateX(0deg);
  }
}
/* Vik in från toppen */
.modal.fold-in .modal-dialog {
  transform-origin: top center;
  animation: foldDown 0.6s ease-out forwards;
}

@keyframes foldDown {
  0% {
    opacity: 0;
    transform: rotateX(-90deg);
  }
  60% {
    opacity: 1;
    transform: rotateX(20deg);
  }
  100% {
    transform: rotateX(0deg);
  }
}

/* Slinka ner mot hörnet */
.modal.slide-out .modal-dialog {
  animation: slideToCorner 0.6s ease-in forwards;
}

@keyframes slideToCorner {
  0% {
    opacity: 1;
    transform: scale(1) translate(0, 0);
  }
  100% {
    opacity: 0;
    transform: scale(0.5) translate(150px, 150px);
  }
}