/* ═══════════════════════════════════════════
   Sparkles — twinkling motes of light
   Required markup:
     <span class="sparkle" style="top: 20%; left: 15%; animation-delay: 0s;"></span>
     Position each absolutely; stagger the delays so they never blink in unison.

   A mote of light must be LIGHTER than the field it sits on. Use --spark,
   which every palette defines to be lighter than its own --bg-primary.
   This used to read --accent-warm, which is lighter than the ground on every
   dark palette and darker on the light one — so the first light-ground
   template rendered its "sunlit dust" as dark olive specks.

   On a light ground a bare dot reads as dirt however light it is, because
   there is no darkness for it to glow against. Put .sparkle-layer--light on
   the container to switch to a soft radial glint.
   ═══════════════════════════════════════════ */

.sparkle {
    position: absolute;
    width: 3px;
    height: 3px;
    background: var(--spark, var(--accent-warm-bright, #f2c4a0));
    border-radius: 50%;
    box-shadow: 0 0 6px 1px var(--accent-warm-glow, rgba(232, 168, 124, 0.45));
    animation: sparkle-twinkle 3s ease-in-out infinite;
    pointer-events: none;
}

@keyframes sparkle-twinkle {
    0%, 100% { opacity: 0; transform: scale(0); }
    50% { opacity: 1; transform: scale(1); }
}

/* ───── Light-ground variant ─────
   Bigger, softer, lower peak opacity: a glint in daylight rather than a star
   at night. Set on the container so one class flips every child. */
.sparkle-layer--light .sparkle {
    width: 7px;
    height: 7px;
    background: radial-gradient(
        circle,
        var(--spark, #fdfbf5) 0%,
        /* Was var(--accent-soft), which is darker than a light ground: 2265
           of 2379 rendered pixels came out darker than the paper, a tan
           donut with a pin-prick of light. Every stop must be lighter. */
        color-mix(in srgb, var(--spark, #fdfbf5) 55%, transparent) 45%,
        transparent 70%
    );
    box-shadow: none;
    animation-name: sparkle-twinkle-light;
}

@keyframes sparkle-twinkle-light {
    0%, 100% { opacity: 0; transform: scale(0.4); }
    50% { opacity: 0.75; transform: scale(1); }
}