/* Origin-flip underline: pointing at a link draws a line under it from its left end to its right end; moving away
   does NOT pull it back the way it came: the line lets go of its left end and runs off past the right end, so
   the stroke always travels one way, left to right. CSS only, no extra markup.

   <a class="ofu" href="#">Read the case study</a>

   How: the line is a background layer whose width transitions 0% <-> 100%. Its anchor flips instantly with the
   state: anchored LEFT while hovered (so it grows rightwards), anchored RIGHT at rest (so it shrinks towards the
   right end). Same trick as the source's scaleX(0 -> 1) with transform-origin right -> left (Heron .hover-un),
   done as a background so it also works on a link that wraps onto two lines.

   Knobs: in/out clocks are separate (source: .6s ease both ways). .is-hover holds the hover state. */
.ofu {
  --ofu-color: currentColor;     /* the drawn line */
  --ofu-base: transparent;       /* an optional resting rule under it (e.g. #0002) */
  --ofu-thick: 1px;              /* source max(1px, .1rem); .2rem on bold links */
  --ofu-gap: 2px;                /* space between the text and the line */
  --ofu-in-dur: .6s;  --ofu-in-ease: ease;
  --ofu-out-dur: .6s; --ofu-out-ease: ease;

  color: inherit; text-decoration: none;
  padding-bottom: var(--ofu-gap);
  background-image: linear-gradient(var(--ofu-color), var(--ofu-color)), linear-gradient(var(--ofu-base), var(--ofu-base));
  background-repeat: no-repeat;
  background-size: 0% var(--ofu-thick), 100% var(--ofu-thick);
  background-position: right bottom, left bottom;     /* at rest the line hangs off the RIGHT end */
  -webkit-box-decoration-break: slice; box-decoration-break: slice;
  transition: background-size var(--ofu-out-dur) var(--ofu-out-ease);
}
.ofu.is-hover, .ofu:focus-visible {
  background-size: 100% var(--ofu-thick), 100% var(--ofu-thick);
  background-position: left bottom, left bottom;      /* while hovered it hangs off the LEFT end */
  transition: background-size var(--ofu-in-dur) var(--ofu-in-ease);
}
@media (hover: hover) {
  .ofu:hover {
    background-size: 100% var(--ofu-thick), 100% var(--ofu-thick);
    background-position: left bottom, left bottom;
    transition: background-size var(--ofu-in-dur) var(--ofu-in-ease);
  }
}
/* a parent can carry the hover (Heron puts .hover-un on the whole link row, the line under one word in it) */
.ofu-host:is(.is-hover, :focus-visible) .ofu { background-size: 100% var(--ofu-thick), 100% var(--ofu-thick); background-position: left bottom, left bottom; transition: background-size var(--ofu-in-dur) var(--ofu-in-ease); }
@media (hover: hover) {
  .ofu-host:hover .ofu { background-size: 100% var(--ofu-thick), 100% var(--ofu-thick); background-position: left bottom, left bottom; transition: background-size var(--ofu-in-dur) var(--ofu-in-ease); }
}
.ofu--bold { --ofu-thick: 2px; }
/* Alture's legal links: same one-way sweep on a sharper clock (500ms both ways, cubic-bezier(.62,.05,.01,.99)) */
.ofu--sharp { --ofu-in-dur: .5s; --ofu-out-dur: .5s; --ofu-in-ease: cubic-bezier(.62, .05, .01, .99); --ofu-out-ease: cubic-bezier(.62, .05, .01, .99); }
.ofu:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .ofu, .ofu-host .ofu { transition-duration: .01s !important; } }