* {
  box-sizing: border-box;
}


html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}


body {
  margin: 0;
  overflow: hidden;
  background: #000;
}


/* =========================================================
   APARTMENT
   ========================================================= */

.apartment {
  position: relative;
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  overflow: hidden;
}


.apartment-image {
  position: absolute;
  inset: 0;

  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center center;
}


/* =========================================================
   LIVE ST. LOUIS ATMOSPHERE
   ========================================================= */

.window-atmosphere {
  position: absolute;

  z-index: 2;

  top: 0;
  left: 0;

  width: 100%;
  height: 100%;

  overflow: hidden;

  pointer-events: none;
}


/* =========================================================
   TIME / WEATHER TINT
   ========================================================= */

.weather-tint {
  position: absolute;

  inset: 0;

  background:
    rgba(
      10,
      20,
      45,
      var(--weather-darkness, 0)
    );

  opacity: 1;

  transition:
    background 120s ease,
    opacity 120s ease;
}


/* =========================================================
   SUNRISE / SUNSET WARMTH
   ========================================================= */

.weather-tint::after {
  content: "";

  position: absolute;

  inset: 0;

  background:
    radial-gradient(
      ellipse at 50% 75%,
      rgba(
        255,
        170,
        75,
        var(--sun-warmth, 0)
      ),
      rgba(
        255,
        115,
        40,
        calc(var(--sun-warmth, 0) * 0.35)
      ),
      transparent 75%
    );

  pointer-events: none;

  transition:
    opacity 120s ease;
}


/* =========================================================
   DEEP NIGHT SKY
   ========================================================= */

.window-atmosphere::before {
  content: "";

  position: absolute;

  top: 0;
  left: 0;

  width: 100%;
  height: 62%;

  background:
    linear-gradient(
      to bottom,
      rgba(
        5,
        14,
        42,
        var(--night-sky, 0)
      ),
      rgba(
        10,
        24,
        58,
        calc(var(--night-sky, 0) * 0.72)
      ),
      rgba(
        15,
        28,
        55,
        calc(var(--night-sky, 0) * 0.25)
      ),
      transparent
    );

  opacity: 1;

  transition:
    opacity 120s ease;

  pointer-events: none;
}


/* =========================================================
   CITY LIGHTS
   ========================================================= */

.city-lights {
  position: absolute;

  inset: 0;

  overflow: hidden;

  pointer-events: none;

  opacity:
    var(--city-lights-opacity, 0);

  transition:
    opacity 120s ease;
}


/* =========================================================
   LEFT WINDOW — ALIGNED TO ACTUAL GLASS
   ========================================================= */

.city-light-window-left {
  position: absolute;

  /*
    Actual visible glass area of the LEFT window.

    The previous position was too far left and too narrow.
    This places the light field inside the actual window
    rather than extending toward the wall.
  */

  left: 27.5%;
  top: 4.2%;

  width: 15.2%;
  height: 47.0%;

  overflow: hidden;

  pointer-events: none;

  /*
    Hide the horizontal sash so lights do not appear
    across the window frame.
  */

  -webkit-mask-image:
    linear-gradient(
      to bottom,
      #000 0%,
      #000 48%,
      transparent 48%,
      transparent 53%,
      #000 53%,
      #000 100%
    );

  mask-image:
    linear-gradient(
      to bottom,
      #000 0%,
      #000 48%,
      transparent 48%,
      transparent 53%,
      #000 53%,
      #000 100%
    );
}


/* =========================================================
   RIGHT WINDOW — MOVED AWAY FROM CENTER WALL
   ========================================================= */

.city-light-window-right {
  position: absolute;

  /*
    IMPORTANT:
    The previous left value of 46.7% placed a large
    portion of this light field on the WALL between
    the two windows.

    The actual right window begins much farther right.

    New position:
    approximately 53.8% of the viewport.

    This keeps the city lights inside the RIGHT window
    instead of floating over the center wall.
  */

  left: 53.8%;
  top: 4.2%;

  width: 13.7%;
  height: 47.0%;

  overflow: hidden;

  pointer-events: none;

  /*
    Hide the horizontal sash.
  */

  -webkit-mask-image:
    linear-gradient(
      to bottom,
      #000 0%,
      #000 48%,
      transparent 48%,
      transparent 53%,
      #000 53%,
      #000 100%
    );

  mask-image:
    linear-gradient(
      to bottom,
      #000 0%,
      #000 48%,
      transparent 48%,
      transparent 53%,
      #000 53%,
      #000 100%
    );
}


/* =========================================================
   INDIVIDUAL CITY LIGHTS
   ========================================================= */

