@import url("s2r://panorama/styles/dashboard_page_shared.css");
@import url("file://{resources}/styles/shared/variables.css");

.Root {
  width: 100%;
  height: 100%;
  background-color: #14181d;
}

.Root.Initialize {
  background-color: gradient(
    linear,
    0% 0%,
    100% 100%,
    from(#0b0c0e),
    color-stop(0.3, #14181d),
    color-stop(0.303, #6c829c),
    color-stop(0.31, #99b8dd),
    color-stop(0.55, #99b8dd),
    color-stop(0.56, #6c829c),
    color-stop(0.563, #14181d),
    to(#0b0c0e)
  );
}

#TitleFX {
  width: 100%;
  height: 100%;
  opacity: 0;
  transition-timing-function: ease-in-out;
  transition-duration: 0.4s;
  transition-property: opacity;
  transform: translateX(64px) translateY(64px) translateZ(-40px);
}

#TitleFX.SceneLoaded {
  opacity: 1;
}

.TitlePanel {
  width: 300px;
  height: 300px;
  margin-top: 64px;
  margin-left: 64px;
  background-color: invokationSunGradient;
  animation-name: SunstrikeGlow;
  animation-duration: 4s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.Title {
  align: center center;
  width: 100%;
  font-family: titleFont;
  font-size: 80px;
  font-weight: semi-bold;
  color: #bbb6ae;
  text-align: center;
  text-overflow: shrink;
  text-shadow: 2px 4px 4px #000;
  text-transform: uppercase;
  letter-spacing: -2px;
}

#Scene {
  width: 100%;
  height: 100%;
  margin-left: -200px;
  opacity: 0;
  transform: translateZ(-30px);
}

#Scene.SceneLoaded {
  opacity: 1;
}

@keyframes 'SunstrikeGlow' {
  0% {
    background-color: invokationSunGradient;
  }

  50% {
    background-color: invokationSunFadingGradient;
  }

  100% {
    background-color: invokationSunGradient;
  }
}
