/* ============================================================================
   SPARKLE — the button hint shared by the method points (section 3), the
   community labels (section 4) and the alumni affiliations (section 6).
   Markup: EXPRender.sparkle (js/lib/render.js), an svg.points__trace inside
   the button. Each list sets the sparkle's colour, --points-trace, itself.
   ========================================================================= */

/* How far the sparkle has run round a section-3 point, 0 to 1. */
@property --head     { syntax: '<number>'; inherits: true; initial-value: 0; }

/* The button hint: a sparkle that runs once round the point's edge with a
   fading tail, so the rectangle is implied and never drawn. It runs on each
   ray shot, on click and on hover. Each rect is one dash of length --L whose
   head sits at --head (pathLength 1 = one lap): three tapering tail segments,
   then the head, a round dot with a glow. */
.points__trace {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  overflow: visible;
  pointer-events: none;
  opacity: 0;
}
.points__trace rect {
  x: 0; y: 0; width: 100%; height: 100%;
  rx: var(--radius-sm);
  fill: none;
  stroke: var(--points-trace);
  stroke-linecap: round;
  stroke-dasharray: var(--L) 2;
  stroke-dashoffset: calc(var(--L) - var(--head));
}
.points__trace rect:nth-child(1) { --L: 0.32;   stroke-width: 0.5;  opacity: 0.2; }
.points__trace rect:nth-child(2) { --L: 0.16;   stroke-width: 0.75; opacity: 0.45; }
.points__trace rect:nth-child(3) { --L: 0.06;   stroke-width: 1;    opacity: 0.8; }
.points__trace rect:nth-child(4) {
  --L: 0.0001;
  stroke: var(--purple-100);
  stroke-width: 3;
  filter: drop-shadow(0 0 3px var(--points-trace)) drop-shadow(0 0 1px var(--graphic-violet));
}
.points__btn.is-sparked .points__trace,
.points__btn:hover .points__trace,
.community__btn.is-sparked .points__trace,
.community__btn:hover .points__trace { animation: points-spark 1.8s cubic-bezier(0.45, 0.05, 0.55, 0.95); }
@keyframes points-spark {
  0%   { --head: 0; opacity: 0; }
  6%   { opacity: 1; }
  85%  { opacity: 1; }
  100% { --head: 1; opacity: 0; }
}