:root {
  --splash-logo-app-transition: 300ms;
  --splash-start-delay: 600ms;
  --splash-top-area-delay: 250ms;
  --splash-areas-transition: 500ms;
  --splash-screen-transition: 500ms;
  --splash-top-last-height: 72px;
}

#splash-animation.wrapper {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2000;
  background: var(--color-elevation-0, #fff);
}

#splash-animation .top-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: calc((100vh / 3) * 2);
  background: var(--color-background-primary, #00a97a);
}

#splash-animation .down-area {
  height: calc(100vh / 3);
  background-image: url('../imgs/bbraun-logo.svg');
  background-size: auto auto;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--color-elevation-0, #fff);
}

#splash-animation .app-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: var(--spacing-16, 1rem);
  row-gap: var(--spacing-16, 1rem);
}
#splash-animation .app-logo {
  background-image: url('../imgs/app-logo.png');
  background-size: 96px auto;
  background-position: center;
  background-repeat: no-repeat;
  width: 96px;
  height: 96px;
  margin: 0 auto;
}

#splash-animation h1 {
  color: var(--color-text-onprimary, #fff);
  text-align: center;
  font-size: var(--font-size-36, 36px);
  font-weight: 700;
  line-height: var(--font-line-height-56, 56px);
}

#splash-animation .loading {
  height: 12px;
  width: 33.33%;
  position: relative;
  left: 0;
  background: var(--color-background-accent, #9e2ab5);
  animation: translate 2s ease-in-out infinite;
}

@keyframes translate {
  0% {
    left: 0;
    transform: scaleX(2) translate(-100%, 0);
  }

  95% {
    left: 87%;
    transform: scaleX(0) translate(-100%, 0);
  }

  100% {
    left: 100%;
    transform: scaleX(0) translate(-50%, 0);
  }
}

#splash-animation.fadeout .app-brand {
  opacity: 0;
  transition: opacity var(--splash-logo-app-transition) linear var(--splash-start-delay);
}

#splash-animation.fadeout .top-area {
  height: var(--splash-top-last-height);
  transition: height var(--splash-areas-transition) cubic-bezier(0.32, 0.74, 0.56, 0.99)
    calc(var(--splash-start-delay) + var(--splash-logo-app-transition));
}

#splash-animation.fadeout .down-area {
  height: calc(100vh - var(--splash-top-last-height));
  opacity: 0;
  transition: all var(--splash-areas-transition) cubic-bezier(0.32, 0.74, 0.56, 0.99)
    calc(var(--splash-start-delay) + var(--splash-logo-app-transition));
}

#splash-animation.fadeout {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: -100;
  transition: all var(--splash-screen-transition) linear
    calc(var(--splash-start-delay) + var(--splash-logo-app-transition) + var(--splash-areas-transition));
}