/* Signal pill: a slide-to-open control. An orange light runs round the pill, trailing a fade from white-hot to dull red and throwing white sparks. Clicking the card, or
   dragging the thumb, slides it to the end; arriving there opens the gallery or plays the clip, then it resets. */
:root{--signal:oklch(.74 .17 55)}
.signal{position:relative;z-index:2;display:inline-flex;align-items:center;padding:0;border:0;background:none;font-family:var(--body);pointer-events:none}
.signal[hidden]{display:none}
.project-cta{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:auto;padding-top:24px}
.signal-pill{position:relative;display:inline-flex;align-items:center;height:34px;padding:0 4px;border-radius:999px;background:oklch(.15 .008 265 / .94);box-shadow:0 8px 22px #000a,inset 0 0 0 1px oklch(1 0 0 / .05)}
/* The thumb is measured in signal.js (--a-x/--a-w, --b-x/--b-w) so it can slide between the two parts. */
.signal-thumb{position:absolute;left:0;top:4px;height:26px;width:var(--a-w,0);border-radius:999px;background:oklch(.3 .016 265);transform:translateX(var(--a-x,4px))}
.signal.is-ready .signal-thumb{transition:transform .5s cubic-bezier(.3,1.25,.4,1),width .5s cubic-bezier(.3,1.25,.4,1),background .3s}
.signal-seg{position:relative;z-index:1;display:inline-flex;align-items:center;gap:8px;height:26px;padding:0 12px;font-size:11.5px;font-weight:500;line-height:1;white-space:nowrap;color:var(--fg);transition:color .3s}
.signal-label{color:transparent;background:linear-gradient(100deg,var(--muted) 0 38%,var(--fg) 50%,var(--muted) 62% 100%) 100% 0/260% 100%;-webkit-background-clip:text;background-clip:text;animation:signal-shimmer 3.8s linear infinite;animation-delay:calc(var(--i,0) * -.7s)}
.signal-arrow{font-size:13px;line-height:1;opacity:.85;transition:transform .3s}
@keyframes signal-shimmer{from{background-position:100% 0}to{background-position:0 0}}
/* One canvas per pill draws the light, its trail and the sparks (signal.js). The hero button and the study toggles get the same light round their edge, in white. */
.signal-perimeter{position:relative;isolation:isolate}
.signal-sparks{position:absolute;left:-48px;top:-48px;width:calc(100% + 96px);height:calc(100% + 96px);pointer-events:none}
/* Hover only brightens the thumb and nudges the arrow. The thumb stays put until it is clicked or dragged. */
@media(hover:hover) and (pointer:fine){
.project:hover .signal-thumb,.signal:hover .signal-thumb{background:oklch(.34 .02 265)}
.project:hover .signal-arrow,.signal:hover .signal-arrow{transform:translateX(3px)}
}
/* End: the thumb sits on the second part. */
.signal.is-end .signal-thumb,.project:hover .signal.is-end .signal-thumb,.signal.is-end:hover .signal-thumb{transform:translateX(var(--b-x,4px));width:var(--b-w,0);background:oklch(.36 .022 265)}
.signal.is-end .signal-seg-a,.signal.is-near .signal-seg-a{color:var(--muted)}
.signal.is-end .signal-label,.signal.is-near .signal-label{animation:none;background:none;color:var(--fg)}
.signal.is-end .signal-arrow{transform:translateX(3px)}
.signal.is-ready.is-end .signal-thumb{transition:transform .42s cubic-bezier(.3,1.2,.4,1),width .42s cubic-bezier(.3,1.2,.4,1),background .3s}
/* Dragging: the thumb follows the pointer, so no easing. */
.project-cta .signal-pill,.signal--center .signal-pill{pointer-events:auto;touch-action:pan-y pinch-zoom;cursor:grab}
.signal.is-dragging .signal-pill{cursor:grabbing}
.signal.is-ready.is-dragging .signal-thumb{transition:none}
/* Play control over a clip that has not started. */
.dialog-stage{position:relative;display:grid;justify-items:center}
.signal--center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:auto;cursor:pointer}
.signal--center:hover{background:none}
.signal--center:focus-visible{outline:2px solid var(--fg);outline-offset:8px;border-radius:999px}
body.motion-paused .signal-sparks{opacity:0}
body.motion-paused .signal-label{animation:none;color:var(--muted);background:none}
body.motion-paused .signal.is-ready .signal-thumb{transition:none}
@media(prefers-reduced-motion:reduce){.signal-sparks{display:none}.signal-label{animation:none;color:var(--muted);background:none}.signal.is-ready .signal-thumb{transition:none}}
@media(max-width:600px){.project-cta{padding-top:20px}.signal-pill{height:30px}.signal-thumb{height:22px}.signal-seg{height:22px;padding:0 10px;font-size:10.5px;gap:7px}}