<div class="mask">
</div>
<div class="mask mask-2">
</div>
<div class="mask mask-3">
</div>
<div class="mask mask-4">
</div>
<div class="mask mask-5">
</div>
<div class="mask mask-6">
</div>
<div class="mask mask-7">
</div>
<div class="mask mask-8">
</div>
<div class="skyline">
  <div class="house">
    <div class="windows">
      <div></div>
    </div>
    <div class="windows">
      <div></div>
    </div>
    <div class="windows">
      <div></div>
    </div>
    <div class="windows">
      <div></div>
    </div>
    <div class="windows">
      <div></div>
    </div>
    <div class="windows">
      <div></div>
    </div>
    <div class="windows">
      <div></div>
    </div>
    <div class="windows">
      <div></div>
    </div>
    <div class="windows">
      <div></div>
    </div>
  </div>
  <div class="house">
    <div class="windows">
      <div></div>
    </div>
    <div class="windows">
      <div></div>
    </div>
    <div class="windows">
      <div></div>
    </div>
    <div class="windows">
      <div></div>
    </div>
    <div class="windows">
      <div></div>
    </div>
    <div class="windows">
      <div></div>
    </div>
    <div class="windows">
      <div></div>
    </div>
    <div class="windows">
      <div></div>
    </div>
    <div class="windows">
      <div></div>
    </div>
  </div>
  <div class="house">
    <div class="windows">
      <div></div>
    </div>
    <div class="windows">
      <div></div>
    </div>
    <div class="windows">
      <div></div>
    </div>
    <div class="windows">
      <div></div>
    </div>
    <div class="windows">
      <div></div>
    </div>
    <div class="windows">
      <div></div>
    </div>
    <div class="windows">
      <div></div>
    </div>
    <div class="windows">
      <div></div>
    </div>
    <div class="windows">
      <div></div>
    </div>
  </div>
  <div class="house">
    <div class="windows">
      <div></div>
    </div>
    <div class="windows">
      <div></div>
    </div>
    <div class="windows">
      <div></div>
    </div>
    <div class="windows">
      <div></div>
    </div>
    <div class="windows">
      <div></div>
    </div>
    <div class="windows">
      <div></div>
    </div>
    <div class="windows">
      <div></div>
    </div>
    <div class="windows">
      <div></div>
    </div>
    <div class="windows">
      <div></div>
    </div>
  </div>
  <div class="house">
    <div class="windows">
      <div></div>
    </div>
    <div class="windows">
      <div></div>
    </div>
    <div class="windows">
      <div></div>
    </div>
    <div class="windows">
      <div></div>
    </div>
    <div class="windows">
      <div></div>
    </div>
    <div class="windows">
      <div></div>
    </div>
    <div class="windows">
      <div></div>
    </div>
    <div class="windows">
      <div></div>
    </div>
    <div class="windows">
      <div></div>
    </div>
  </div>
</div>

<div class="warning">
  Due to your preferences to reduce motion, this demo is not showing a repeating animation of fireworks. :)
</div>

@layer base, fireworks, skyline;