.city-light {
  position: absolute;

  display: block;

  width:
    var(--light-size, 2px);

  height:
    var(--light-size, 2px);

  border-radius: 50%;

  background:
    rgba(
      255,
      210,
      120,
      0.9
    );

  box-shadow:
    0 0 3px
    rgba(
      255,
      210,
      120,
      0.65
    );

  opacity:
    var(--light-opacity, 0.5);

  animation:
    city-light-twinkle
    var(--twinkle-speed, 5s)
    ease-in-out
    infinite alternate;
}


/* =========================================================
   SUBTLE NATURAL FLICKER
   ========================================================= */

@keyframes city-light-twinkle {

  from {
    opacity:
      calc(
        var(--light-opacity, 0.5) * 0.55
      );
  }

  to {
    opacity:
      var(--light-opacity, 0.5);
  }
}

/* =========================================================
   WINDOW WEATHER EFFECT REGION
   ========================================================= */

.weather-effects {
  position: absolute;

  top: 0;
  left: 0;

  width: 100%;
  height: 60%;

  overflow: hidden;

  pointer-events: none;
}


/* =========================================================
   LIGHTNING
   ========================================================= */

.lightning {
  position: absolute;

  top: 0;
  left: 0;

  width: 100%;
  height: 60%;

  background:
    rgba(
      225,
      240,
      255,
      0.35
    );

  opacity: 0;

  transition:
    opacity 0.08s linear;

  pointer-events: none;
}


.lightning.active {
  opacity: 1;
}


/* =========================================================
   WEATHER CHARACTER
   ========================================================= */

.window-atmosphere.rain .weather-tint {
  filter:
    saturate(0.72);
}


.window-atmosphere.storm .weather-tint {
  filter:
    saturate(0.55)
    contrast(1.08);
}


.window-atmosphere.snow .weather-tint {
  filter:
    saturate(0.78);
}


.window-atmosphere.cloudy .weather-tint {
  filter:
    saturate(0.82);
}


.window-atmosphere.fog .weather-tint {
  filter:
    saturate(0.65);
}


/* =========================================================
   NIGHT
   ========================================================= */

.window-atmosphere.night .weather-tint {
  background:
    rgba(
      8,
      18,
      48,
      var(--weather-darkness, 0.45)
    );

  mix-blend-mode: normal;
}


/* =========================================================
   DAY
   ========================================================= */

.window-atmosphere.day .weather-tint {
  mix-blend-mode: normal;
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .rain-drop,
  .snow-flake {
    animation-play-state: paused;
  }

  .weather-tint,
  .weather-tint::after,
  .window-atmosphere::before,
  .city-lights {
    transition: none;
  }

  .city-light {
    animation: none;
  }
}


/* =========================================================
   INTERACTIVE COMPUTER
   ========================================================= */

.apartment {
  position: relative;
}


.computer-hotspot {
  position: absolute;

  left: 59.4%;
  top: 46.5%;

  width: 13%;
  height: 11%;

  display: block;

  z-index: 5;

  cursor: pointer;
  text-decoration: none;
}


.computer-screen-effect {
  position: absolute;

  inset: 0;

  display: flex;

  align-items: center;
  justify-content: center;

  opacity: 0;

  background: transparent;

  box-shadow: none;

  transition:
    opacity 0.18s ease;
}


.computer-hotspot:hover .computer-screen-effect,
.computer-hotspot:focus-visible .computer-screen-effect {
  opacity: 1;
}


/* =========================================================
   WINDOWS 98-STYLE HOURGLASS
   ========================================================= */

.windows-hourglass {
  width: 14%;

  max-width: 24px;
  min-width: 10px;

  height: auto;

  opacity: 0;

  transform-origin: center;

  transform:
    translate(-7px, -5px);

  filter:
    drop-shadow(
      0 0 2px
      rgba(
        255,
        255,
        255,
        0.35
      )
    );

  transition:
    opacity 0.12s ease;
}


.computer-hotspot:hover .windows-hourglass,
.computer-hotspot:focus-visible .windows-hourglass {
  opacity: 1;

  animation:
    windows-hourglass-flip
    2.4s
    linear
    infinite;
}


@keyframes windows-hourglass-flip {

  0% {
    transform:
      translate(-7px, -5px)
      rotate(0deg);
  }

  45% {
    transform:
      translate(-7px, -5px)
      rotate(0deg);
  }

  50% {
    transform:
      translate(-7px, -5px)
      rotate(180deg);
  }

  95% {
    transform:
      translate(-7px, -5px)
      rotate(180deg);
  }

  100% {
    transform:
      translate(-7px, -5px)
      rotate(360deg);
  }
}


