/* Shared night mode for the lightweight site pages. */

body::before,
body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  opacity:0;
  transition:opacity .45s ease;
}

body::before{
  background:
    radial-gradient(1200px 800px at 50% 10%, rgba(10,16,40,.55), rgba(3,6,14,.82));
  mix-blend-mode:multiply;
}

body::after{
  background:#0c1530;
  mix-blend-mode:color;
}

body.night::before{ opacity:.62; }
body.night::after{ opacity:.28; }
body.night #fog-canvas{ opacity:.14; }

.godrays,
.godrays-overlay{ transition:opacity .45s ease; }

body.night .godrays,
body.night .godrays-overlay{
  opacity:0;
  pointer-events:none;
}

.firefly{
  transition:box-shadow .35s ease, opacity .35s ease, transform .35s ease;
}

body.night .firefly{
  background:rgba(246,241,231,.95);
  box-shadow:
    0 0 10px rgba(246,241,231,.90),
    0 0 22px rgba(246,241,231,.55),
    0 0 36px rgba(224,201,122,.35);
  opacity:1;
  transform:scale(1.08);
}

body.night .butterfly svg{
  filter:var(--bf-glow, none);
  transition:filter .25s ease;
  will-change:filter;
}

body:not(.night) .butterfly svg{ filter:none; }

body.night .butterfly:hover svg{
  filter:var(--bf-glow, none) drop-shadow(0 0 6px rgba(255,255,255,.35));
}

@media (prefers-reduced-motion:reduce){
  body::before,
  body::after,
  .godrays,
  .godrays-overlay,
  .firefly{
    transition:none;
  }

  body.night .butterfly svg{
    filter:var(--bf-glow, none);
    transition:none;
  }
}