:root {
  --site-background: #000;
}

html {
  min-height: 100%;
  background: var(--site-background);
}

html body,
html body.auth-screen,
html body.dashboard-page,
html body.simple-cabinet.dashboard-page,
html body.admin-page.dashboard-page {
  min-height: 100vh;
  min-height: 100dvh;
  background-color: var(--site-background) !important;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E") !important;
  background-repeat: repeat !important;
  background-position: 0 0 !important;
  background-size: 180px 180px !important;
  background-attachment: fixed !important;
  animation: none !important;
}

/* Reuse the old decorative host for two large animated light fields. */
html body .firefly-bg,
html body.auth-screen .firefly-bg,
html body.simple-cabinet .firefly-bg,
html body.admin-page .firefly-bg {
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  display: block !important;
  visibility: visible !important;
  overflow: hidden !important;
  pointer-events: none !important;
  opacity: 1 !important;
  background: transparent !important;
  animation: none !important;
}

html body .firefly-bg::before,
html body .firefly-bg::after {
  content: "" !important;
  position: absolute !important;
  display: block !important;
  border-radius: 0 !important;
  pointer-events: none !important;
  will-change: transform !important;
  transform: translate3d(0, 0, 0) scale(1);
  transform-origin: 50% 25% !important;
  background-repeat: no-repeat !important;
  background-position: center top !important;
  background-size: 100% 100% !important;
  mix-blend-mode: screen !important;
}

html body .firefly-bg::before {
  width: 150vw !important;
  height: 76vh !important;
  left: -25vw !important;
  top: -9vh !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1800 760' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g1' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%2300d98b' stop-opacity='0'/%3E%3Cstop offset='.18' stop-color='%2300d98b' stop-opacity='.5'/%3E%3Cstop offset='.48' stop-color='%2357f2d2' stop-opacity='.76'/%3E%3Cstop offset='.72' stop-color='%2323c8e5' stop-opacity='.52'/%3E%3Cstop offset='1' stop-color='%2323c8e5' stop-opacity='0'/%3E%3C/linearGradient%3E%3Cfilter id='mist1' x='-25%25' y='-100%25' width='150%25' height='300%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.007 .022' numOctaves='3' seed='11' result='noise'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='noise' scale='58' xChannelSelector='R' yChannelSelector='B' result='wave'/%3E%3CfeGaussianBlur in='wave' stdDeviation='48'/%3E%3C/filter%3E%3Cfilter id='edge1' x='-20%25' y='-70%25' width='140%25' height='240%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.009 .028' numOctaves='2' seed='17' result='noise'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='noise' scale='34' xChannelSelector='G' yChannelSelector='R' result='wave'/%3E%3CfeGaussianBlur in='wave' stdDeviation='13'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M-120 245 C 150 40 360 380 650 190 S 1110 28 1390 210 S 1690 330 1920 145' fill='none' stroke='url(%23g1)' stroke-width='176' stroke-linecap='round' filter='url(%23mist1)'/%3E%3Cpath d='M-100 205 C 170 30 365 330 660 160 S 1110 18 1400 170 S 1680 286 1910 110' fill='none' stroke='url(%23g1)' stroke-width='48' stroke-linecap='round' opacity='.52' filter='url(%23edge1)'/%3E%3C/svg%3E") !important;
  filter: saturate(125%) !important;
  opacity: .72 !important;
  animation: site-aurora-wave-front 26s ease-in-out infinite alternate !important;
}

html body .firefly-bg::after {
  width: 145vw !important;
  height: 82vh !important;
  left: -18vw !important;
  top: 4vh !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1800 820' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g2' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%23226cff' stop-opacity='0'/%3E%3Cstop offset='.22' stop-color='%23226cff' stop-opacity='.36'/%3E%3Cstop offset='.5' stop-color='%232bd9da' stop-opacity='.52'/%3E%3Cstop offset='.76' stop-color='%2370f0ba' stop-opacity='.37'/%3E%3Cstop offset='1' stop-color='%2370f0ba' stop-opacity='0'/%3E%3C/linearGradient%3E%3Cfilter id='mist2' x='-25%25' y='-100%25' width='150%25' height='300%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.006 .019' numOctaves='3' seed='23' result='noise'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='noise' scale='68' xChannelSelector='B' yChannelSelector='G' result='wave'/%3E%3CfeGaussianBlur in='wave' stdDeviation='62'/%3E%3C/filter%3E%3Cfilter id='edge2' x='-20%25' y='-80%25' width='140%25' height='260%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.008 .025' numOctaves='2' seed='31' result='noise'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='noise' scale='40' xChannelSelector='R' yChannelSelector='B' result='wave'/%3E%3CfeGaussianBlur in='wave' stdDeviation='17'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M-120 365 C 210 110 430 455 720 290 S 1190 115 1450 300 S 1710 410 1920 250' fill='none' stroke='url(%23g2)' stroke-width='220' stroke-linecap='round' filter='url(%23mist2)'/%3E%3Cpath d='M-100 330 C 220 105 440 410 730 255 S 1190 100 1460 265 S 1710 365 1910 215' fill='none' stroke='url(%23g2)' stroke-width='42' stroke-linecap='round' opacity='.38' filter='url(%23edge2)'/%3E%3C/svg%3E") !important;
  filter: saturate(118%) !important;
  opacity: .52 !important;
  animation: site-aurora-wave-back 33s ease-in-out infinite alternate !important;
}

/* The former stars remain in the markup only for backwards compatibility. */
html body .firefly-bg .firefly,
html body .firefly-bg .firefly::before,
html body .firefly-bg .firefly::after {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  animation: none !important;
}

@keyframes site-aurora-wave-front {
  0% { transform: translate3d(-5vw, -2vh, 0) scale3d(1, .92, 1) rotate(-2deg); }
  45% { transform: translate3d(2vw, 4vh, 0) scale3d(1.04, 1.08, 1) rotate(1deg); }
  100% { transform: translate3d(7vw, -1vh, 0) scale3d(.98, 1.16, 1) rotate(3deg); }
}

@keyframes site-aurora-wave-back {
  0% { transform: translate3d(6vw, 3vh, 0) scale3d(1.04, 1.08, 1) rotate(2deg); }
  50% { transform: translate3d(-2vw, -3vh, 0) scale3d(.98, .94, 1) rotate(-1deg); }
  100% { transform: translate3d(-8vw, 5vh, 0) scale3d(1.06, 1.13, 1) rotate(-3deg); }
}

@media (prefers-reduced-motion: reduce) {
  html body,
  html body.auth-screen,
  html body.dashboard-page,
  html body.simple-cabinet.dashboard-page,
  html body.admin-page.dashboard-page {
    animation: none !important;
  }

  html body .firefly-bg::before,
  html body .firefly-bg::after {
    animation: none !important;
  }
}

@media (max-width: 780px) {
  html body,
  html body.auth-screen,
  html body.dashboard-page,
  html body.simple-cabinet.dashboard-page,
  html body.admin-page.dashboard-page {
    background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.025'/%3E%3C/svg%3E") !important;
  }

  html body .firefly-bg::before {
    width: 210vw !important;
    left: -55vw !important;
    top: -4vh !important;
    opacity: .66 !important;
  }

  html body .firefly-bg::after {
    width: 200vw !important;
    left: -48vw !important;
    top: 12vh !important;
    opacity: .48 !important;
  }
}