/* ============================================================
   City Panorama — Decorative Background Layer
   ============================================================ */


/* ── Cloud Layer (upper viewport) ────────────────────────── */
#cp-clouds-bg {
  position: fixed;
  top: 72px;
  left: 0;
  width: 100vw;
  height: 32vh;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.5s ease;
}

/* ── Building Strip (lower viewport) ─────────────────────── */
#city-panorama-scene {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: linear-gradient(180deg, #e8f5ef 0%, #c8e6d4 100%);
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

/* Fade top of strip into page background */
#city-panorama-scene::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 38%;
  background: linear-gradient(to bottom, #faf9f5 0%, transparent 100%);
  z-index: 10;
  pointer-events: none;
}


/* ── Clouds ──────────────────────────────────────────────── */
.cp-cloud {
  position: absolute;
  background: white;
  border-radius: 40px;
  opacity: .5;
  z-index: 2;
}
.cp-cloud::before,
.cp-cloud::after {
  content: '';
  position: absolute;
  background: white;
  border-radius: 50%;
}

.cp-c1 { width: 80px; height: 20px; top: 10%; left: 5%; animation: cp-drift 20s linear infinite; }
.cp-c1::before { width: 30px; height: 30px; top: -14px; left: 10px; }
.cp-c1::after  { width: 20px; height: 20px; top:  -9px; left: 44px; }

.cp-c2 { width: 110px; height: 24px; top: 20%; left: 52%; animation: cp-drift 26s linear infinite reverse; }
.cp-c2::before { width: 42px; height: 42px; top: -20px; left: 16px; }
.cp-c2::after  { width: 28px; height: 28px; top: -13px; left: 64px; }

.cp-c3 { width: 56px; height: 14px; top: 6%; left: 30%; animation: cp-drift 22s linear infinite; animation-delay: -9s; }
.cp-c3::before { width: 22px; height: 22px; top: -12px; left:  7px; }
.cp-c3::after  { width: 15px; height: 15px; top:  -7px; left: 32px; }

@keyframes cp-drift {
  from { transform: translateX(-200px); }
  to   { transform: translateX(calc(100vw + 200px)); }
}

/* ── Building Stage ──────────────────────────────────────── */
#cp-stage {
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: 100%;
  overflow: visible;
}

#cp-strip-bg,
#cp-strip-fg {
  position: absolute;
  bottom: 0; left: 0;
  height: 100%;
  display: flex;
  align-items: flex-end;
  padding: 0 40px;
  will-change: transform;
}

/* Buildings */
.cp-bld {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  padding: 0 clamp(10px, 2vw, 24px);
}
.cp-bld svg { display: block; }

/* Monochrome color overrides — all accents map to green family */
.cp-bld svg .ac  { fill: #1e6640; }
.cp-bld svg .ac2 { fill: #1e6640; }
.cp-bld svg .mid { fill: #5a9e76; }

/* ── Ground ──────────────────────────────────────────────── */
.cp-ground {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 24px;
  background: #c8e6d4;
  border-top: 2px solid rgba(0, 109, 55, 0.15);
  z-index: 8;
}

/* ── Mobile ──────────────────────────────────────────────── */
@media (max-width: 640px) {
  #cp-clouds-bg {
    top: 64px;
  }
}