/* Stars, sun, moon and birds. Positions are set by assets/js/sky.js and birds.js. */

.stars { position: fixed; inset: 0; pointer-events: none; opacity: 0; transition: opacity 2s; }
.night .stars { opacity: 1; }
.dusk .stars { opacity: .35; }
.stars i { position: absolute; width: var(--s); height: var(--s); border-radius: 50%; background: #fff;
           animation: twinkle var(--t) ease-in-out infinite alternate; }
@keyframes twinkle { from { opacity: .25 } to { opacity: 1 } }

/* The clipped layer the sun, moon and birds move in. It sits behind the house,
   so they set behind the roofline and the wall. */
.flyway { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }

.orb { position: absolute; left: 0; top: 0; width: 84px; height: 84px; transform: translate(-50%, -50%);
       pointer-events: none; z-index: 0; visibility: hidden; transition: left 1s linear, top 1s linear; }

#sun { border-radius: 50%; background: #fff4d2;
       box-shadow: 0 0 0 16px rgba(255,244,210,.18), 0 0 120px 30px rgba(255,236,190,.55); }

#moon { filter: drop-shadow(0 0 22px rgba(242,234,208,.35)); }
#moon .lit  { fill: #f2ead0; }
#moon .dark { fill: #c9d2e8; opacity: 0; }          /* earthshine on the unlit part */
.night #moon .dark { opacity: .07; }
.day #moon, .dawn #moon, .dusk #moon { filter: none; opacity: .85; }

.bird { position: absolute; left: 0; top: 0; width: 22px; height: 10px; pointer-events: none; z-index: 0; }
.bird path { fill: none; stroke: var(--line); stroke-width: 2; stroke-linecap: round; opacity: .75;
             transform-origin: 50% 70%; animation: flap .32s ease-in-out infinite alternate; }
@keyframes flap { to { transform: scaleY(-.6); } }

@media (max-width: 720px) {
  .orb { width: 48px; height: 48px; }
}