@layer fireworks {
  .mask {
    --_color-1: var(--color-1, oklch(80% 0.4 97));
    --_color-2: var(--color-2, oklch(35% 0.5 313));
    --_delay: var(--delay, 0);
    position: absolute;
    inset-inline-start: 10vw;
    top: 10vh;
    mask-image: url("https://assets.codepen.io/159218/fireworks-2.svg");
    width: 10vw;
    aspect-ratio: 1;
    &::after {
      position: absolute;
      inset: 0;
      aspect-ratio: 1;
      background-image: radial-gradient(
        farthest-side circle at 50% 50% in oklab,
        transparent 10%,
        var(--_color-1) 25%,
        var(--_color-2) 50%,
        transparent 100%
      );
      content: "";
      background-position: center;
      background-repeat: no-repeat;
      transform: scale(0);
      mask-size: 100% 100%;
      mask-clip: border-box;
      border-radius: 50%;
      animation: fireworks 3.2s ease-out infinite;
      animation-delay: calc((var(--_delay) + 1) * 1s);
    }
  }

  .mask-2 {
    --color-1: oklch(80% 0.4 222);
    --color-2: oklch(35% 0.5 313);
    --delay: 1;
    inset-inline-start: 5vw;
    top: 30vh;
    width: 15vw;
  }

  .mask-3 {
    --color-1: oklch(80% 0.3 146);
    --color-2: oklch(80% 0.3 180);
    --delay: 2.5;
    inset-inline-start: 40vw;
    top: 20vh;
    width: 20vw;
  }

  .mask-4 {
    --color-1: oklch(80% 0.2 256);
    --color-2: oklch(80% 0.1 180);
    --delay: 3;
    inset-inline-start: 55vw;
    top: 27vh;
    width: 24vw;
  }

  .mask-5 {
    --color-1: oklch(80% 0.3 106);
    --color-2: oklch(80% 0.3 90);
    --delay: 5.7;
    inset-inline-start: 20vw;
    top: 20vh;
    width: 26vw;
  }

  .mask-6 {
    --color-1: oklch(80% 0.3 136);
    --color-2: oklch(80% 0.3 10);
    --delay: 4.9;
    inset-inline-start: 65vw;
    top: 5vh;
    width: 35vw;
  }

  .mask-7 {
    --color-1: oklch(80% 0.2 246);
    --color-2: oklch(70% 0.1 110);
    --delay: 9.9;
    inset-inline-start: 30vw;
    top: 10vh;
    width: 20vw;
  }

  .mask-8 {
    --color-1: oklch(80% 0.3 236);
    --color-2: oklch(80% 0.3 110);
    --delay: 9.8;
    inset-inline-start: 55vw;
    top: 2vh;
    width: 12vw;
  }
}

@layer skyline {
  .skyline {
    position: fixed;
    display: flex;
    align-items: flex-end;
    bottom: 0;
    width: 100%;
    height: 50vh;
    max-height: 566px;
    .house {
      --background: #30292f;
      min-width: 120px;
      width: 20vw;
      height: 50%;
      padding: 1% 0;
      background: var(--background);
      &:nth-child(2),
      &:nth-child(4) {
        --background: #3a423b;
        height: 75%;
        .windows {
          display: block;
          height: 10%;
          &::before,
          &::after {
            display: none;
          }
          & div {
            width: 100%;
            aspect-ratio: unset;
          }
        }
      }
      &:nth-child(3) {
        height: 30%;
        .windows div {
          border-radius: 50%;
        }
      }
      &:nth-child(4) {
        --background: #2a2d34;
        height: 60%;
        .windows div {
          width: 60%;
          margin-inline: auto;
          border-radius: 5%;
        }
      }
      &:nth-child(5) {
        --background: #2a1f2d;
        .windows div {
          width: 40%;
          margin-inline: auto;
          border-radius: 5%;
        }
      }
    }
  }

  .windows {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-content: center;
    margin: 5% 0;
    width: 80%;
    margin-inline: auto;
    gap: 8%;
    & div,
    &::before,
    &::after {
      height: 100%;
      background: #dddbcb;
      aspect-ratio: 1;
      content: "";
    }
  }

  @keyframes fireworks {
    0% {
      transform: scale(0);
    }
    100% {
      transform: scale(7.4);
    }
  }
}

@layer base {
  body {
    background: #000;
    background-image: linear-gradient(
      to bottom in oklab,
      oklch(0% 0.4 222) 0% 0%,
      oklch(8% 0.3 248) 100% 100%
    );
    margin: 0;
    padding: 0;
    overflow: hidden;
  }

  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
}

.warning {
  position: fixed;
  top: 10vh;
  border: 3px solid #fff;
  padding: 2rem;
  color: #fff;
  font-family: sans-serif;
  display: none;
}

@media (prefers-reduced-motion) {
  *,
  *::before,
  *::after {
    animation: none;
  }
  .warning {
    display: block;
  }
}