/* React Bits adaptations. See LICENSE and manifest.json alongside the source. */
.krwa-login-effects {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  isolation: isolate;
  pointer-events: none;
  background: #050505;
}

.krwa-login-effects__canvas,
.krwa-login-effects__fallback {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  mask-image: radial-gradient(ellipse at 52% 50%, rgb(0 0 0 / 10%) 0%, rgb(0 0 0 / 24%) 23%, rgb(0 0 0 / 90%) 63%, #000 100%);
  -webkit-mask-image: radial-gradient(ellipse at 52% 50%, rgb(0 0 0 / 10%) 0%, rgb(0 0 0 / 24%) 23%, rgb(0 0 0 / 90%) 63%, #000 100%);
}

.krwa-login-effects__canvas[hidden] { display: none; }

.krwa-login-effects__fallback {
  margin: 0;
  color: rgb(255 255 255 / 38%);
  font: 12px / 18px ui-monospace, Consolas, "Courier New", monospace;
  white-space: pre;
  user-select: none;
}

.krwa-screen-surface {
  filter: var(--krwa-crt-filter, none);
}

.krwa-crt-filter-defs {
  position: absolute;
  overflow: hidden;
  pointer-events: none;
}

.krwa-crt-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  overflow: hidden;
  pointer-events: none;
  opacity: .85;
  background: repeating-linear-gradient(0deg, transparent 0 2px, rgb(0 0 0 / 23%) 2px 3px, rgb(255 255 255 / 2%) 3px 4px);
  box-shadow: inset 0 0 100px 16px rgb(0 0 0 / 38%);
}

.krwa-crt-overlay::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: var(--krwa-crt-band-y, -15%);
  height: 13%;
  opacity: var(--krwa-crt-band-alpha, 0);
  background: linear-gradient(transparent, #fff 47%, transparent);
}

.krwa-crt-overlay--glitch::after {
  height: 4%;
  background: repeating-linear-gradient(0deg, transparent 0 4px, #fff 4px 5px);
}

.krwa-crt-overlay--input { opacity: .45; }
.krwa-crt-overlay--still { opacity: .40; }

@media (prefers-reduced-motion: reduce) {
  .krwa-screen-surface { filter: none; }
  .krwa-crt-overlay::after { display: none; }
}

.krwa-login-effects::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, transparent 0 3px, rgb(0 0 0 / 14%) 3px 4px),
    radial-gradient(ellipse at center, transparent 38%, rgb(0 0 0 / 72%) 100%);
}

@media (max-width: 640px) {
  .krwa-login-effects__canvas,
  .krwa-login-effects__fallback {
    mask-image: radial-gradient(ellipse at 50% 48%, rgb(0 0 0 / 8%) 0%, rgb(0 0 0 / 23%) 38%, #000 100%);
    -webkit-mask-image: radial-gradient(ellipse at 50% 48%, rgb(0 0 0 / 8%) 0%, rgb(0 0 0 / 23%) 38%, #000 100%);
  }
}