.nightSky {
  animation: cameraBreathe 38s ease-in-out infinite alternate;
  transform-origin: 62% 30%;
  will-change: transform;
}

@keyframes cameraBreathe {
  from { transform: scale(1) translateX(0); }
  to { transform: scale(1.035) translateX(-.6%); }
}

.scene::before {
  background:
    linear-gradient(180deg,
      transparent 44%,
      rgba(96, 130, 168, .11) 60%,
      rgba(6, 16, 30, .18) 76%,
      rgba(4, 14, 27, .46));
}

.streetWrap::before {
  background:
    linear-gradient(180deg, rgba(120, 160, 205, .1), rgba(7, 18, 31, .34) 40%, rgba(4, 12, 22, .5)),
    repeating-linear-gradient(90deg, transparent 0 68px, rgba(241, 215, 155, .06) 69px 71px),
    linear-gradient(180deg, #232f3b, #131c26);
  box-shadow: inset 0 1px rgba(190, 215, 240, .22);
}

.nightSky::after {
  display: block;
  top: auto;
  left: auto;
  width: auto;
  height: auto;
  inset: -30% -12% 0;
  background:
    repeating-linear-gradient(103deg,
      transparent 0 44px,
      rgba(196, 220, 248, .05) 44px 45px,
      rgba(196, 220, 248, .13) 45px 46px,
      transparent 46px 89px);
  box-shadow: none;
  opacity: .55;
  animation: nightRain .9s linear infinite;
  pointer-events: none;
}

@keyframes nightRain {
  to { transform: translate3d(-34px, 132px, 0); }
}

.street::after {
  content: "";
  position: absolute;
  z-index: 30;
  inset: -10% -4% 0;
  background:
    repeating-linear-gradient(106deg,
      transparent 0 72px,
      rgba(205, 228, 252, .06) 72px 74px,
      rgba(205, 228, 252, .15) 74px 76px,
      transparent 76px 145px);
  opacity: .5;
  animation: nearRain .58s linear infinite;
  pointer-events: none;
}

@keyframes nearRain {
  to { transform: translate3d(-48px, 152px, 0); }
}

.horizonGlow {
  display: block;
  z-index: 6;
  top: auto;
  right: -4%;
  bottom: calc(var(--deck-h, 260px) - 18px);
  left: -4%;
  height: 96px;
  background:
    radial-gradient(58% 120% at 22% 100%, rgba(173, 196, 220, .16), transparent 70%),
    radial-gradient(46% 100% at 62% 100%, rgba(173, 196, 220, .12), transparent 72%),
    radial-gradient(50% 110% at 88% 100%, rgba(173, 196, 220, .15), transparent 70%);
  filter: blur(7px);
  opacity: .5;
  animation: groundMist 24s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes groundMist {
  from { transform: translateX(-2.5%); }
  to { transform: translateX(2.5%); }
}

.moon {
  display: block;
  top: 4%;
  right: 2%;
  width: clamp(150px, 24vw, 280px);
  height: clamp(150px, 24vw, 280px);
  border: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(190, 240, 230, .2), rgba(160, 220, 215, .07) 46%, transparent 70%);
  box-shadow: none;
  filter: blur(3px);
  animation: moonBreathe 7.5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes moonBreathe {
  0%, 100% { opacity: .7; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.07); }
}

.farCity {
  inset: 4% -18% auto;
  bottom: auto;
  display: block;
  height: 34%;
  clip-path: none;
  background:
    radial-gradient(40% 55% at 18% 40%, rgba(150, 180, 215, .11), transparent 70%),
    radial-gradient(50% 60% at 55% 62%, rgba(140, 170, 205, .08), transparent 72%),
    radial-gradient(36% 50% at 84% 32%, rgba(150, 180, 215, .1), transparent 70%);
  filter: blur(11px);
  opacity: .55;
  transform: none;
  animation: cloudDrift 44s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes cloudDrift {
  from { transform: translateX(-3.5%); }
  to { transform: translateX(3.5%); }
}

.farCity.farCityRight {
  inset: 3% 0 auto;
  height: 42%;
  background:
    radial-gradient(2px 2px at 11% 24%, rgba(255, 246, 218, .9), transparent 60%),
    radial-gradient(1.6px 1.6px at 27% 12%, rgba(233, 242, 255, .85), transparent 60%),
    radial-gradient(2px 2px at 44% 30%, rgba(255, 246, 218, .8), transparent 60%),
    radial-gradient(1.5px 1.5px at 58% 9%, rgba(233, 242, 255, .9), transparent 60%),
    radial-gradient(1.8px 1.8px at 71% 26%, rgba(255, 246, 218, .85), transparent 60%),
    radial-gradient(1.4px 1.4px at 86% 14%, rgba(233, 242, 255, .8), transparent 60%),
    radial-gradient(2.1px 2.1px at 34% 52%, rgba(255, 246, 218, .7), transparent 60%),
    radial-gradient(1.5px 1.5px at 64% 48%, rgba(233, 242, 255, .75), transparent 60%);
  filter: none;
  opacity: .4;
  animation: starTwinkle 3.8s ease-in-out infinite alternate;
}

@keyframes starTwinkle {
  from { opacity: .16; }
  to { opacity: .75; }
}

.farCity.farCityRight::after {
  content: "";
  position: absolute;
  top: 22%;
  left: -6%;
  width: 74px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 250, 230, .95), transparent);
  opacity: 0;
  animation: shootingStar 17s linear infinite;
}

@keyframes shootingStar {
  0%, 90% { opacity: 0; transform: translate3d(0, 0, 0) rotate(10deg); }
  91.5% { opacity: .9; }
  96% { opacity: 0; transform: translate3d(58vw, 10vw, 0) rotate(10deg); }
  100% { opacity: 0; }
}

.road {
  display: block;
  inset: 0 0 32%;
  height: auto;
  background: radial-gradient(80% 62% at 68% 18%, rgba(122, 192, 208, .12), transparent 70%);
  opacity: .35;
  animation: skyGlowPulse 13s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes skyGlowPulse {
  from { opacity: .18; transform: translateX(-2%); }
  to { opacity: .75; transform: translateX(2%); }
}

.fxLayer::before {
  content: "";
  position: absolute;
  inset: 0 0 calc(var(--deck-h, 260px) - 34px);
  background:
    radial-gradient(125% 92% at 50% 34%, transparent 58%, rgba(4, 10, 22, .26) 100%),
    linear-gradient(180deg, rgba(24, 62, 92, .09), transparent 38% 68%, rgba(255, 168, 66, .05));
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .nightSky::after,
  .street::after,
  .farCity.farCityRight::after { display: none; }

  .horizonGlow,
  .moon,
  .farCity,
  .farCity.farCityRight,
  .road,
  .nightSky { animation: none; }
}