/* MUUSHO — hero landscape (assets/js/landscape.js → window.MuushoLandscape)
   The module injects .ml-scene into the container (e.g. #hero-landscape). Everything here is scoped to .ml-*. */
.ml-scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  contain: strict;
  /* same sky as the drawing, so nothing flashes while the SVG paints */
  background: linear-gradient(180deg, #8FD0F2 0%, #C3E6F9 45%, #FFF2D8 78%, #8ACF5A 78.1%, #4CA42C 100%);
}
.ml-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;           /* the drawing bleeds past the viewBox so parallax never shows an edge */
  backface-visibility: hidden;
}
.ml-scene.is-live .ml-layer { will-change: transform; }
.ml-scene.is-ready { animation: ml-fade-in .6s ease-out both; }
@keyframes ml-fade-in { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .ml-scene.is-ready { animation: none; }
  .ml-layer { transform: none !important; will-change: auto; }
}