/* The night sky of the fox-island scene (markup: .fi-sky > #fi-nebula + #fi-stars, filled by
   rtf6x/js/fox-sky.js). Shared by the old home, experiments/fox-island and experiments/fox-ufo. */

.fi-sky {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.fi-sky__nebula {
  position: absolute;
  inset: -10%;
  filter: blur(60px);
  opacity: 0.1;
}
.fi-sky__nebula i {
  position: absolute;
  border-radius: 50%;
}
.fi-sky__stars {
  position: absolute;
  inset: 0;
}
.fi-sky__stars i.fi-dot {
  position: absolute;
  border-radius: 50%;
  background: #fff;
  animation: fi-twinkle linear infinite;
}
.fi-sky__stars i.fi-glow {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, rgba(255, 255, 255, 0.35) 45%, transparent 75%);
}
.fi-sky__stars i.fi-spark {
  position: absolute;
}
.fi-sky__stars i.fi-spark svg {
  display: block;
  animation: fi-sparkle ease-in-out infinite;
}
@keyframes fi-twinkle {
  0%, 100% { opacity: var(--fi-op-lo, 0.15); }
  50% { opacity: var(--fi-op-hi, 0.9); }
}
@keyframes fi-sparkle {
  0%, 100% { opacity: 0.15; transform: scale(0.7) rotate(0deg); }
  50% { opacity: 0.9; transform: scale(1.05) rotate(25deg); }
}
@media (prefers-reduced-motion: reduce) {
  .fi-sky__stars i.fi-dot,
  .fi-sky__stars i.fi-spark svg {
    animation: none;
    opacity: 0.5;
  }
}