/**
 * Draw-on: a hand-drawn stroke graphic draws itself in the direction of the
 * stroke the first time it scrolls into view. The image is unchanged; it is
 * shown through a mask whose stroke runs along the drawing's centre line.
 *
 * globalClass: draw-on   (on the GB image block)
 *
 * Structure (front end, built by includes/blocks/draw-on.php):
 *   figure.gb-block-image
 *     svg.gb-image.draw-on[style="--draw-on-duration;--draw-on-delay"]
 *       defs > mask > path.draw-on-path[pathLength=1]   the centre line
 *       image[mask]                                      the original bitmap
 *   The editor shows the plain <img>.
 *
 * Shapes (centre line, mask width, timing) per image file:
 * includes/blocks/draw-on-shapes.php. js/blocks/draw-on.js adds .is-drawn
 * once, when the graphic is in view.
 *
 * Tuning: --draw-on-duration and --draw-on-delay (set per shape inline).
 *
 * Without JS (no html.js) and with reduced motion the graphic is complete
 * from the start. The hidden start state uses a dash a little past the
 * path's start, so the round cap does not show a dot before the drawing.
 *
 * Hers Klub, 11/2026. Candidate for the base theme (the mechanism; the
 * shapes are the project's).
 */

svg.draw-on {
    display: block;
    max-width: 100%;
    height: auto;
    overflow: visible;
}

@media (prefers-reduced-motion: no-preference) {
    .js .draw-on .draw-on-path {
        stroke-dasharray: 1 1.1;
        stroke-dashoffset: 1.02;
    }

    .js .draw-on.is-drawn .draw-on-path {
        animation: draw-on-stroke var(--draw-on-duration, 0.9s) cubic-bezier(0.45, 0.05, 0.35, 1) var(--draw-on-delay, 0s) both;
    }
}

@keyframes draw-on-stroke {
    from {
        stroke-dashoffset: 1.02;
    }

    to {
        stroke-dashoffset: 0;
    }
}