.window-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  background: #3a3a3a;
  border: 3px solid #2a2520;
  border-top: 0px;
  box-shadow:
    inset 0 0 20px rgba(0, 0, 0, 0.8),
    0 10px 40px rgba(0, 0, 0, 0.9);
  overflow: hidden;
}

.window-frame::before {
  content: "";
  position: absolute;
  inset: -20px;
  border: 5px solid #1a1510;
  border-top: 0px;
  pointer-events: none;
  z-index: 10;
}

/* Cityscape view */
.cityscape {
  width: 100%;
  height: 100%;
  position: relative;
  background: linear-gradient(
    180deg,
    #1a2332 0%,
    #2a3a52 30%,
    #4a5a72 60%,
    #6a7a92 100%
  );
  overflow: hidden;
}

/* Sky with slight gradient */
.starfield {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  background: linear-gradient(180deg, #0a0f1a 0%, #1a2a3a 50%, #2a3a52 100%);
}

.building-windows {
  width: 100%;
  display: grid;

  > .window-light {
    width: 100%;
    aspect-ratio: 1/1;
  }
}

@mixin buildings-base {
  position: absolute;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: flex-end;

  @for $i from 1 through 20 {
    > .building:nth-child(#{$i}) {
      @if random(4) == 1 {
        opacity: 0;
      }

      > .building-windows {
        @for $j from 1 through 40 {
          > .window-light:nth-child(#{$j}) {
            @if random(2) == 1 {
              background: transparent;
              box-shadow: none;
            } @else {
              $color-choice: random(100);
              $light-color: null;

              @if $color-choice <= 85 {
                $hue: 40 + random(20); // 40-60
                $sat: 70 + random(30); // 70-100%
                $light: 50 + random(30); // 50-80%
                $light-color: hsl($hue, $sat * 1%, $light * 1%);
              } @else if $color-choice <= 95 {
                $hue: 320 + random(20); // 320-340 (pink range)
                $sat: 60 + random(40); // 60-100%
                $light: 60 + random(20); // 60-80%
                $light-color: hsl($hue, $sat * 1%, $light * 1%);
              } @else {
                $hue: 260 + random(40); // 260-300 (purple range)
                $sat: 50 + random(50); // 50-100%
                $light: 50 + random(30); // 50-80%
                $light-color: hsl($hue, $sat * 1%, $light * 1%);
              }

              background: $light-color;
              box-shadow: 0 0 10px $light-color;
            }
          }
        }
      }
    }
  }
}

.buildings-far {
  @include buildings-base;

  > .building {
    background: linear-gradient(180deg, #272629 0%, #2a3a52 100%);
    box-shadow:
      inset -2px 0 5px rgba(0, 0, 0, 0.1),
      0 0 10px rgba(42, 38, 31, 0.1);

    > .building-windows {
      width: 100%;
      height: 50%;
      opacity: 0.3;
      padding: 5%;
    }
  }

  @for $i from 1 through 20 {
    > .building:nth-child(#{$i}) {
      @if random(2) == 1 {
        $width: random(10) + 5;
        width: $width * 1%;
      } @else {
        $width: random(15) + 5;
        width: $width + 15px;
      }

      $height: random(60) + 30;
      height: $height * 1%;

      > .building-windows {
        grid-template-columns: repeat(#{random(3) + 3}, 1fr);

        > .window-light {
          aspect-ratio: #{0.5 + random(150) / 100};
        }
      }
    }
  }
}

.buildings-mid {
  @include buildings-base;

  > .building {
    background: linear-gradient(180deg, #201e22 0%, #2a3a52 100%);
    box-shadow:
      inset -2px 0 5px rgba(0, 0, 0, 0.1),
      0 0 10px rgba(42, 38, 31, 0.1);

    > .building-windows {
      width: 100%;
      height: 50%;
      opacity: 0.7;
      padding: 5%;
    }
  }

  @for $i from 1 through 20 {
    > .building:nth-child(#{$i}) {
      @if random(2) == 1 {
        $width: random(10) + 10;
        width: $width * 1%;
      } @else {
        $width: random(15) + 10;
        width: $width + 15px;
      }

      $height: random(20) + 30;
      height: $height * 1%;

      > .building-windows {
        grid-template-columns: repeat(#{random(3) + 3}, 1fr);

        > .window-light {
          aspect-ratio: #{0.5 + random(150) / 100};
        }
      }
    }
  }
}

.buildings-near {
  @include buildings-base;

  > .building {
    background: linear-gradient(180deg, #121113 0%, #182230 100%);
    box-shadow:
      inset -2px 0 5px rgba(0, 0, 0, 0.1),
      0 0 10px rgba(42, 38, 31, 0.1);

    > .building-windows {
      width: 100%;
      height: 50%;
      opacity: 0.8;
      padding: 5%;
    }
  }

  @for $i from 1 through 20 {
    > .building:nth-child(#{$i}) {
      @if random(2) == 1 {
        $width: random(3) * 7;
        width: $width * 1%;
      } @else {
        $width: random(10) + 50;
        width: $width + 15px;
      }

      $height: random(3) * 10;
      height: $height * 1%;

      > .building-windows {
        grid-template-columns: repeat(#{random(2) + 3}, 1fr);

        > .window-light {
          aspect-ratio: #{0.5 + random(150) / 100};
        }
      }
    }
  }
}

/* Buildings container */
.buildings {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60%;
  display: flex;
  align-items: flex-end;
  justify-content: space-around;

  > .building {
    animation: buildingGlow 4s ease-in-out infinite;
  }
}

.building {
  position: relative;
  background: linear-gradient(180deg, #1a1a2e 0%, #0a0a1e 100%);
  box-shadow:
    inset -2px 0 10px rgba(0, 0, 0, 0.5),
    0 0 20px rgba(255, 200, 100, 0.1);
}

/* Building windows */
.building-windows {
  gap: 10%;
  padding: 5% 5%;
}

.window-light {
  background: #ffd700;
  box-shadow: 0 0 10px #ffd700;
  animation: windowFlicker 5s ease-in-out infinite;
}

.window-light:nth-child(odd) {
  animation-delay: 0.5s;
}

.window-light:nth-child(3n) {
  animation-delay: 3s;
}

.window-light:nth-child(4n) {
  animation-delay: 5.5s;
}

@keyframes windowFlicker {
  0%,
  100% {
    opacity: 0.3;
  }
  50% {
    opacity: 0.9;
  }
}

@keyframes buildingGlow {
  0%,
  100% {
    box-shadow:
      inset -2px 0 10px rgba(0, 0, 0, 0.5),
      0 0 20px rgba(255, 200, 100, 0.1);
  }
  50% {
    box-shadow:
      inset -2px 0 10px rgba(0, 0, 0, 0.5),
      0 0 30px rgba(255, 200, 100, 0.2);
  }
}

/* Dirt and grime on window */
.window-grime {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      circle at 20% 30%,
      rgba(50, 40, 30, 0.2) 0%,
      transparent 40%
    ),
    radial-gradient(
      circle at 80% 60%,
      rgba(40, 35, 25, 0.15) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 50% 80%,
      rgba(45, 38, 28, 0.18) 0%,
      transparent 45%
    );
  pointer-events: none;
  z-index: 6;
}

/* Glass reflection */
.glass-reflection {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.1) 0%,
    transparent 30%,
    transparent 70%,
    rgba(255, 255, 255, 0.05) 100%
  );
  pointer-events: none;
  z-index: 7;
}

/* Ambient light from city */
.ambient-light {
  position: absolute;
  bottom: -50px;
  left: 50%;
  transform: translateX(-50%);
  width: 200%;
  height: 200px;
  background: radial-gradient(
    ellipse at center,
    rgba(255, 200, 100, 0.2) 0%,
    transparent 70%
  );
  filter: blur(40px);
  animation: ambientPulse 3s ease-in-out infinite;
}

@keyframes ambientPulse {
  0%,
  100% {
    opacity: 0.5;
  }
  50% {
    opacity: 0.8;
  }
}