/* Flickering "aurora" background in the four brand accents:
   cyan (Trading), green (Staff), purple (Studio), grapefruit (Software).
   Soft vertical light streaks that fade in one after another. */
.sl-aurora {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  /* faint stars */
  background-image:
    radial-gradient(1px 1px at 12% 18%, #ffffff55 50%, transparent 51%),
    radial-gradient(1px 1px at 27% 72%, #ffffff40 50%, transparent 51%),
    radial-gradient(1px 1px at 41% 33%, #ffffff35 50%, transparent 51%),
    radial-gradient(1px 1px at 58% 12%, #ffffff50 50%, transparent 51%),
    radial-gradient(1px 1px at 66% 84%, #ffffff35 50%, transparent 51%),
    radial-gradient(1px 1px at 79% 41%, #ffffff45 50%, transparent 51%),
    radial-gradient(1px 1px at 91% 66%, #ffffff35 50%, transparent 51%),
    radial-gradient(1px 1px at 7% 52%, #ffffff30 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 84% 22%, #ffffff40 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 35% 90%, #ffffff30 50%, transparent 51%);
}
.sl-aurora i {
  position: absolute;
  top: 10%;
  height: 62%;
  width: 62%;
  border-radius: 50%;
  opacity: 0;
  filter: blur(44px);
  /* vertical curtain streaks */
  -webkit-mask-image:
    repeating-linear-gradient(90deg, #000 0 2%, #0007 4%, #000 5.5%, #0004 8%, #000 10.5%, #0009 12%, #000 14%, #0005 17%, #000 19%),
    radial-gradient(closest-side, #000 35%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image:
    repeating-linear-gradient(90deg, #000 0 2%, #0007 4%, #000 5.5%, #0004 8%, #000 10.5%, #0009 12%, #000 14%, #0005 17%, #000 19%),
    radial-gradient(closest-side, #000 35%, transparent 100%);
          mask-composite: intersect;
  animation: sl-aurora 16s ease-in-out infinite;
  will-change: opacity, transform;
}
.sl-aurora .a1 { left: 30%;  background: var(--color-accent, #00e0ff); animation-delay: 0s; }
.sl-aurora .a2 { left: -8%;  background: var(--color-b2b, #63de20);    animation-delay: -12s; top: 16%; }
.sl-aurora .a3 { left: 10%;  background: var(--color-studio, #c74bff); animation-delay: -8s; }
.sl-aurora .a4 { left: 46%;  background: var(--color-soft, #f60);      animation-delay: -4s; top: 14%; }

@keyframes sl-aurora {
  0%   { opacity: 0;    transform: translateX(-4%) scaleY(.9); }
  18%  { opacity: .42;  transform: translateX(-1%) scaleY(1.04); }
  28%  { opacity: .30;  transform: translateX(1%)  scaleY(.97); }
  36%  { opacity: .38;  transform: translateX(2%)  scaleY(1.02); }
  52%  { opacity: 0;    transform: translateX(4%)  scaleY(.92); }
  100% { opacity: 0;    transform: translateX(-4%) scaleY(.9); }
}

/* light theme: keep it a hint */
.color-scheme:not(.is-dark) .sl-aurora { background-image: none; }
.color-scheme:not(.is-dark) .sl-aurora i { filter: blur(48px) saturate(.8); }
.color-scheme:not(.is-dark) .sl-aurora { opacity: .45; }

/* own stacking context: scheme background, then glow (z -1), then content */
.color-scheme { isolation: isolate; }

@media (max-width: 767px) {
  .sl-aurora i { width: 80%; filter: blur(30px); }
  .sl-aurora .a1 { left: -30%; } .sl-aurora .a2 { left: 0; }
  .sl-aurora .a3 { left: 25%; }  .sl-aurora .a4 { left: 45%; }
}
@media (prefers-reduced-motion: reduce) {
  .sl-aurora i { animation: none; opacity: .18; }
}

/* background variant 2: brain field canvas (custom/brainfield.js) */
.sl-brain { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
html[data-bg="2"] .sl-aurora, html[data-bg="3"] .sl-aurora { display: none; }

/* BG 2: soft 15% glow around every logo element (a blurred, brightened copy behind the logo) */
.sl-logo-glow { position: absolute; pointer-events: none; max-width: none; max-height: none; opacity: var(--sl-logo-glow, 0.15); mix-blend-mode: screen;
  filter: brightness(3.5) saturate(1.5) blur(12px); }
html:not([data-bg="2"]) .sl-logo-glow { display: none; }