/* Dashed underline grow (rewritten from craft.wild.as's email / read-more links, Craftwild PARTS.md §13).
   A dashed rule (4px on / 3px off, 3px thick) under a link grows from 0 to the full width in .45s on
   cubic-bezier(.16,1,.3,1) on hover or keyboard focus, and runs back the same way when the pointer leaves.
   The dashes are a repeating gradient with PIXEL stops inside a background tile whose width is a PERCENT,
   so growing the tile uncovers more dashes instead of stretching them: the pattern stays put and the end advances.
   Markup: <a class="dug" href="...">label</a>. Add .is-on to hold it drawn (current page, a demo autopilot). */
.dug {
  --dug-on: 4px;          /* dash length */
  --dug-off: 3px;         /* gap length */
  --dug-thick: 3px;       /* rule thickness */
  --dug-gap: 2px;         /* space between the text and the rule (padding-bottom) */
  --dug-color: currentColor;
  --dug-dur: .45s;
  --dug-ease: cubic-bezier(.16, 1, .3, 1);
  color: inherit;
  text-decoration: none;
  padding-bottom: var(--dug-gap);
  background-image: repeating-linear-gradient(90deg,
    var(--dug-color) 0 var(--dug-on),
    transparent var(--dug-on) calc(var(--dug-on) + var(--dug-off)));
  background-position: left bottom;
  background-repeat: no-repeat;
  background-size: 0% var(--dug-thick);
  transition: background-size var(--dug-dur) var(--dug-ease);
}
.dug:hover,
.dug:focus-visible,
.dug.is-on { background-size: 100% var(--dug-thick); }
.dug:focus-visible { outline: none; }               /* the drawn rule is the focus mark */

/* Reduced motion: no grow, the rule simply appears. */
@media (prefers-reduced-motion: reduce) { .dug { transition: none; } }