/* Nube que destella y stack sutil entre los edificios */

.dsmx-skyline-scene {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.dsmx-cloud {
  opacity: 0.72;
}

.dsmx-cloud-glow {
  opacity: 0;
  mix-blend-mode: screen;
}

.dsmx-stack {
  opacity: 0;
}

.dsmx-gear-spin,
.dsmx-chip {
  transform-box: fill-box;
  transform-origin: center;
}

.dsmx-windows rect {
  opacity: 0.38;
}

.dsmx-skyline-scene.is-playing .dsmx-cloud {
  animation: dsmx-cloud-flash 3.8s ease-out 1 both;
}

.dsmx-skyline-scene.is-playing .dsmx-cloud-glow {
  animation: dsmx-cloud-wash 3.8s ease-out 1 both;
}

.dsmx-skyline-scene.is-playing .dsmx-stack {
  animation: dsmx-stack-in 3.8s ease-out 1 both;
}

.dsmx-skyline-scene.is-playing .dsmx-gear--cw {
  animation: dsmx-spin-cw 3.8s linear 1;
}

.dsmx-skyline-scene.is-playing .dsmx-gear--ccw {
  animation: dsmx-spin-ccw 3.8s linear 1;
}

.dsmx-skyline-scene.is-playing .dsmx-windows rect:nth-child(odd) {
  animation: dsmx-window-soft 3.8s ease-out 1 both;
}

@keyframes dsmx-cloud-flash {
  0% {
    opacity: 0.7;
  }
  14% {
    opacity: 1;
  }
  100% {
    opacity: 0.72;
  }
}

@keyframes dsmx-cloud-wash {
  0%,
  100% {
    opacity: 0;
  }
  16% {
    opacity: 0.28;
  }
  40% {
    opacity: 0.1;
  }
}

@keyframes dsmx-stack-in {
  0% {
    opacity: 0;
  }
  18% {
    opacity: 0.88;
  }
  62% {
    opacity: 0.7;
  }
  100% {
    opacity: 0;
  }
}

@keyframes dsmx-spin-cw {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(120deg);
  }
}

@keyframes dsmx-spin-ccw {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-140deg);
  }
}

@keyframes dsmx-window-soft {
  0%,
  100% {
    opacity: 0.38;
  }
  22%,
  48% {
    opacity: 0.8;
  }
}

.dsmx-skyline-scene.is-static .dsmx-stack {
  opacity: 0.35;
}

.dsmx-skyline-scene.is-static .dsmx-cloud-glow {
  opacity: 0.08;
}

@media (prefers-reduced-motion: reduce) {
  .dsmx-skyline-scene .dsmx-stack {
    opacity: 0.32 !important;
  }

  .dsmx-skyline-scene .dsmx-cloud-glow {
    opacity: 0.06 !important;
  }
}