/* Pointer float layers (see part.js). The move needs no CSS: part.js writes each .pfl layer's `translate`.
   Markup: <div class="pfl" data-float-distance="70">...</div>; nest a .pfl inside a positioned box for a layer.

   Optional recipe, the source's own use: a FOIL STAMP. A masked shape whose fill is a big blurred "light"
   that floats with the pointer, so a glint slides through the shape while the shape stays put.
     <div class="pfl-foil" style="--pfl-foil-mask: url(shape.svg)">
       <div class="pfl pfl-foil__lights"><i></i><i></i></div>
     </div>
   The lights layer overhangs the stamp (inset -77px -171px -151px -97px in the source) so its edges never show. */
.pfl { will-change: translate; }

.pfl-foil {
  --pfl-foil-ink: #1d1f1e;                  /* stamp colour */
  --pfl-foil-glint: rgb(255 255 255 / .5);  /* the light's ring */
  --pfl-foil-light: 396px;                  /* light diameter (source 396px) */
  --pfl-foil-blur: 15px;                    /* light softness (source 15px) */
  position: relative; overflow: hidden; background: var(--pfl-foil-ink);
  -webkit-mask: var(--pfl-foil-mask) 50% / contain no-repeat; mask: var(--pfl-foil-mask) 50% / contain no-repeat;
}
.pfl-foil__lights { position: absolute; inset: -77px -171px -151px -97px; }
.pfl-foil__lights > i {
  position: absolute; width: var(--pfl-foil-light); aspect-ratio: 1; filter: blur(var(--pfl-foil-blur));
  background: radial-gradient(50% 50%, var(--pfl-foil-ink) 0%, var(--pfl-foil-glint) 32%, var(--pfl-foil-glint) 66%, var(--pfl-foil-ink) 100%);
}
.pfl-foil__lights > i:nth-child(1) { top: -32px; left: -83px; }
.pfl-foil__lights > i:nth-child(2) { top: 48%; right: -106px; transform: translateY(-50%); }