/*
* SWUP-Styles
* ab hier höchst experimentell
 */
.swupper-overlay-1 {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;

  background: $brand-secondary;

  transform: translateX(-100%);
  transition: all 0.5s ease-in-out;
  //transition: all 0.85s cubic-bezier(0,.67,1,.33);
}

.swupper-overlay-2 {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;

  background: $brand-primary;

  transform: translateX(100%);
  transition: all 0.5s ease-in-out;
}

.swupper-overlay-3 {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 20;

  background: $brand-primary;

  transform: translateY(100%);
  transition: all 0.5s ease-in-out, background-color 0.5s 600ms;
  //transition: all 0.85s cubic-bezier(0,.67,1,.33);
}

// Animation
html.is-animating .swupper-overlay-1 {
  // keine Ahnung, wieso - muss aber
  transform: translateX(-99.9%);
}

html.to-homepage.is-animating .swupper-overlay-1 {
  transform: translateX(-50%);
}

html.to-homepage.is-animating .swupper-overlay-2 {
  transform: translateX(50%);
}

html.to-bottom-link.is-animating .swupper-overlay-3 {
  transform: translateY(0%);
}

html.to-left-content-link.is-animating .swupper-overlay-1,
html.to-batterieladetechnik-leistungselektronik.is-animating .swupper-overlay-1 {
  transform: translateX(0%);
}

html.to-menu-link.is-animating .swupper-overlay-1 {
  background-color: $brand-white;
  transform: translateX(0%);
  transition: all 0.5s, background-color 0.01s;
}
// right-content-link untested
html.to-right-content-link.is-animating .swupper-overlay-2,
html.to-metallbearbeitung-schweissbaugruppen.is-animating .swupper-overlay-2 {
  transform: translateX(0%);
}

// Animation-Outro
html.is-rendering .swupper-overlay-1 {
  // fallback transition
  background-color: transparent;
  transition: all 0.5s, background-color 0.2s;
  transform: translateX(-100%);
}

html.is-rendering .swupper-overlay-2 {
  // fallback transition
  background-color: transparent;
  transition: all 0.5s, background-color 0.2s;
  transform: translateX(100%);
}

html.to-bottom-link.is-rendering .swupper-overlay-3 {
  height: 100px;
  background-color: transparent;
  transform: translateY(-100%);
  transition: all 0.5s, height 0.38s ease-in-out, background-color 0.22s;
}

html.to-left-content-link.is-rendering .swupper-overlay-1 {
  background: $brand-secondary;
  transition: all 0.5s;
}
// untested
html.to-right-content-link.is-rendering .swupper-overlay-2 {
  background: $brand-primary;
  transition: all 0.5s;
}