/* ==========================================================================
   SIGNATURE MOTIFS
   Brand book, page 02: "The Underline — evidence over slogans. A single
   stroke beneath the name reflects how Loai works: underline what matters."
   That stroke is reused beneath each section heading as one hand-drawn
   copper line, drawn in once as the heading arrives.
   ========================================================================== */

.underline {
  display: block;
  inline-size: clamp(7rem, 5rem + 6vw, 10.5rem);
  margin-block-start: var(--space-2xs);
  color: var(--copper);
}

.underline svg {
  inline-size: 100%;
  block-size: auto;
  overflow: visible;
}

/* Scales uniformly with the viewBox, so 3 user units renders as a ~1.5-2px
   pen line across the underline's fluid width. */
.underline path {
  stroke: currentColor;
  stroke-width: 3;
  fill: none;
}

/* Hidden until reveal.js draws it in; shown whole when motion is off. */
.js-motion .underline path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

/* The stroke drifts slightly uphill, like a pen leaving the page, so in
   RTL it is mirrored to keep running in reading direction. */
[dir="rtl"] .underline svg {
  transform: scaleX(-1);
}