:root {
  --aurora-primary: #312e81;
  --aurora-secondary: #1e40af;
  --aurora-tertiary: #0d9488;
  --star-color: #60a5fa;
}

/* Night sky and aurora */

.night-sky {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(20deg, #020617, var(--aurora-primary));
}

.night-sky__aurora {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
}

.night-sky__aurora--one {
  background: linear-gradient(
    20deg,
    transparent 20%,
    var(--aurora-secondary) 40%,
    transparent 60%
  );
}

.night-sky__aurora--two {
  background: linear-gradient(
    8deg,
    transparent 5%,
    var(--aurora-tertiary) 20%,
    transparent 40%
  );
}

/* Landscape + tent */

.landscape {
  height: 50px;
  background: #020617;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 4;
}

.tent {
  height: 0;
  width: 300px;
  border-bottom: 140px solid #020617;
  position: absolute;
  bottom: 80%;
  left: 25%;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
}

.tent::after {
  content: "";
  height: 140px;
  width: 40px;
  display: block;
  border-left: 3px solid #020617;
  transform: skewX(-45deg);
  position: absolute;
  top: 0;
  left: -70px;
}

.tent::before {
  content: "";
  height: 140px;
  width: 40px;
  display: block;
  border-left: 3px solid #020617;
  transform: skewX(45deg);
  position: absolute;
  top: 0;
  left: 305px;
}

/* Campfire */

.campfire__flame {
  background: #a78bfa99;
  height: 60px;
  width: 60px;
  position: absolute;
  bottom: 90%;
  left: calc(40% + 220px);
  z-index: 2;
  border-radius: 0 30px 30px 30px;
  transform: rotate(45deg);
  animation: flicker 1s infinite ease-in-out alternate;
}

.campfire__flame::before {
  content: "";
  position: absolute;
  height: 5px;
  width: 5px;
  background-color: #a78bfa00;
  top: 0;
  left: 0;
  margin-left: 0;
  margin-top: 0;
  z-index: 1;
  box-shadow:
    -20px -20px 0 0 #a78bfa,
     5px  -20px 0 0 orange,
    -20px   5px 0 0 orange;
  animation: spit 2s infinite linear;
}

.campfire__flame::after {
  content: "";
  position: absolute;
  height: 30px;
  width: 30px;
  background-color: #ede9feee;
  top: 50%;
  left: 50%;
  margin-top: -15%;
  margin-left: -15%;
  border-radius: 4px 30px 30px 30px;
}

.campfire__logs {
  width: 90px;
  height: 10px;
  background-color: #1c1917b3;
  position: absolute;
  left: calc(40% + 205px);
}

.campfire__logs::before,
.campfire__logs::after {
  content: "";
  position: absolute;
  top: 0;
  width: 100%;
  height: 10px;
  background-color: #1c1917b3;
  transform-origin: center center;
}

.campfire__logs::before {
  transform: rotate(20deg);
}

.campfire__logs::after {
  transform: rotate(-20deg);
}

/* Spit animation */

@keyframes spit {
  0% {
    box-shadow:
      -20px -20px 0 0 #dbeafe,
       5px  -20px 0 0 #a78bfa,
      -20px   5px 0 0 #a78bfa;
  }
  25% {
    box-shadow:
      -20px -20px 0 -12px #a78bfa,
       5px  -20px 0 0 #dbeafe,
      -20px   5px 0 0 #dbeafe;
  }
  50% {
    box-shadow:
      -20px -20px 0 0 #dbeafe,
       5px  -20px 0 -12px #a78bfa,
      -20px   5px 0 0 #a78bfa;
  }
  75% {
    box-shadow:
      -20px -20px 0 0 #a78bfa,
       5px  -20px 0 0 #dbeafe,
      -20px   5px 0 -12px #dbeafe;
  }
  100% {
    box-shadow:
      -20px -20px 0 0 #dbeafe,
       5px  -20px 0 0 #a78bfa,
      -20px   5px 0 0 #a78bfa;
  }
}

/* Flicker */

@keyframes flicker {
  from {
    transform: rotate(35deg);
  }
  to {
    transform: rotate(55deg);
  }
}

/* Stars */
.star {
  position: absolute;
  width: 0;
  height: 0;
  /* we'll control this via a CSS variable from JS */
  border-right: var(--star-size, 2px) solid transparent;
  border-bottom: calc(var(--star-size, 2px) * 0.7) solid var(--star-color);
  border-left: var(--star-size, 2px) solid transparent;
  transform: rotate(35deg);
}

.star--animated {
  animation: twinkle 3s infinite;
}

@keyframes twinkle {
  0% {
    transform: scale(0) rotate(35deg);
  }
  50% {
    transform: scale(1.25) rotate(35deg);
  }
  100% {
    transform: scale(0) rotate(35deg);
  }
}

@keyframes twinkle {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.25);
  }
  100% {
    transform: scale(0);
  }
}