/* Realistična zgrada — fiksni prikaz, skrol nadole = penjanje */

.building-scene {
  position: fixed;
  inset: var(--header-height) 0 0 0;
  z-index: 1;
  pointer-events: none;
}

.building-scene__viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #060a0e;
}

.building-scene__strip {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  will-change: transform;
}

.building-floor {
  height: var(--section-height);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}

.building-floor::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(8, 14, 20, 0.15) 0%,
    rgba(8, 14, 20, 0.05) 40%,
    rgba(8, 14, 20, 0.35) 100%
  );
}

.building-floor--0 {
  background-image: url("../assets/images/floors/floor-00-exterior.jpg");
  background-position: center 30%;
}

.building-floor--1 {
  background-image: url("../assets/images/floors/floor-01-lobby.jpg");
}

.building-floor--2 {
  background-image: url("../assets/images/floors/floor-02-office.jpg");
}

.building-floor--3 {
  background-image: url("../assets/images/floors/floor-03-meeting.jpg");
}

.building-floor--4 {
  background-image: url("../assets/images/floors/floor-05-rooftop.jpg");
  background-position: center 40%;
}

/* Prozorske štokove — realizam */
.building-scene__mullions {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.45) 0%, transparent 8%, transparent 92%, rgba(0, 0, 0, 0.45) 100%),
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent calc(25% - 1px),
      rgba(255, 255, 255, 0.06) calc(25% - 1px),
      rgba(255, 255, 255, 0.06) 25%
    ),
    repeating-linear-gradient(
      180deg,
      transparent 0,
      transparent calc(33.33% - 1px),
      rgba(255, 255, 255, 0.05) calc(33.33% - 1px),
      rgba(255, 255, 255, 0.05) 33.33%
    );
  opacity: 0.55;
  mix-blend-mode: overlay;
}

.building-scene__brand-glow {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(0, 136, 199, 0.18) 0%,
    transparent 45%,
    rgba(32, 196, 232, 0.08) 100%
  );
  mix-blend-mode: screen;
}

.building-scene__vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 50%, rgba(6, 10, 14, 0.45) 100%);
}

/* Mobil: pozadina u sekciji — skroluje zajedno sa tekstom, bez JS parallaxa */
@media (max-width: 47.99rem) {
  .building-scene {
    display: none;
  }

  .site-main .section {
    position: relative;
    isolation: isolate;
    background-color: var(--color-bg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  .site-main .section::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(
      180deg,
      rgba(8, 14, 20, 0.12) 0%,
      transparent 40%,
      rgba(8, 14, 20, 0.3) 100%
    );
  }

  .site-main .section__content {
    position: relative;
    z-index: 1;
  }

  .site-main .section[data-floor="0"] {
    background-image: url("../assets/images/floors/floor-00-exterior.jpg");
    background-position: center 30%;
  }

  .site-main .section[data-floor="1"] {
    background-image: url("../assets/images/floors/floor-01-lobby.jpg");
  }

  .site-main .section[data-floor="2"] {
    background-image: url("../assets/images/floors/floor-02-office.jpg");
  }

  .site-main .section[data-floor="3"] {
    background-image: url("../assets/images/floors/floor-03-meeting.jpg");
  }

  .site-main .section[data-floor="4"] {
    background-image: url("../assets/images/floors/floor-05-rooftop.jpg");
    background-position: center 40%;
  }
}

/* Desktop: zgrada lijevo, sadržaj desno */
@media (min-width: 48rem) {
  .building-scene {
    right: auto;
    width: var(--building-width);
    border-right: 1px solid var(--color-border);
    box-shadow: 8px 0 40px rgba(0, 0, 0, 0.35);
  }

  .building-scene__viewport::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 3rem;
    z-index: 3;
    background: linear-gradient(90deg, transparent, rgba(16, 26, 36, 0.9));
  }
}

@media (prefers-reduced-motion: reduce) {
  .building-scene__strip {
    will-change: auto;
  }
}