/* Distant starlight: pointed glints with a soft bloom rather than round dots. */
.sky-star { opacity: var(--star-level, .6); animation: distantStarlight var(--star-time, 7s) ease-in-out var(--star-delay, 0s) infinite; }
.stellar-halo { fill: url(#star-halo); opacity: .48; }
.stellar-core { fill: #f6f0dc; }
.stellar-rays { fill: none; stroke: var(--w-star); stroke-width: .45; stroke-linecap: round; opacity: .72; }
.sky-star.is-bright .stellar-rays { stroke-width: .55; }
.sky-star.is-distant .stellar-halo { opacity: .23; }
.sky-star.is-distant .stellar-rays { opacity: .48; }
@keyframes distantStarlight {
  0%, 100% { opacity: calc(var(--star-level, .6) * .78); }
  37% { opacity: var(--star-level, .6); }
  71% { opacity: calc(var(--star-level, .6) * .57); }
}

/* Each distant bird gets its own curving flight in sky-life.js. The small
   silhouette can flap without replacing the travel transform or heading. */
.sky .birds { position: absolute; inset: 0; pointer-events: none; }
.sky .birds .bird { top: 0; left: 0; background: none; animation: none; opacity: 0; height: 7px; }
.bird-silhouette {
  display: block; width: 100%; height: 100%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 8'%3E%3Cpath d='M1 5.8Q4.5 1.5 9 5Q13.5 1.2 17 5.6' fill='none' stroke='%23484943' stroke-width='1.25' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
  transform-origin: center 60%; animation: distantWingbeat var(--wing-time, 5.2s) ease-in-out var(--wing-delay, 0s) infinite;
}
@keyframes distantWingbeat {
  0%, 24%, 100% { transform: scaleX(var(--bird-facing, 1)) scaleY(.82); }
  5%, 14% { transform: scaleX(var(--bird-facing, 1)) scaleY(.42); }
  9%, 19% { transform: scaleX(var(--bird-facing, 1)) scaleY(1); }
  55%, 69% { transform: scaleX(var(--bird-facing, 1)) scaleY(.86); }
  60%, 65% { transform: scaleX(var(--bird-facing, 1)) scaleY(.55); }
}
@media (prefers-reduced-motion: reduce) {
  .sky-star { animation: none !important; opacity: var(--star-level, .6); }
  .sky .birds .bird { display: none; }
}