html.night-mode {
  background:#080c14;
}

html.night-mode body {
  background:#070b12;
}

html.night-mode body::before {
  background-image:url("../images/background-night.png");
  filter:saturate(.9) brightness(.56) contrast(1.04);
}

html.night-mode body::after {
  background:
    radial-gradient(circle at 13% 10%,rgba(161,193,255,.12) 0%,rgba(91,125,194,.05) 20%,transparent 40%),
    radial-gradient(ellipse at 74% 82%,rgba(79,111,178,.045) 0%,transparent 44%),
    linear-gradient(180deg,rgba(5,9,17,.4) 0%,rgba(7,11,20,.62) 56%,rgba(5,8,15,.8) 100%);
}

.night-atmosphere {
  position:fixed;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
  opacity:0;
  background:
    radial-gradient(ellipse at 50% -18%,rgba(111,137,191,.055),transparent 48%),
    radial-gradient(ellipse at 8% 78%,rgba(74,87,132,.035),transparent 42%);
  transition:opacity 1.5s ease;
}

html.night-mode .night-atmosphere {
  opacity:.48;
}

html.night-mode body > .site-header,
html.night-mode body > main,
html.night-mode body > .site-footer,
html.night-mode body > .skip-link {
  position:relative;
  z-index:1;
}

.night-aurora {
  position:absolute;
  border-radius:50%;
  filter:blur(90px);
  mix-blend-mode:screen;
  will-change:transform,opacity;
}

.night-aurora-a {
  width:72vw;
  height:62vh;
  left:-22vw;
  top:-14vh;
  opacity:.12;
  background:radial-gradient(ellipse at center,rgba(88,115,176,.5) 0%,rgba(71,89,151,.2) 38%,transparent 72%);
  animation:night-aurora-a 52s ease-in-out infinite alternate;
}

.night-aurora-b {
  width:68vw;
  height:58vh;
  right:-24vw;
  top:18vh;
  opacity:.09;
  background:radial-gradient(ellipse at center,rgba(126,91,164,.42) 0%,rgba(74,91,153,.17) 42%,transparent 72%);
  animation:night-aurora-b 68s ease-in-out infinite alternate;
}

.night-aurora-c {
  width:76vw;
  height:48vh;
  left:15vw;
  bottom:-26vh;
  opacity:.075;
  background:radial-gradient(ellipse at center,rgba(64,111,137,.35) 0%,rgba(55,82,124,.12) 45%,transparent 74%);
  animation:night-aurora-c 84s ease-in-out infinite alternate;
}

.night-starfield {
  position:absolute;
  inset:-8%;
  will-change:transform;
}

.night-starfield span {
  position:absolute;
  left:var(--x);
  top:var(--y);
  width:var(--size);
  height:var(--size);
  border-radius:50%;
  background:rgba(226,236,255,.9);
  box-shadow:0 0 var(--glow) rgba(164,190,239,.48);
  filter:blur(var(--blur));
  opacity:var(--alpha);
  animation:night-star-breathe var(--twinkle) ease-in-out var(--delay) infinite alternate;
}

.night-starfield-far {
  animation:night-starfield-far 142s ease-in-out infinite alternate;
}

.night-starfield-mid {
  animation:night-starfield-mid 108s ease-in-out infinite alternate;
}

.night-starfield-near {
  animation:night-starfield-near 82s ease-in-out infinite alternate;
}

.night-motes {
  position:absolute;
  inset:-6%;
}

.night-motes span {
  position:absolute;
  left:var(--x);
  top:var(--y);
  width:var(--size);
  height:var(--size);
  border-radius:50%;
  background:rgba(183,207,244,.55);
  filter:blur(var(--blur));
  box-shadow:0 0 12px rgba(118,152,210,.22);
  opacity:var(--alpha);
  animation:night-mote-float var(--duration) ease-in-out var(--delay) infinite alternate;
}

html.night-mode .hero {
  border-color:#46577a;
  box-shadow:0 22px 68px rgba(5,10,24,.34),0 0 38px rgba(101,126,190,.1),inset 0 0 0 1px rgba(218,230,255,.035);
}

html.night-mode .hero::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:8;
  padding:2px;
  border-radius:inherit;
  background:linear-gradient(118deg,rgba(103,132,196,.68) 0%,rgba(86,104,157,.3) 24%,rgba(214,228,255,.13) 48%,rgba(112,96,166,.34) 72%,rgba(143,176,232,.7) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
}

html.night-mode .hero::after {
  content:"";
  position:absolute;
  inset:-8% -5% -6% 34%;
  z-index:-1;
  border-radius:45%;
  background:radial-gradient(circle at 72% 12%,rgba(204,220,255,.16) 0%,rgba(133,161,220,.09) 28%,rgba(91,111,174,.035) 52%,transparent 72%);
  filter:blur(16px);
  mix-blend-mode:screen;
  pointer-events:none;
  animation:night-moon-glow 14s ease-in-out infinite alternate;
}

