:root {
  --animation-transition: 0.4s ease;
  --half-animation-transition: 0.2s ease;
  --trailer-animation-transition: 1.5s ease;
}

/* DOM ELEMENTS */

.fade-in {
  opacity: 0;
}

.dwindle-slideshow-banner {
  animation: dwindleSlideshowBanner 0.8s linear;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  /* animation-delay: 0.5s; */
}

@keyframes dwindleSlideshowBanner {
  0% {
    transform: scale(1.04);
  }

  100% {
    transform: scale(1);
  }
}

.enlarge-slideshow-banner {
  animation: enlargeSlideshowBanner 0.8s linear;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

@keyframes enlargeSlideshowBanner {
  0% {
    transform: scale(1);
  }

  100% {
    transform: scale(1.04);
  }
}

.show-slideshow-content {
  animation: showSlideshowContent 0.8s ease-out;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  /* animation-delay: 0.5s; */
}

@keyframes showSlideshowContent {
  0% {
    opacity: 0;
    transform: translateX(20px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.hide-slideshow-content {
  animation: hideSlideshowContent 0.1s ease-out;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

@keyframes hideSlideshowContent {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

.show-tab {
  animation: showTab 0.2s ease-out;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

@keyframes showTab {
  0% {
    opacity: 0;
    transform: scale(0.99);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.show-opacity {
  animation: showOpacity var(--animation-transition);
  /* animation: showOpacity var(--half-animation-transition); */
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

@keyframes showOpacity {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.hide-opacity {
  animation: hideOpacity var(--half-animation-transition);
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

@keyframes hideOpacity {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

.show-opacity-long {
  animation: showOpacityLong 1s ease;
  /* animation: showOpacity var(--half-animation-transition); */
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

@keyframes showOpacityLong {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.hide-opacity-long {
  animation: hideOpacityLong 1s ease;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

@keyframes hideOpacityLong {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

.show {
  animation: show var(--animation-transition);
  animation-iteration-count: 1;
}

@keyframes show {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }

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

.show-overlay-delay {
  animation: showOverlayDelay var(--half-animation-transition);
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  /* animation-delay: 0.5s; */
  will-change: transform;
}

@keyframes showOverlayDelay {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.show-page {
  animation: showPage var(--animation-transition);
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

@keyframes showPage {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }

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

.hide-page {
  animation: hidePage var(--animation-transition);
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

@keyframes hidePage {
  0% {
    opacity: 1;
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    transform: translateY(30px);
  }
}

.show-page-shadow-background {
  animation: showPageShadowBackground var(--animation-transition);
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

@keyframes showPageShadowBackground {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.hide-page-shadow-background {
  animation: hidePageShadowBackground var(--animation-transition);
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

@keyframes hidePageShadowBackground {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

.show-trailer {
  animation: showOpacity var(--trailer-animation-transition);
  /* animation: showOpacity var(--half-animation-transition); */
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

@keyframes showOpacity {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}