/* =========================================================
   Starfield v3.0 — EDGE-ONLY (outline sparkles for Shape Block)
   - No ambient .star-container layer is used or referenced
   - Quantity, sizing, and timing all inherit from CSS vars
   - Works with the edge-sampler JS that targets an exact block ID
========================================================= */

/* ---- Global variables you can tune site-wide ---- */
body.has-starfield{
  /* How many stars to place ALONG the SVG PATH (edge sampler reads this) */
  --star-count: 150;
  --star-min-gap: 4px;

  /* outward jitter range (rem units) */
  --jitter-min: 0.10rem;
  --jitter-max: 2.00rem;

  /* distribution balance: 0 = even, 1 = random */
  --star-randomize: 0;

  /* Twinkle timing (seconds) */
  --twinkle-min: 0.5;
  --twinkle-max: 2.0;

  /* Opacity range for stars */
  --opacity-min: 0.15;
  --opacity-max: 1.0;

  /* Size quantization using φ (golden ratio) */
  --phi: 1.618;
  --size-large: 1.5rem;                                 /* L base */
  --size-medium: calc(var(--size-large) / var(--phi));  /* ≈ 0.927rem */
  --size-small:  calc(var(--size-medium) / var(--phi)); /* ≈ 0.573rem */

  /* 0 = no avoidance, 1 = strongest avoidance */
  --avoid-vert-strength: 1;
  --avoid-vert-width-deg: 45;

  /* Soft glow */
  --max-blur: 0.22rem;
  --star-color: #9989EC;
  --star-url: url("https://www.mysticmunson.design/s/MMsparkle.svg");

  --jitter-fallback-mult: 2;   /* default 2.0 if omitted */
  --jitter-fallback-steps: 3;     /* default 3 if omitted */
}

/* The overlay layer the JS injects inside your Shape Block */
.shape-edge-sparkles{
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

/* Individual stars (mask uses your sparkle SVG) */
.shape-edge-sparkles .star{
  position: absolute;
  left: 0; top: 0;              /* set via inline left/top + translate */
  width: var(--size, 1rem);
  height: var(--size, 1rem);
  transform: translate(-50%, -50%);
  opacity: var(--o, 0.85);
  color: var(--star-color);
  background: currentColor;

  -webkit-mask: var(--star-url) center/contain no-repeat;
          mask: var(--star-url) center/contain no-repeat;

  filter: drop-shadow(0 0 var(--blur, 0) currentColor);
  will-change: opacity, transform;
  animation: twinkle var(--twinkle, 2s) ease-in-out var(--tw-delay, 0s) infinite alternate;
}

@keyframes twinkle{
  0%   { opacity: 0.15; }
  50%  { opacity: 1; }
  100% { opacity: 0.25; }
}

@media (prefers-reduced-motion: reduce){
  .shape-edge-sparkles .star{ animation: none !important; opacity: 0.6; }
}