html.night-mode .hero-shade {
  background:linear-gradient(90deg,#101620 2%,#101620f4 25%,#121824a5 48%,#11182810 77%),linear-gradient(0deg,#0c111bc9,transparent 35%);
}

html.night-mode .poster-wrap {
  transition:border-color .28s,box-shadow .28s,background .28s;
}


html.night-mode .poster-wrap::before {
  background:linear-gradient(118deg,rgba(87,111,174,.82) 0%,rgba(126,142,214,.96) 18%,rgba(178,196,255,.92) 36%,rgba(120,101,186,.94) 54%,rgba(83,108,190,.9) 72%,rgba(153,190,246,.96) 88%,rgba(87,111,174,.82) 100%);
  background-size:300% 300%;
}

html.night-mode .project-card:hover .poster-wrap::before,
html.night-mode .project-card:focus-visible .poster-wrap::before {
  opacity:.95;
  animation:night-project-card-border-flow 9s ease-in-out infinite;
}

@keyframes night-project-card-border-flow {
  0% { background-position:0% 50%; }
  50% { background-position:100% 50%; }
  100% { background-position:0% 50%; }
}

html.night-mode .project-card:hover .poster-wrap,
html.night-mode .project-card:focus-visible .poster-wrap {
  border-color:rgba(151,175,231,.4);
  box-shadow:0 0 0 1px rgba(120,145,216,.07),0 13px 34px rgba(37,47,95,.2),0 0 28px rgba(91,101,186,.085);
}

html.night-mode .brand {
  position:relative;
}

.brand-night-spark {
  position:absolute;
  left:45px;
  top:15px;
  width:3px;
  height:3px;
  border-radius:50%;
  background:#dce9ff;
  box-shadow:0 0 4px #eaf2ff,0 0 10px #a9c4f6,0 0 17px #788bc8;
  opacity:0;
  pointer-events:none;
  animation:brand-night-spark 2.8s ease-in-out forwards;
}

.night-shooting-star {
  position:absolute;
  left:var(--x);
  top:var(--y);
  width:105px;
  height:1px;
  border-radius:999px;
  background:linear-gradient(90deg,transparent,rgba(178,204,248,.08) 36%,rgba(229,239,255,.72) 88%,rgba(255,255,255,.9));
  filter:drop-shadow(0 0 3px rgba(175,203,255,.55));
  opacity:0;
  transform:rotate(29deg) scaleX(var(--scale));
  transform-origin:right center;
  animation:night-shooting-star var(--duration) ease-out forwards;
}

@keyframes night-aurora-a {
  0% { transform:translate3d(-4%,0,0) scale(1); opacity:.08; }
  50% { transform:translate3d(8%,6%,0) scale(1.08); opacity:.14; }
  100% { transform:translate3d(15%,-3%,0) scale(1.02); opacity:.1; }
}

@keyframes night-aurora-b {
  0% { transform:translate3d(7%,-4%,0) scale(1.04); opacity:.07; }
  50% { transform:translate3d(-8%,8%,0) scale(.97); opacity:.11; }
  100% { transform:translate3d(-14%,-2%,0) scale(1.06); opacity:.08; }
}

@keyframes night-aurora-c {
  0% { transform:translate3d(-5%,3%,0) scale(.98); }
  100% { transform:translate3d(9%,-8%,0) scale(1.1); }
}

@keyframes night-starfield-far {
  0% { transform:translate3d(-1.2%,-.5%,0) scale(1); }
  100% { transform:translate3d(2.3%,1.4%,0) scale(1.008); }
}

@keyframes night-starfield-mid {
  0% { transform:translate3d(1.6%,-1.1%,0) scale(1.005); }
  100% { transform:translate3d(-2.1%,1.8%,0) scale(.998); }
}

@keyframes night-starfield-near {
  0% { transform:translate3d(-1.1%,1.2%,0); }
  100% { transform:translate3d(1.7%,-1.9%,0); }
}

@keyframes night-star-breathe {
  0% { opacity:calc(var(--alpha) * .42); transform:scale(.72); }
  55% { opacity:var(--alpha); transform:scale(1); }
  100% { opacity:calc(var(--alpha) * .62); transform:scale(.84); }
}

@keyframes night-mote-float {
  0% { transform:translate3d(0,10px,0) scale(.82); opacity:calc(var(--alpha) * .45); }
  55% { opacity:var(--alpha); }
  100% { transform:translate3d(var(--drift),-46px,0) scale(1.12); opacity:calc(var(--alpha) * .65); }
}

@keyframes night-moon-glow {
  0% { opacity:.62; transform:scale(.985) translate3d(0,0,0); }
  100% { opacity:.92; transform:scale(1.035) translate3d(-1.5%,1%,0); }
}

@keyframes night-shooting-star {
  0% { opacity:0; transform:translate3d(-15vw,-10vh,0) rotate(29deg) scaleX(var(--scale)); }
  12% { opacity:.72; }
  72% { opacity:.48; }
  100% { opacity:0; transform:translate3d(55vw,34vh,0) rotate(29deg) scaleX(var(--scale)); }
}

@keyframes brand-night-spark {
  0% { opacity:0; transform:translate3d(0,17px,0) scale(.4); }
  16% { opacity:.9; }
  45% { transform:translate3d(62px,-8px,0) scale(1); }
  72% { opacity:.75; transform:translate3d(126px,8px,0) scale(.75); }
  100% { opacity:0; transform:translate3d(190px,-4px,0) scale(.25); }
}

@media(max-width:780px) {
  .night-aurora-a,
  .night-aurora-b,
  .night-aurora-c {
    filter:blur(68px);
  }

  html.night-mode .hero::before {
    padding:1px;
  }

  html.night-mode .hero::after {
    inset:-10% -18% -8% 18%;
  }
}

@media(prefers-reduced-motion:reduce) {
  .night-aurora,
  .night-starfield,
  .night-starfield span,
  .night-motes span,
  html.night-mode .hero::after {
    animation:none!important;
  }

  .night-shooting-star,
  .brand-night-spark {
    display:none!important;
  }
}