/*
  ფროდაქშენზე ანიმაციის დამთავრებისას კომპონენტებს საწყისი სტილები ენიჭებათ და კომპონენტები წამიერად დახტიან
  მაგის მოსაგვარებლად საბოლოო სტილები უნდა მიეწეროს კლასებს და delay თვითონ keyframesში გაეწეროს
*/

/* Onboarding Page Transition */
.onboarding-enter-active,
.onboarding-leave-active {
  --transition-time: 0.8s;
  --transition-easing: cubic-bezier(0.86, 0, 0.07, 1);
  --card-easing: cubic-bezier(0.79, 0.14, 0.15, 0.86);

  animation: var(--transition-time) empty;
  &.onboarding-layout {
    z-index: -1;
  }
}

:root {
  --transition-position: calc(var(--sidebar-size) - 100%);
}

.onboarding-enter-active {
  &.onboarding-layout {
    .onboarding-gradient {
      transform: translateX(0%);
      animation: var(--transition-time) onboardingSlideEnter var(--transition-easing);

      .gradient {
        opacity: 1;
        animation: var(--transition-time) onboardingGradientEnter ease;
      }
    }

    .main-card {
      opacity: 1;
      animation: var(--transition-time) onboardingFadeSlideEnter var(--card-easing);
    }

    .header-progress,
    .header-close {
      animation: var(--transition-time) onboardingFadeIn var(--transition-easing);
    }
  }

  &#main-layout {
    animation: var(--transition-time) fadeIn;

    .space-menu {
      &:after {
        width: 100%;
        animation: var(--transition-time) menuShrink var(--transition-easing);
      }
    }
  }
}
.onboarding-leave-active {
  &.onboarding-layout {
    .onboarding-gradient {
      transform: translateX(-100%);
      animation: var(--transition-time) onboardingSlideLeave var(--transition-easing);

      .gradient {
        opacity: 0;
        animation: var(--transition-time) onboardingGradientLeave ease;
      }
    }

    .main-card {
      opacity: 0;
      //animation: calc(var(--transition-time) / 2) onboardinFadeSlideLeave var(--card-easing);
      transform: translateY(10%);
      transition: all calc(var(--transition-time) / 2) var(--card-easing);
    }

    .header-progress,
    .header-close {
      opacity: 0;
      animation: calc(var(--transition-time) / 2) fadeOut var(--transition-easing);
    }
  }

  &#main-layout {
    animation: var(--transition-time) fadeOut;

    .space-menu {
      &:after {
        width: 100vw;
        animation: var(--transition-time) menuGrow var(--transition-easing);
      }
    }
  }
}

@keyframes onboardingSlideEnter {
  0% {
    transform: translateX(var(--transition-position));
  }

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

@keyframes onboardingSlideLeave {
  0% {
    transform: translateX(0%);
  }

  100% {
    transform: translateX(var(--transition-position));
  }
}

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

  35% {
    opacity: 0;
    transform: translateY(10%);
  }

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

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

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

@keyframes onboardingGradientEnter {
  0% {
    opacity: 0;
  }
  40% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes onboardingGradientLeave {
  0% {
    opacity: 1;
  }
  40% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes onboardingFadeIn {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes menuGrow {
  from {
    width: 100%;
  }
  to {
    width: 100vw;
  }
}

@keyframes menuShrink {
  from {
    width: 100vw;
  }
  to {
    width: 100%;
  }
}

@include desktop-1600max() {

}

@include desktop-1280max() {
  .onboarding-enter-active,
  .onboarding-leave-active {
    &.onboarding-layout {
      z-index: 5;
    }
  }
}
