:root {
  --lollipop-sky-top: #4fb6e8;
  --lollipop-sky-mid: #8fd3f4;
  --lollipop-sky-light: #eaf6fd;
}

body.lollipop-internal-sky {
  background-color: var(--lollipop-sky-light);
  background-image: linear-gradient(180deg, var(--lollipop-sky-top) 0%, var(--lollipop-sky-mid) 22%, var(--lollipop-sky-light) 68%, #f7fcff 100%);
  background-attachment: fixed;
}

.lollipop-sky-cloud-layer {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.lollipop-sky-cloud {
  position: absolute;
  width: var(--cloud-width);
  color: rgba(255, 255, 255, var(--cloud-opacity));
  filter: drop-shadow(0 12px 18px rgba(60, 139, 184, 0.08));
  animation: lollipop-cloud-drift var(--cloud-duration) ease-in-out infinite;
  animation-delay: var(--cloud-delay);
}

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

@keyframes lollipop-cloud-drift {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(18px, -10px, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .lollipop-sky-cloud { animation: none; }
}