/* Ticker fill button: on hover / focus-visible the label fades out and a tilted ticker of label + arrow copies
   fades in and runs through the button, clipped to the button's own shape. Mechanics only; skin it yourself or use
   the optional .tfb--skin below. Measured from vibebevvy.com's blob buttons (see part.json).

   Knobs (custom properties on .tfb or any ancestor):
     --tfb-clip       the shape the ticker is clipped to (ellipse(50% 50% at 50% 50%)); data-tfb-shape="pill" | "rect"
                      switch it to inset(0 round 999px) | inset(0 round var(--tfb-radius))
     --tfb-tilt       the ticker line's tilt (-2.75deg)
     --tfb-dur        time to run two copies along (2.4s, linear)
     --tfb-offset     how far right of the copy boundary the run starts and ends (1rem)
     --tfb-out        label fade-out (0.1s)          --tfb-in   ticker fade-in (0.6s)
     --tfb-pad        space either side of each copy (0.6em)    --tfb-arrow  arrow copy width (1.4em)
   The run distance is set by part.js from the copy count (data-tfb-copies, 8): two copies in --tfb-dur. */
.tfb {
  --tfb-clip: ellipse(50% 50% at 50% 50%);
  --tfb-tilt: -2.75deg;
  --tfb-dur: 2.4s;
  --tfb-offset: 1rem;
  --tfb-out: 0.1s;
  --tfb-in: 0.6s;
  --tfb-pad: 0.6em;
  --tfb-arrow: 1.4em;
  position: relative;
  overflow: hidden;
}
.tfb[data-tfb-shape="pill"] { --tfb-clip: inset(0 round 999px); }
.tfb[data-tfb-shape="rect"] { --tfb-clip: inset(0 round var(--tfb-radius, 0px)); }

.tfb.is-tfb > .tfb__label,
.tfb.is-tfb > svg { transition: opacity var(--tfb-out); }
.tfb.is-tfb:hover > .tfb__label, .tfb.is-tfb:hover > svg,
.tfb.is-tfb:focus-visible > .tfb__label, .tfb.is-tfb:focus-visible > svg,
.tfb.is-tfb.is-active > .tfb__label, .tfb.is-tfb.is-active > svg { opacity: 0; }

.tfb__ticker {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  clip-path: var(--tfb-clip); /* the button's own shape, so no copy shows past a tapered tip */
}
/* the tilt sits on a wrapper between the clip and the run: one straight tilted line, unrotated clip */
.tfb__tilt {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  transform: rotate(var(--tfb-tilt));
}
.tfb__run {
  display: flex;
  align-items: center;
  width: max-content;
  flex: none;
  transform: translate3d(var(--tfb-from, calc(-25% + var(--tfb-offset))), 0, 0);
  animation: tfb-run var(--tfb-dur) linear infinite;
  animation-play-state: paused; /* paused, never reset: the next hover carries on where this one left off */
  opacity: 0;
}
.tfb:hover .tfb__run,
.tfb:focus-visible .tfb__run,
.tfb.is-active .tfb__run {
  animation-play-state: running;
  opacity: 1;
  transition: opacity var(--tfb-in); /* fades in only; on leave it goes at once while the label fades back */
}
.tfb__run > span { white-space: nowrap; padding-inline: var(--tfb-pad); }
.tfb__run > svg { width: var(--tfb-arrow); height: auto; flex: none; }

@keyframes tfb-run {
  from { transform: translate3d(var(--tfb-from, calc(-25% + var(--tfb-offset))), 0, 0); }
  to { transform: translate3d(var(--tfb-to, calc(-50% + var(--tfb-offset))), 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .tfb__ticker { display: none; }
  .tfb.is-tfb > .tfb__label, .tfb.is-tfb > svg { opacity: 1 !important; }
}

/* Optional skin: a solid shape with an ink outline that matches the clip.
   --tfb-fill (#f2e85c) --tfb-ink (#1d1a22) --tfb-line (1.5px) */
.tfb--skin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 1.05em 3.2em;
  border: var(--tfb-line, 1.5px) solid var(--tfb-ink, #1d1a22);
  border-radius: 50%;
  background: var(--tfb-fill, #f2e85c);
  color: var(--tfb-ink, #1d1a22);
  font: inherit;
  line-height: 1.1;
  text-decoration: none;
  cursor: pointer;
}
.tfb--skin[data-tfb-shape="pill"] { border-radius: 999px; padding-inline: 2.2em; }
.tfb--skin[data-tfb-shape="rect"] { border-radius: var(--tfb-radius, 0px); padding-inline: 2em; }
.tfb--skin > svg { width: 1.4em; height: auto; flex: none; }
.tfb--skin:focus-visible { outline: 2px solid var(--tfb-ink, #1d1a22); outline-offset: 4px; }