.night-city {
  --night-city-dark: #0b0a11;
  --night-city-window-x: 69%;
  --night-city-window-y: 45.7%;
  background: var(--night-city-dark);
}

.night-city-stage {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: end;
  height: clamp(410px, 78svh, 710px);
  overflow: hidden;
  container-type: size;
}

.night-city-visual {
  position: absolute;
  z-index: -1;
  inset: 0;
  overflow: hidden;
}

.night-city-visual::before,
.night-city-visual::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  content: '';
  pointer-events: none;
}

.night-city-visual::before {
  background:
    linear-gradient(0deg, #0b0a11 0%, #0b0a1199 27%, transparent 60%),
    linear-gradient(90deg, #0b0a11a8, #0b0a1130 46%, transparent 74%);
}

.night-city-visual::after {
  background: var(--night-city-dark);
  opacity: var(--city-fade, 0);
}

.night-city-camera {
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(100cqw, 177.69cqh);
  aspect-ratio: 1672 / 941;
  transform-origin: var(--night-city-window-x) var(--night-city-window-y);
  transform: translate(-50%, -50%);
}

.night-city-camera picture,
.night-city-camera img {
  display: block;
  width: 100%;
  height: 100%;
}

.night-city-camera img { object-fit: cover; }

.night-city-glint {
  position: absolute;
  top: 51.7%;
  left: 70.2%;
  width: 4px;
  aspect-ratio: 1;
  border-radius: 100%;
  background: #f3f2ff;
  box-shadow: 0 0 7px 2px #dccbff9e, 0 0 19px 5px #d1c5fa2e;
  transform: translate(-50%, -50%);
}

.night-city-copy {
  padding-block: 42px clamp(42px, 7vh, 82px);
}

.night-city-copy h2 {
  max-width: 14ch;
  color: #f1edf6;
  font-size: clamp(2.3rem, 5vw, 5.3rem);
  line-height: .99;
  text-wrap: balance;
}

.night-city-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 20px;
  margin-top: 22px;
}

.night-city-actions .button { margin: 0; }
.night-city-actions .resource-link { color: #e2d8fa; }

@media (min-width: 761px) and (prefers-reduced-motion: no-preference) {
  .night-city[data-city-motion] { min-height: 175svh; }
  .night-city[data-city-motion] .night-city-stage {
    position: sticky;
    top: 0;
    height: 100svh;
  }
  .night-city[data-city-motion] .night-city-camera {
    transform: translate(
      calc(-50% - 19% * var(--city-progress, 0)),
      calc(-50% + 4.3% * var(--city-progress, 0))
    ) scale(calc(1 + 3.5 * var(--city-progress, 0)));
    will-change: transform;
  }
}

@media (max-width: 760px) {
  .night-city-stage { height: clamp(410px, 78svh, 630px); }
  .night-city-camera {
    width: max(100cqw, 78.11cqh);
    aspect-ratio: 735 / 941;
  }
  .night-city-glint { left: 46.7%; }
  .night-city-copy h2 { max-width: 13ch; }
  .night-city-visual::before {
    background: linear-gradient(0deg, #0b0a11 0%, #0b0a11b5 23%, transparent 67%);
  }
}