/* FLOURISH: wave — one soft curve.
 *
 * The gentlest mark here. Spa, wellness, counselling, paediatrics — anywhere a
 * straight rule would read as clinical and a chevron as pushy.
 *
 * Drawn as an inline SVG data URI rather than with gradients, because a real
 * sine curve is the one shape CSS gradients cannot make honestly; every
 * approximation with radial gradients has visible joins. `stroke="currentColor"`
 * is what keeps it a token: the element's colour is set from the palette below
 * and the SVG inherits it through the mask, so it re-tints like everything else
 * rather than baking a hex into a data URI.
 *
 * Loaded only when theme.json sets "motif": "wave".
 */

[data-motif="wave"] .motif-path {
  display: block;
  margin-top: 2.1rem;
  width: 132px;
  height: 14px;
  background: linear-gradient(90deg, var(--lws-brand), var(--lws-accent));
  -webkit-mask: var(--lws-wave) left center / 132px 14px no-repeat;
          mask: var(--lws-wave) left center / 132px 14px no-repeat;
}

[data-motif="wave"] .section-head h2::after {
  content: "";
  display: block;
  margin-top: .8rem;
  width: 84px;
  height: 10px;
  background: linear-gradient(90deg, var(--lws-brand), var(--lws-accent));
  -webkit-mask: var(--lws-wave) left center / 84px 10px no-repeat;
          mask: var(--lws-wave) left center / 84px 10px no-repeat;
}

/* One shape, declared once. A sine and a half, stroked — the mask decides where
 * the gradient above shows through, so the colour lives in CSS and the geometry
 * lives here.
 *
 * THE STROKE HAS TO FIT INSIDE THE viewBox, AND IT IS THE CURVE PLUS HALF THE
 * STROKE WIDTH — a `viewBox` clips, silently and without a warning, so the only
 * evidence is a mark that looks wrong. The curve this replaces ran along y=9 in
 * a box 14 tall and its trough reached y=16.5; with `stroke-width="3"` the
 * bottom edge of the ink sat at 18, so four of the fourteen units were cut off
 * and the dip was drawn as a flat bottom. Reported exactly that way.
 *
 * So the numbers below are held to it. The curve is symmetric about y=7, the
 * box's middle, and swings ±4.8 — extremes at 2.2 and 11.8, ink from 0.7 to
 * 13.3, clear at both edges. Each crest is a symmetric cubic, so its extreme is
 * (y0 + 3·y1 + 3·y2 + y3)/8 and not the control points' own y: those sit at 0.6
 * and 13.4, OUTSIDE the box, which is correct and is why they cannot be read as
 * the bounds. Move the amplitude or the stroke and re-check that arithmetic. */
[data-motif="wave"] {
  --lws-wave: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 132 14" fill="none" \
stroke="black" stroke-width="3" stroke-linecap="round">\
<path d="M2 7 C 16.2 .6, 30.4 .6, 44.7 7 S 73.1 13.4, 87.3 7 \
S 115.8 .6, 130 7"/></svg>');
}