.hourglass-frame {
  fill: none;

  stroke: #202020;

  stroke-width: 5;

  stroke-linecap: square;
  stroke-linejoin: round;
}


.hourglass-sand-top,
.hourglass-sand-bottom {
  fill: #d5a936;
}


.hourglass-sand-stream {
  fill: none;

  stroke: #d5a936;

  stroke-width: 3;

  stroke-linecap: round;
}


/* =========================================================
   INTERACTIVE AKAI MPC2000XL
   ========================================================= */

.mpc-hotspot {
  position: absolute;

  left: 87.3%;
  top: 68.5%;

  width: 12.3%;
  height: 18%;

  z-index: 6;

  display: block;

  cursor: pointer;

  background: transparent;

  border: none;
  padding: 0;

  appearance: none;
}


/* =========================================================
   MPC LCD SCREEN GLOW
   ========================================================= */

.mpc-hotspot::after {
  content: "";

  position: absolute;

  top: 1%;
  left: 57%;

  width: 25%;
  height: 11%;

  border-radius: 2px;

  transform:
    rotate(15deg);

  transform-origin:
    center center;

  background:
    rgba(
      210,
      225,
      145,
      0.05
    );

  box-shadow:
    0 0 0
    rgba(
      190,
      215,
      120,
      0
    ),
    inset 0 0 0
    rgba(
      220,
      235,
      160,
      0
    );

  opacity: 0;

  transition:
    opacity 0.25s ease,
    box-shadow 0.25s ease,
    background 0.25s ease;

  pointer-events: none;
}


/* =========================================================
   MPC HOVER STATE
   ========================================================= */

.mpc-hotspot:hover::after,
.mpc-hotspot:focus-visible::after {

  opacity: 1;

  background:
    rgba(
      205,
      225,
      135,
      0.20
    );

  box-shadow:
    0 0 5px
    rgba(
      205,
      225,
      135,
      0.55
    ),
    0 0 12px
    rgba(
      180,
      210,
      110,
      0.25
    ),
    inset 0 0 5px
    rgba(
      225,
      240,
      170,
      0.35
    );
}


/* =========================================================
   MPC ACCESSIBILITY / FOCUS
   ========================================================= */

.mpc-hotspot:focus {
  outline: none;
}


.mpc-hotspot:focus-visible {
  outline:
    1px solid
    rgba(
      205,
      225,
      135,
      0.35
    );

  outline-offset: 2px;
}


/* =========================================================
   REDUCED MOTION — INTERACTIVE ELEMENTS
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .computer-hotspot:hover .windows-hourglass,
  .computer-hotspot:focus-visible .windows-hourglass {

    animation: none;

    transform:
      rotate(180deg);
  }

  .mpc-hotspot::after {
    transition: none;
  }
}


/* =========================================================
   BEATS / MPC PAGE
   ========================================================= */

.beats-page {
  position: relative;

  width: 100vw;
  height: 100vh;

  overflow: hidden;

  background: #111;
}


/* =========================================================
   BLURRED MPC BACKGROUND
   ========================================================= */

.beats-background {
  position: absolute;

  inset: -30px;

  z-index: 0;

  background-image:
    url("MPC-Edit.png");

  background-size: cover;

  background-position:
    center center;

  filter:
    blur(20px);

  opacity: 0.45;

  transform:
    scale(1.08);

  pointer-events: none;
}


/* =========================================================
   MAIN MPC IMAGE
   ========================================================= */

.beats-image {
  position: absolute;

  inset: 0;

  z-index: 1;

  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  object-position:
    center center;

  margin: 0;
}


/* =========================================================
   BACK TO APARTMENT
   ========================================================= */

.back-to-apartment {
  position: absolute;

  top: 18px;
  left: 18px;

  z-index: 10;

  padding: 7px 11px;

  font-family:
    Arial,
    sans-serif;

  font-size: 13px;

  line-height: 1;

  color:
    rgba(
      255,
      255,
      255,
      0.75
    );

  background:
    rgba(
      0,
      0,
      0,
      0.35
    );

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.18
    );

  border-radius: 3px;

  text-decoration: none;

  opacity: 0.65;

  transition:
    opacity 0.2s ease,
    background 0.2s ease,
    border-color 0.2s ease;
}


.back-to-apartment:hover,
.back-to-apartment:focus-visible {
  opacity: 1;

  background:
    rgba(
      0,
      0,
      0,
      0.65
    );

  border-color:
    rgba(
      255,
      255,
      255,
      0.35
    );
}


.back-to-apartment:focus {
  outline: none;
}