/* Base deep space (fallback) */
body { background: #080A12; }

/* FX wrapper fixed behind everything */
#fffx {
  position: fixed; inset: 0;
  z-index: -3; pointer-events: none;
}

/* Star canvas covers viewport */
#ff-stars { position: absolute; inset: 0; display: block; }

/* Emoji layer floats above stars */
#ff-emoji-layer { position: absolute; inset: 0; }

/* Emoji sprites */
.ff-emoji {
  position: absolute;
  will-change: transform, filter, opacity;
  filter: hue-rotate(0deg) saturate(1.3);
  /* Rainbow cycle — each gets a random duration via inline style */
  animation: ffHue 8s linear infinite;
}

/* Spin for 🌀 specifically (duration randomized inline) */
.ff-spin { animation: ffHue 8s linear infinite, ffSpin 12s linear infinite; }

@keyframes ffHue {
  0% { filter: hue-rotate(0deg) saturate(1.3); }
  100% { filter: hue-rotate(360deg) saturate(1.3); }
}
@keyframes ffSpin {
  0% { transform: translate3d(var(--tx,0), var(--ty,0), 0) rotate(0deg) scale(var(--sc,1)); }
  100% { transform: translate3d(var(--tx,0), var(--ty,0), 0) rotate(360deg) scale(var(--sc,1)); }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  #ff-stars, .ff-emoji { animation: none !important; }
}