/* ── First-Paint Mote ── */

/* Onboarding mote spawned at the visitor's first cursor movement.
   Size and motion are JS-driven; this rule only carries the visual
   style. */
.first-paint-mote {
  position: fixed;
  border-radius: 50%;
  background: radial-gradient(
    circle at center,
    var(--sky-3, #7dbfe8) 0%,
    rgba(125, 191, 232, 0.6) 40%,
    transparent 75%
  );
  box-shadow:
    0 0 8px var(--sky-3, #7dbfe8),
    0 0 16px rgba(125, 191, 232, 0.4);
  pointer-events: none;
  z-index: var(--z-toast);
  transform: translate(-50%, -50%);
  will-change: transform, opacity;
}
body.light-appearance .first-paint-mote {
  background: radial-gradient(
    circle at center,
    rgba(var(--theme-glow), 0.9) 0%,
    rgba(var(--theme-glow), 0.4) 40%,
    transparent 75%
  );
  box-shadow:
    0 0 8px rgba(var(--theme-glow), 0.7),
    0 0 16px rgba(var(--theme-glow), 0.3);
}