/* Building — vertical single-column stack of units at full scale.
   The tower body is room-width. Each unit has a balcony extending
   left and right of the room, with a small rail at the outer end.
   Backdrop is a misty Pacific-NW mountain scene. */

html {
  background: #F4EAD0;       /* fallback — seen only if backdrop fails */
}
body.building-page {
  background: transparent;    /* let the fixed backdrop show through */
  min-height: 100vh;
  position: relative;
}

/* backdrop — fixed to viewport, stays put as the tower scrolls past it.
   Using a positioned element rather than background-attachment: fixed,
   which doesn't play well with ancestor perspective transforms. */
body.building-page .backdrop {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: url('./mist.svg?v=1') center bottom / cover no-repeat, #F4EAD0;
  z-index: 0;
  pointer-events: none;
}

.building-scene {
  position: relative;
  z-index: 1;           /* scene sits above the fixed backdrop */
}

.building-scene {
  perspective: 2400px;
  perspective-origin: 50% 20%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 20px 120px;
  gap: 48px;
  min-height: 100vh;
  position: relative;
  /* shoji-in: when arriving from the welcome page, slide the tower in
     from the right. Triggered by an animation that runs once on load. */
  animation: tower-shoji-in 0.55s cubic-bezier(0.4, 0, 0.2, 1) both;
}
@keyframes tower-shoji-in {
  from { transform: translateX(8%); opacity: 0; }
  to   { transform: translateX(0);  opacity: 1; }
}
/* shoji-out: leaving the tower (e.g., via dropdown to welcome) */
body.exiting .building-scene {
  animation: tower-shoji-out 0.45s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes tower-shoji-out {
  to { transform: translateX(8%); opacity: 0; }
}

/* opaque tower body — a column of warm cream with a subtle 45° lattice.
   Sits behind the rooms/gaps so the gap between units reads as tower
   structure, not transparent sky. */
.building-scene::before {
  content: '';
  position: absolute;
  top: 56px;          /* just under the roof */
  bottom: 158px;      /* just above the foundation */
  left: 50%;
  width: 640px;
  transform: translateX(-50%);
  background:
    repeating-linear-gradient(45deg,
      rgba(60, 40, 20, 0.09) 0px 1px,
      transparent 1px 16px),
    repeating-linear-gradient(-45deg,
      rgba(60, 40, 20, 0.09) 0px 1px,
      transparent 1px 16px),
    linear-gradient(180deg, #D4C49C 0%, #C0AE85 100%);
  box-shadow:
    0 0 24px rgba(0, 0, 0, 0.10),
    inset 2px 0 0 rgba(255, 255, 255, 0.12),
    inset -2px 0 0 rgba(0, 0, 0, 0.10);
  z-index: 0;
  pointer-events: none;
}

/* rooms + roof + foundation sit above the tower body */
.building-scene > .tower-roof,
.building-scene > .tower-foundation,
.building-scene > .floor-chunk {
  position: relative;
  z-index: 1;
}

/* Floors still exist as markup groupings, vertical now — no explicit divider */
.building-scene .floor-chunk {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  padding: 0;
  margin: 0;
  min-height: 0;
}

/* Room slot: room-width, height expands when unit opens so units below
   push down cleanly (the tower's physics is honest — the building grows
   to accommodate the fallen wall). */
.building-scene .room-slot {
  position: relative;
  width: 640px;
  height: 420px;
  transition: height 1.3s cubic-bezier(0.4, 0.0, 0.2, 1);
  flex-shrink: 0;
}
.building-scene .room-slot.is-expanded {
  height: 798px;
}

/* Balcony — extends the room's base left and right. Rail posts at the
   outer ends match the banner/footer baseboard height (42px). Stays
   visible at the hinge line when the unit opens. */
.building-scene .room-slot .balcony {
  position: absolute;
  top: 420px;            /* at the bottom of the room, at the hinge line */
  left: -72px;
  right: -72px;
  height: 7px;
  background: linear-gradient(180deg,
    #B09976 0%,
    #927D56 60%,
    #70603E 100%);
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  border-radius: 1px 1px 2px 2px;
  pointer-events: none;
  z-index: 3;
}

/* no rails in v1 — elastic-tower framing (not apartment building).
   Simple ledge only. Shipworm patterns / driftscript land here later. */

/* No transform on rooms inside the building */
.building-scene .room-slot .room { transform: none; }

/* Roof cap — room-width band at top of the tower */
.tower-roof {
  width: 640px;
  height: 16px;
  background: linear-gradient(180deg,
    #9C8764 0%,
    #7A6A4A 60%,
    #5E4F32 100%);
  border-radius: 3px 3px 0 0;
  box-shadow:
    0 4px 10px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
  position: relative;
  z-index: 1;
  margin-bottom: 4px;
}

/* Foundation — room-width plinth at the base of the tower. Slightly wider
   for visual weight and stability. */
.tower-foundation {
  width: 680px;
  height: 28px;
  background: linear-gradient(180deg,
    #3E3222 0%,
    #221A10 100%);
  border-radius: 0 0 3px 3px;
  box-shadow:
    0 10px 20px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  position: relative;
  z-index: 1;
  margin-top: 16px;
}

/* flap drop + balcony overflow allowed */
.building-scene,
.building-scene .floor-chunk,
.building-scene .room-slot {
  overflow: visible;
}