/* Only transient decorative children of the existing spark layer. */
#sparkLayer { --snap-impact-ready:1; }
.snap-impact-burst {
    position:absolute; width:0; height:0; pointer-events:none;
    --impact-color:#5df4ff; --impact-accent:#ff66d5;
}
.snap-impact-burst[data-stage='2'] { --impact-color:#ffe87c; --impact-accent:#ff73d5; }
.snap-impact-burst[data-stage='3'] { --impact-color:#c6ff68; --impact-accent:#ffde75; }
.snap-impact-ring, .snap-impact-core, .snap-impact-ray {
    position:absolute; display:block; pointer-events:none;
    animation-duration:var(--impact-duration); animation-timing-function:cubic-bezier(.16,.7,.35,1);
    animation-fill-mode:both; will-change:transform,opacity;
}
.snap-impact-ring {
    left:-10px; top:-10px; width:20px; height:20px; border:1.5px solid var(--impact-color);
    border-radius:50%; box-shadow:0 0 5px var(--impact-color);
    animation-name:snapImpactRing;
}
.snap-impact-core {
    left:-3px; top:-3px; width:6px; height:6px; border-radius:50%; background:#fff8e6;
    box-shadow:0 0 7px var(--impact-color); animation-name:snapImpactCore;
}
.snap-impact-ray {
    left:-3px; top:-1px; width:6px; height:2px; border-radius:2px;
    background:var(--impact-color); box-shadow:0 0 3px var(--impact-color);
    animation-name:snapImpactRay;
}
.snap-impact-ray[data-tint='1'] { background:var(--impact-accent); box-shadow:0 0 3px var(--impact-accent); }
@keyframes snapImpactRing {
    0% { opacity:.85; transform:scale(.18); }
    100% { opacity:0; transform:scale(2.5); }
}
@keyframes snapImpactCore {
    0% { opacity:1; transform:scale(.8); }
    100% { opacity:0; transform:scale(2.2); }
}
@keyframes snapImpactRay {
    0% { opacity:1; transform:translate3d(0,0,0) rotate(var(--impact-angle)) scaleX(.7); }
    100% { opacity:0; transform:translate3d(var(--impact-x),var(--impact-y),0) rotate(var(--impact-angle)) scaleX(.25); }
}
@media (prefers-reduced-motion:reduce) { .snap-impact-burst { display:none; } }