*{box-sizing:border-box}html,body{height:100%}
:root{
  --blue-hue-rotate:-6deg;
  --blue-saturate:1.06;
  --blue-bright:1.02;
}
body{margin:0;background:#070a1e;overflow:hidden;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial}
.frame{position:fixed;inset:0;display:grid;place-items:center;overflow:hidden;background:#070a1e}

/* Layering */
#stars-back{z-index:0}
#clouds{z-index:1}
.backdrop{z-index:2}
#stars-front{z-index:3}
.frame > #stars-back,
.frame > #clouds,
.frame > #stars-front{position:fixed;inset:0;pointer-events:none;}

/* Image centered */
.backdrop{
  position:relative;margin:auto;display:block;
  max-width:100vw;max-height:100vh;width:auto;height:auto;object-fit:contain;pointer-events:none;
  filter:hue-rotate(var(--blue-hue-rotate)) saturate(var(--blue-saturate)) brightness(var(--blue-bright));
  box-shadow:0 10px 40px rgba(0,0,0,.55)
}

/* Stars */
.star{position:absolute;width:1px;height:1px;border-radius:1px;opacity:.9}
.star.blur{filter:blur(.6px)}
.star.c1{background:#fff7a8}.star.c2{background:#bfe6ff}.star.c3{background:#c7ffd9}.star.c4{background:#ffc1c7}.star.c5{background:#ffffff}
@keyframes twinkle{0%,100%{opacity:.25}50%{opacity:1}}
@keyframes fadeblink{0%,40%{opacity:0}50%,60%{opacity:1}100%{opacity:0}}
@keyframes pulse{0%,100%{transform:scale(1);opacity:.7}50%{transform:scale(1.7);opacity:1}}
.star.twinkle{animation:twinkle var(--t,3s) ease-in-out var(--d,0s) infinite}
.star.fade{animation:fadeblink var(--t,4.8s) ease-in-out var(--d,0s) infinite}
.star.pulse{animation:pulse var(--t,5s) ease-in-out var(--d,0s) infinite}

/* Clouds: stronger visibility, varied gray via opacity var */
.cloud{
  position:absolute;
  width:220px;height:140px;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0) 70%);
  filter:blur(45px);
  opacity:var(--op,0.33);
  border-radius:50% 70% 60% 80%/60% 50% 70% 50%;
  animation:drift var(--t,70s) ease-in-out var(--d,0s) infinite alternate;
}
.cloud.mid{ width:320px;height:180px; }
.cloud.fan{ width:560px;height:240px; border-radius:65% 85% 55% 85%/55% 45% 85% 45%; }

@keyframes drift{0%{transform:translate(var(--x0,0),var(--y0,0))}100%{transform:translate(var(--x1,40px),var(--y1,20px))}}

@media (prefers-reduced-motion:reduce){
  .star{animation:none!important}
  .cloud{animation:none!important}
}