:root { --barg-splash-background: #1B1E23; --barg-logo-width: 260px; }
#barg-splash {
  position: fixed; inset: 0; z-index: 2147483647;
  display: grid; place-items: center;
  background: var(--barg-splash-background);
  transition: opacity 420ms ease, visibility 420ms ease;
}
#barg-splash.barg-splash--hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.barg-splash__art {
  position: relative;
  width: min(var(--barg-logo-width), 70vw);
  aspect-ratio: 521 / 512;
  isolation: isolate;
}
.barg-splash__image {
  display: block; width: 100%; height: 100%; object-fit: contain;
  /* Change the supplied logo's colors immediately, without moving its shape. */
  animation: barg-hue-breathe 4s linear infinite;
}
.barg-splash__light {
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 10%, rgba(255, 55, 181, .36) 32%, rgba(255, 185, 36, .23) 52%, rgba(106, 31, 255, .34) 74%, transparent 91%);
  background-size: 240% 240%;
  -webkit-mask: url('./logo.png') center / contain no-repeat;
  mask: url('./logo.png') center / contain no-repeat;
  pointer-events: none;
  mix-blend-mode: screen;
  animation: barg-color-flow 3s ease-in-out infinite;
}
@keyframes barg-hue-breathe {
  from { filter: hue-rotate(0deg) saturate(1.1); }
  to { filter: hue-rotate(360deg) saturate(1.1); }
}
@keyframes barg-color-flow {
  0%, 100% { background-position: 100% 0%; opacity: .12; }
  50% { background-position: 0% 100%; opacity: .42; }
}
@media (prefers-reduced-motion: reduce) {
  /* Keep a slower color change; remove the moving light and fade. */
  .barg-splash__image { animation-duration: 12s; }
  .barg-splash__light { display: none; }
  #barg-splash { transition: none; }
}