/* cue · the shared "you can press this" treatment for every selectable button group on the home page.
   Add .cue-group to the wrapper and .cue-chip to each button, then call PBCue.attach() from cue.js.
   - The active chip shows a fill that runs left to right until the next auto switch.
   - The next chip breathes with a soft ring so the eye goes there.
   - The whole group has a slow light sweep and a hand hint until the visitor uses it once. */
.cue-group{position:relative;isolation:isolate}
.cue-group.cue-attn::before{content:"";position:absolute;inset:-3px;border-radius:999px;z-index:-1;padding:1px;
  background:conic-gradient(from var(--cue-a,0deg),rgba(25,165,255,0) 0deg,rgba(25,165,255,.85) 40deg,rgba(25,165,255,0) 90deg,rgba(25,165,255,0) 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  animation:cue-spin 3.2s linear infinite}
@property --cue-a{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes cue-spin{to{--cue-a:360deg}}
.cue-chip{position:relative;overflow:hidden;cursor:pointer}
.cue-chip.cue-active::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:100%;background:#19A5FF;transform-origin:left;transform:scaleX(var(--cue-p,0));opacity:.9}
.cue-chip.cue-next{animation:cue-breathe 1.6s ease-in-out infinite}
@keyframes cue-breathe{0%,100%{box-shadow:0 0 0 0 rgba(25,165,255,0)}50%{box-shadow:0 0 0 4px rgba(25,165,255,.35)}}
.cue-chip:hover{filter:brightness(1.12)}
.cue-hint{display:inline-flex;align-items:center;gap:8px;font-size:15px;color:rgba(255,255,255,.78)}
.cue-hint b{color:#fff;font-weight:600}
.cue-hand{width:20px;height:20px;flex:none;animation:cue-tap 1.4s ease-in-out infinite;transform-origin:50% 80%}
@keyframes cue-tap{0%,100%{transform:translateY(0) scale(1)}45%{transform:translateY(3px) scale(.92)}}
.cue-group.cue-used .cue-hand{animation:none;opacity:.6}
.cue-group.cue-used.cue-attn::before{animation-duration:9s;opacity:.45}
@media (prefers-reduced-motion:reduce){
  .cue-group.cue-attn::before{animation:none;background:rgba(25,165,255,.55)}
  .cue-chip.cue-next,.cue-hand{animation:none}
  .cue-chip.cue-active::after{transform:scaleX(1)}
}