/* A continuous, front-facing skyline shares the flat scene's horizon. */
.city-3d {
  position: absolute; left: -1px; right: -1px; bottom: -1px; height: 47%;
  min-height: 0; overflow: hidden; pointer-events: none;
  opacity: 0; transition: opacity 1.1s ease;
  contain: layout paint; isolation: isolate;
}
.city-3d.active { opacity: 1; }
.city-3d-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  opacity: 0; transition: opacity 1.1s ease;
}
.city-3d-canvas.is-front { opacity: 1; }
body[data-scene-view="3d"] .scene { opacity: 0!important; }
.city-3d-preview { width: 100%; height: 100%; display: block; }
.scene-theme-art .city-3d-preview,.theme-card-art .city-3d-preview {
  background: linear-gradient(155deg,#35586b,#91a5a2);
}
.theme-thumbnail .city-3d-preview { background: linear-gradient(155deg,#36586a,#819993); }
@media (max-width: 720px) {
  .city-3d { height: 45%; }
}
@media (max-width: 720px) and (max-height: 700px) {
  .city-3d { height: 44%; }
}
@media (prefers-reduced-motion: reduce) {
  .city-3d,.city-3d-canvas { transition: none; }
}
.city-3d[data-motion="reduced"],.city-3d[data-motion="off"],
.city-3d[data-motion="reduced"] .city-3d-canvas,.city-3d[data-motion="off"] .city-3d-canvas { transition: none; }