/* Scramble label + link scramble. Measured from the Sadewa Framer template (teardown 09-30), rewritten with our names.
   Label: a 1px rule draws out to full width from a small tab, and a beat later "/TEXT" types on left to right
   led by a few random grey glyphs. Links: on hover the letters turn to random glyphs and resolve left to right
   while a 1px underline grows. part.js builds the markup and runs the text; everything tunable is here. */
.sclabel {
  --sl-ink: #131313;                       /* label text */
  --sl-glyph: #b4b4b4;                     /* scramble glyphs (grey) */
  --sl-rule: #e5e5e5;                      /* the drawn rule */
  --sl-tab: #d3d3d3;                       /* the tab on the rule's left end */
  --sl-tab-w: 183px;                       /* 0 hides the tab */
  --sl-rule-dur: 1s;
  --sl-rule-ease: cubic-bezier(.4, 0, .2, 1);
  --sl-rule-delay: .1s;                    /* after the label is seen */
  --sl-type-delay: 250ms;                  /* typing starts this long after the label is seen (read by part.js) */
  --sl-char: 45ms;                         /* typing time per character (read by part.js) */
  --sl-type-min: 420ms;                    /* shortest typing run (read by part.js) */
  --sl-lead: 5;                            /* scramble glyphs ahead of the cursor (read by part.js) */
  --sl-refresh: 40ms;                      /* glyph refresh (read by part.js) */
  --sl-font: 400 14px/14px ui-monospace, "Roboto Mono", SFMono-Regular, Menlo, monospace;
  --sl-gap: 12px;                          /* rule to text */
  display: flex;
  flex-direction: column;
  gap: var(--sl-gap);
  width: 100%;
}
.sclabel.dark { --sl-rule: #3a3a3a; --sl-tab: #3a3a3a; --sl-ink: #797979; --sl-glyph: #4a4a4a; }
.sclabel.bold { --sl-rule: #d3d3d3; --sl-tab: #e5e5e5; }

.sclabel-rule { position: relative; height: 5px; width: 100%; }
.sclabel-rule i { position: absolute; left: 0; top: 4px; height: 1px; width: 0; background: var(--sl-rule); }
.sclabel-rule svg { position: absolute; left: 0; top: 0; width: var(--sl-tab-w); height: 5px; display: block; }
.sclabel-rule svg path { fill: var(--sl-tab); }
.sclabel.is-in .sclabel-rule i {
  width: 100%;
  transition: width var(--sl-rule-dur) var(--sl-rule-ease) calc(var(--sl-delay, 0s) + var(--sl-rule-delay));
}
.sclabel-crumb { display: flex; font: var(--sl-font); text-transform: uppercase; white-space: nowrap; color: var(--sl-ink); }
.sclabel-t { opacity: 0; }
.sclabel.is-typed .sclabel-t { opacity: 1; }
.sclabel-t b { font-weight: inherit; color: var(--sl-glyph); }
.sclabel-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---- link scramble ---- */
/* knobs (set them on the [data-scramble] element or any ancestor):
   --scr-glyph #b4b4b4 unresolved glyphs · --scr-dur 380ms whole scramble · --scr-refresh 35ms glyph refresh
   --scr-line-offset -4px underline below the text box (2px for big type) · --scr-line-dur .35s
   --scr-line-ease Framer spring, bounce 0, 0.4s (sampled from the source page's WAAPI curve: --scr-spring-fast) */
:root {
  --scr-spring-fast: linear(0,.024 2.56%,.0823 5.13%,.1594 7.69%,.2448 10.26%,.3315 12.82%,.4152 15.38%,.4934 17.95%,.5646 20.51%,.6282 23.08%,.6844 25.64%,.7334 28.21%,.7758 30.77%,.8122 33.33%,.8432 35.9%,.8694 38.46%,.8916 41.03%,.9102 43.59%,.9258 46.15%,.9388 48.72%,.9496 51.28%,.9586 53.85%,.966 56.41%,.9722 58.97%,.9772 61.54%,.9814 64.1%,.9848 66.67%,.9876 69.23%,.9899 71.79%,.9918 74.36%,.9933 76.92%,.9946 79.49%,.9956 82.05%,.9964 84.62%,.9971 87.18%,.9977 89.74%,.9981 92.31%,.9985 94.87%,.9988 97.44%,1);
}
[data-scramble] {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}
[data-scramble] .scr-g { color: var(--scr-glyph, #b4b4b4); }
[data-scramble] .scr-u {
  position: absolute; left: 0; bottom: var(--scr-line-offset, -4px); height: 1px; width: 0;
  background: currentColor; pointer-events: none;
  transition: width var(--scr-line-dur, .35s) var(--scr-line-ease, var(--scr-spring-fast));
}
.scr-host:hover .scr-u, .scr-host:focus-visible .scr-u, .scr-host.is-scr-on .scr-u { width: 100%; }

@media (prefers-reduced-motion: reduce) {
  .sclabel .sclabel-rule i { width: 100%; transition: none; }
  .sclabel .sclabel-t { opacity: 1; }
}