/* ── Morning Sky background ─────────────────────────────────
   Drifting cartoon-cloud field with two depth planes, plus a
   horizon haze + bottom radial wash. Renders inside any parent
   (it fills with position: absolute / inset: 0). Class names are
   prefixed `.ms-` so they don't collide with apps that host it. */

.ms-sky-bg {
  position: absolute;
  inset: 0;
  isolation: isolate;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    var(--sky-top) 0%,
    var(--sky-mid) 60%,
    var(--sky-bot) 100%
  );
  z-index: 0;
}

/* warm wash at the horizon */
.ms-sky-bg::after {
  content: "";
  position: absolute;
  inset: auto -10% -8% -10%;
  height: 48%;
  background: radial-gradient(
    70% 110% at 50% 100%,
    color-mix(in oklab, var(--sky-bot) 70%, white 30%) 0%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 0;
}

.ms-clouds {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.ms-cloud {
  position: absolute;
  top: var(--lane);
  left: -30%;
  width: var(--w);
  opacity: var(--op, 0.92);
  animation: ms-drift var(--dur) linear var(--delay) infinite;
  will-change: transform;
  filter: blur(var(--blur, 0px));
}

.ms-cloud.near { opacity: 0.55; }
.ms-cloud.far  { opacity: 0.42; }

/* Background clouds are sized in px (540–680 near, 320–460 far) and
   overwhelm small screens — keep only the far plane, softened. */
@media (max-width: 480px) {
  .ms-cloud.near { display: none; }
  .ms-cloud.far  { opacity: 0.22; }
}

.ms-cloud svg { display: block; width: 100%; height: auto; }

@keyframes ms-drift {
  from { transform: translateX(0); }
  to   { transform: translateX(160vw); }
}

.ms-haze {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 22%;
  background: linear-gradient(
    to top,
    color-mix(in oklab, var(--sky-bot) 55%, white 45%) 0%,
    transparent 100%
  );
  z-index: 2;
  pointer-events: none;
  opacity: 0.55;
}

@media (prefers-reduced-motion: reduce) {
  .ms-cloud { animation-duration: 0.001ms !important; }
}