/* ---------------------------------------------------------------- Holdfast motion (static/motion.js)
   The read line that sweeps an instrument once, and the brackets that lock onto a reading. */
.hf-scan{position:absolute;top:0;bottom:0;left:0;width:1px;z-index:4;pointer-events:none;
  background:linear-gradient(to bottom,transparent,color-mix(in srgb,var(--ink) 80%,transparent) 16%,color-mix(in srgb,var(--ink) 80%,transparent) 84%,transparent)}
/* the faint wake behind the line, so you can see where it has read */
.hf-scan::before{content:"";position:absolute;top:0;bottom:0;right:1px;width:140px;
  background:linear-gradient(to right,transparent,color-mix(in srgb,var(--ink) 6%,transparent));
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 16%,#000 84%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 16%,#000 84%,transparent)}
.hf-scan[data-label]::after{content:attr(data-label);position:absolute;top:12px;left:9px;white-space:nowrap;
  font:500 10px/1 var(--mono,ui-monospace,monospace);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}

/* corner brackets: hairline, square, a touch outside the reading. Positioned elements keep their own position. */
:where(.hf-lockable){position:relative}
.hf-lockable::after{content:"";position:absolute;inset:-6px;z-index:3;pointer-events:none;
  --bk:var(--ink-3);--bl:9px;
  background:
    linear-gradient(var(--bk) 0 0) left top/var(--bl) 1px,linear-gradient(var(--bk) 0 0) left top/1px var(--bl),
    linear-gradient(var(--bk) 0 0) right top/var(--bl) 1px,linear-gradient(var(--bk) 0 0) right top/1px var(--bl),
    linear-gradient(var(--bk) 0 0) left bottom/var(--bl) 1px,linear-gradient(var(--bk) 0 0) left bottom/1px var(--bl),
    linear-gradient(var(--bk) 0 0) right bottom/var(--bl) 1px,linear-gradient(var(--bk) 0 0) right bottom/1px var(--bl);
  background-repeat:no-repeat;opacity:0;transform:scale(1.07);
  transition:opacity .16s ease,transform .34s cubic-bezier(.16,1,.3,1)}
.hf-lockable:hover::after,.hf-lockable:focus-visible::after{opacity:1;transform:none}
.hf-lockable.hf-locked::after{--bk:var(--ink);opacity:1;transform:none}
/* a big score gets wider brackets */
.dial .score b.hf-lockable::after,.hf-wl-score b.hf-lockable::after{inset:-2px -14px;--bl:14px}

.snap-grid{position:relative}

@media (prefers-reduced-motion:reduce){
  .hf-lockable::after{transform:none;transition:opacity .16s ease}
}