:root {
  --kanal10-blue: #019ee3;
  --kanal10-bg: #0b0f17;
}

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--kanal10-bg);
  font-family: "Roboto", "Helvetica Neue", Arial, sans-serif;
}

/* Styling hooks provided by the Cast Application Framework player. */
cast-media-player {
  --theme-hue: 199;
  --progress-color: var(--kanal10-blue);
  --background-color: var(--kanal10-bg);
  --splash-background: var(--kanal10-bg);
  --splash-image: url("assets/kanal10-logo-white.png");
  --logo-background: var(--kanal10-bg);
  --logo-image: url("assets/kanal10-logo-white.png");
  --font-family: "Roboto", "Helvetica Neue", Arial, sans-serif;
}

.splash {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4vh;
  background: radial-gradient(circle at 50% 42%, #14304a 0%, var(--kanal10-bg) 62%);
  transition: opacity 600ms ease;
}

.splash.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.splash__glow {
  position: absolute;
  width: 46vh;
  height: 46vh;
  top: 50%;
  left: 50%;
  margin: -32vh 0 0 -23vh;
  border-radius: 50%;
  background: var(--kanal10-blue);
  filter: blur(12vh);
  opacity: 0.25;
  animation: glow 3.2s ease-in-out infinite;
}

.splash__badge {
  position: relative;
  width: 26vh;
  height: 26vh;
  animation: pop 900ms cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
}

.splash__wordmark {
  position: relative;
  width: 36vw;
  max-width: 640px;
  animation: rise 900ms 250ms ease-out both;
}

.splash__status {
  position: relative;
  margin: 2vh 0 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: 2.6vh;
  letter-spacing: 0.05em;
  animation: rise 900ms 450ms ease-out both;
}

.splash.is-loading .splash__status::after {
  content: "";
  display: inline-block;
  width: 1.5em;
  text-align: left;
  animation: dots 1.4s steps(4, end) infinite;
}

@keyframes pop {
  from { transform: scale(0.6); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

@keyframes rise {
  from { transform: translateY(2vh); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes glow {
  0%, 100% { opacity: 0.18; transform: scale(0.95); }
  50% { opacity: 0.32; transform: scale(1.05); }
}

@keyframes dots {
  0% { content: ""; }
  25% { content: "."; }
  50% { content: ".."; }
  75% { content: "..."; }
}