.mh-iso-sep__sky {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  z-index: 1;
  overflow: hidden;
  contain: paint;
  background: linear-gradient(180deg, #081127 0%, #12203f 56%, #20365d 100%);
}

.mh-iso-sep__sky::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      #01314B 0%,
      #01314B var(--mh-iso-top-dark-fade, 32%),
      rgba(1, 49, 75, 0.76) calc(var(--mh-iso-top-dark-fade, 32%) + 10%),
      rgba(1, 49, 75, 0) calc(var(--mh-iso-top-dark-fade, 32%) + 28%)
    );
}

.mh-iso-sep__sky-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  will-change: opacity;
  animation-duration: var(--mh-iso-cycle-duration, 120s);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-delay: var(--mh-iso-cycle-delay, 0s);
}

.mh-iso-sep__sky-layer--day {
  background: linear-gradient(180deg, #57a4e7 0%, #7ec0ef 54%, #a9d8f5 100%);
  animation-name: mh-iso-sky-day;
}

.mh-iso-sep__sky-layer--dawn {
  background: linear-gradient(180deg, #915f67 0%, #ca8a69 50%, #f2c48c 100%);
  animation-name: mh-iso-sky-dawn;
}

.mh-iso-sep__sky-layer--dusk {
  background: linear-gradient(180deg, #5e4264 0%, #8e5b68 48%, #c07a66 100%);
  animation-name: mh-iso-sky-dusk;
}

@keyframes mh-iso-sky-day {
  0% { opacity: 0; }
  16% { opacity: 0; }
  28% { opacity: 1; }
  56% { opacity: 1; }
  68% { opacity: 0; }
  100% { opacity: 0; }
}

@keyframes mh-iso-sky-dawn {
  0% { opacity: 0; }
  8% { opacity: 0; }
  18% { opacity: 0.9; }
  30% { opacity: 0; }
  100% { opacity: 0; }
}

@keyframes mh-iso-sky-dusk {
  0% { opacity: 0; }
  58% { opacity: 0; }
  72% { opacity: 0.88; }
  84% { opacity: 0; }
  100% { opacity: 0; }
}