.night-progress { position: absolute; z-index: 12; top: 18px; left: 14px; display: flex; gap: 6px; }
.night-progress i { width: 11px; height: 11px; border-radius: 50%; background: rgba(255,255,255,.28); box-shadow: 0 1px 4px rgba(39,25,91,.28); }
.night-progress i.done { background: #ffe77d; box-shadow: 0 0 9px #fff4aa; }
.night-sky { position: relative; height: min(76vh,620px); min-height: 440px; overflow: hidden; border: 7px solid #fff; border-radius: 34px; background: #142b75 url("assets/ceu-encantado.png") center / cover; box-shadow: 0 10px 29px rgba(24,28,88,.34); isolation: isolate; }
.night-sky::after { content: ""; position: absolute; z-index: 1; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% 52%, transparent 22%, rgba(15,20,80,.08) 78%); }
.night-friends { position: absolute; z-index: 3; inset: 0; }
.sky-friend { position: absolute; left: var(--left); top: var(--top); width: clamp(86px,20vw,138px); aspect-ratio: 1; border: 0; padding: 0; background: url("assets/amiguinhos-do-ceu.png") var(--sprite-x) var(--sprite-y) / 300% 200% no-repeat; cursor: pointer; filter: grayscale(.32) brightness(.7) drop-shadow(0 8px 7px rgba(6,9,45,.42)); opacity: .72; animation: sky-float 3.1s var(--delay) ease-in-out infinite alternate; transition: filter .35s, opacity .35s; }
.sky-friend.awake { filter: brightness(1.16) saturate(1.2) drop-shadow(0 0 18px rgba(255,235,125,.9)); opacity: 1; animation: sky-awake 1.15s ease-in-out infinite alternate; }
.sky-friend.again { animation: sky-again .48s ease-out; }
.sky-friend--vagalume { width: clamp(72px,17vw,112px); }
.sky-friend--cometa { width: clamp(108px,25vw,170px); }
.night-sparkles { position: absolute; z-index: 8; width: 1px; height: 1px; pointer-events: none; }
.night-sparkles i { position: absolute; left: 0; top: 0; font-size: 1.25rem; font-style: normal; animation: night-burst .8s ease-out both; }
.night-sky.all-awake { animation: whole-sky 1.3s ease-in-out infinite alternate; }
@keyframes sky-float { to { transform: translateY(-11px) rotate(3deg); } }
@keyframes sky-awake { to { transform: translateY(-9px) scale(1.07) rotate(-3deg); } }
@keyframes sky-again { 45% { transform: scale(1.2) rotate(8deg); } }
@keyframes night-burst { from { transform: translate(-50%,-50%) scale(.3); opacity: 1; } to { transform: translate(var(--dx),var(--dy)) rotate(80deg) scale(1.05); opacity: 0; } }
@keyframes whole-sky { to { filter: saturate(1.2) brightness(1.12); } }
@media (max-width: 480px) { .night-sky { min-height: 500px; } .sky-friend--nuvem { left: 62%; } .sky-friend--planeta { left: 35%; } }
@media (prefers-reduced-motion: reduce) { .sky-friend, .night-sky, .night-sparkles i { animation: none !important; } }