.scene {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #68585d;
  transition: background 0.8s ease;
}

.scene::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 55vh;
  z-index: -1;
  transition: background 0.8s ease;
}

.scene[data-time="day"]::before {
  background: linear-gradient(156deg,
    rgba(84, 58, 180, 1) 0%,
    rgba(166, 65, 114, 1) 21%,
    rgba(227, 111, 15, 1) 65%,
    rgba(253, 177, 29, 1) 94%
  );
}

.scene[data-time="night"]::before {
  background: linear-gradient(156deg,
    #0a0a1a 0%,
    #0d0d30 30%,
    #101040 60%,
    #080820 100%
  );
}

.scene[data-time="twilight"]::before {
  background: linear-gradient(156deg,
    #1a0e2e 0%,
    #3d1a4a 25%,
    #7a2e50 55%,
    #c45a30 85%
  );
}

.scene[data-time="day"] {
  background: #68585d;
}
.scene[data-time="night"] {
  background: #000000;
}
.scene[data-time="twilight"] {
  background: #1a0e1a;
}