.mh-iso-sep {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--mh-iso-scene-height, calc(var(--mh-iso-grass-height, 120px) + 168px));
  pointer-events: none;
  z-index: var(--mh-iso-scene-z-index, 1);
  overflow: visible;
  contain: layout;
  opacity: 1;
  visibility: visible;
  transition: opacity 220ms ease;
}

.mh-iso-sep-host.mh-iso-sep-full-yes .mh-iso-sep {
  top: 0;
  bottom: 0;
  height: auto;
}

.mh-iso-sep__sticky-stage {
  position: absolute;
  inset: 0;
  overflow: visible;
  pointer-events: none;
  z-index: var(--mh-iso-scene-z-index, 1);
  isolation: isolate;
}

.mh-iso-sep__sticky-pin {
  position: sticky;
  top: var(--mh-iso-static-offset, 0px);
  left: 0;
  width: 100%;
  height: max(1px, calc(100vh - var(--mh-iso-static-offset, 0px)));
  height: max(1px, calc(100dvh - var(--mh-iso-static-offset, 0px)));
  overflow: hidden;
  pointer-events: none;
  z-index: var(--mh-iso-scene-z-index, 1);
}

.mh-iso-sep__sticky-pin > .mh-iso-sep {
  top: 0;
  bottom: auto;
  height: 100%;
}

.mh-iso-sep__sticky-pin > .mh-iso-sep__reward-layer {
  position: absolute;
  inset: 0;
  height: 100%;
}

.mh-iso-sep.mh-iso-sep--paused * {
  animation-play-state: paused !important;
}

/* Keep normal container content above the background scene by default. */
.mh-iso-sep-host > :not(.mh-iso-sep):not(.mh-iso-sep__reward-layer):not(.mh-iso-sep__sticky-stage) {
  position: relative;
  z-index: 2;
}

.mh-iso-sep__reward-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
  z-index: var(--mh-iso-reward-z-index, 30);
  opacity: 1;
  visibility: visible;
  transition: opacity 220ms ease;
}

.mh-iso-sep__sticky-stage {
  opacity: 1;
  visibility: visible;
  transition: opacity 220ms ease;
}

.mh-iso-sep__tone-resource {
  filter: brightness(1) contrast(1);
}

.mh-iso-sep-host.mh-iso-sep-resource-night-yes .mh-iso-sep__tone-resource {
  animation: mh-iso-resource-night-tone var(--mh-iso-cycle-duration, 120s) linear infinite;
  animation-delay: var(--mh-iso-cycle-delay, 0s);
  will-change: filter;
}

/* Keep hangar squash animation untouched and tone only its visual content. */
.mh-iso-sep-host.mh-iso-sep-resource-night-yes .mh-iso-sep__hangar.mh-iso-sep__tone-resource {
  animation: none;
}

.mh-iso-sep-host.mh-iso-sep-resource-night-yes .mh-iso-sep__hangar.mh-iso-sep__tone-resource > .mh-iso-sep__hangar-svg-slot {
  filter: brightness(1) contrast(1);
  animation: mh-iso-resource-night-tone var(--mh-iso-cycle-duration, 120s) linear infinite;
  animation-delay: var(--mh-iso-cycle-delay, 0s);
  will-change: filter;
}

.mh-iso-sep-host.mh-iso-sep-scroll-time-yes .mh-iso-sep__sky-layer,
.mh-iso-sep-host.mh-iso-sep-scroll-time-yes .mh-iso-sep__stars,
.mh-iso-sep-host.mh-iso-sep-scroll-time-yes .mh-iso-sep__stars-rotor,
.mh-iso-sep-host.mh-iso-sep-scroll-time-yes .mh-iso-sep__orbiter--sun,
.mh-iso-sep-host.mh-iso-sep-scroll-time-yes .mh-iso-sep__orbiter--moon,
.mh-iso-sep-host.mh-iso-sep-scroll-time-yes .mh-iso-sep__body--sun,
.mh-iso-sep-host.mh-iso-sep-scroll-time-yes .mh-iso-sep__body--moon,
.mh-iso-sep-host.mh-iso-sep-scroll-time-yes .mh-iso-sep__star {
  animation: none !important;
  transition: none !important;
}

.mh-iso-sep-host.mh-iso-sep-scroll-time-yes .mh-iso-sep__tone-resource,
.mh-iso-sep-host.mh-iso-sep-scroll-time-yes .mh-iso-sep__hangar.mh-iso-sep__tone-resource > .mh-iso-sep__hangar-svg-slot {
  animation: none !important;
}

.mh-iso-sep-host.mh-iso-sep-scroll-time-yes .mh-iso-sep__hangar.mh-iso-sep__tone-resource {
  filter: none !important;
}

.mh-iso-sep-host.mh-iso-sep-scroll-time-yes.mh-iso-sep-resource-night-yes .mh-iso-sep__tone-resource {
  filter:
    brightness(calc(1 - ((1 - var(--mh-iso-resource-night-brightness, 0.79)) * var(--mh-iso-resource-night-live, 0))))
    contrast(calc(1 + ((var(--mh-iso-resource-night-contrast, 1.105) - 1) * var(--mh-iso-resource-night-live, 0))));
}

.mh-iso-sep-host.mh-iso-sep-scroll-time-yes.mh-iso-sep-resource-night-yes .mh-iso-sep__hangar.mh-iso-sep__tone-resource {
  filter: none !important;
}

.mh-iso-sep-host.mh-iso-sep-scroll-time-yes.mh-iso-sep-resource-night-yes .mh-iso-sep__hangar.mh-iso-sep__tone-resource > .mh-iso-sep__hangar-svg-slot {
  filter:
    brightness(calc(1 - ((1 - var(--mh-iso-resource-night-brightness, 0.79)) * var(--mh-iso-resource-night-live, 0))))
    contrast(calc(1 + ((var(--mh-iso-resource-night-contrast, 1.105) - 1) * var(--mh-iso-resource-night-live, 0))));
}

@keyframes mh-iso-resource-night-tone {
  0%,
  12% {
    filter: brightness(var(--mh-iso-resource-night-brightness, 0.79)) contrast(var(--mh-iso-resource-night-contrast, 1.105));
  }
  22% {
    filter: brightness(calc((1 + var(--mh-iso-resource-night-brightness, 0.79)) * 0.5)) contrast(calc((1 + var(--mh-iso-resource-night-contrast, 1.105)) * 0.5));
  }
  34%,
  62% {
    filter: brightness(1) contrast(1);
  }
  74% {
    filter: brightness(calc((1 + var(--mh-iso-resource-night-brightness, 0.79)) * 0.5)) contrast(calc((1 + var(--mh-iso-resource-night-contrast, 1.105)) * 0.5));
  }
  86%,
  100% {
    filter: brightness(var(--mh-iso-resource-night-brightness, 0.79)) contrast(var(--mh-iso-resource-night-contrast, 1.105));
  }
}