/**
 * Scroll motion: zoom, parallax and drawn strokes driven by the scroll
 * position (CSS scroll-driven animations, no JavaScript). The motion is tied to the
 * scrollbar: it stops when scrolling stops and runs backwards when scrolling
 * up. Entrances stay with chain-animations; this file is for continuous
 * motion only. Docs: documentation/scroll-motion.md
 *
 * Modelled on Dolly (usedolly.dev, MIT), written for the theme; no dependency.
 *
 * Utility classes (any element):
 *   scroll-zoom       slow push: scale 1 → --scroll-zoom while the element
 *                     crosses the screen
 *   scroll-parallax   moves from -depth to +depth while it crosses the screen:
 *                     a positive depth lags behind the page (a background), a
 *                     negative one runs ahead of it (a foreground layer)
 *   scroll-depth-s / scroll-depth-m / scroll-depth-l   2rem, 4rem, 8rem
 *   Both motion classes on one element combine (scale and translate are
 *   separate properties).
 *   scroll-draw       stroke icons and lines inside the element draw
 *                     themselves as they enter the screen. Inline SVG only
 *                     (GB icon headlines such as icon-list-item, HTML
 *                     blocks), not <img src="….svg">. The stroke needs
 *                     pathLength="1" on every shape, which CSS cannot set:
 *                     includes/blocks/scroll-draw.php adds it on the front
 *                     end. Put the class on the block or on a container
 *                     around several. Filled icons have nothing to draw.
 *
 * Block variants use the keyframes below in their own files:
 *   cover--zoom, cover--parallax                (css/blocks/cover.css)
 *   text-image--zoom, text-image--parallax      (css/blocks/text-image.css)
 *   scroll-scene--zoom                          (css/blocks/scroll-scene.css)
 * Pinned step sequences are the scroll-scene block.
 *
 * Variables:
 *   --scroll-zoom    end scale, default 1.12 (inherits: set it on the block)
 *   --scroll-depth   parallax travel each way, default 4rem (inherits)
 *   --scroll-range   animation-range of a utility element, default cover (the
 *                    whole time on screen); does not inherit
 *   --scroll-draw-range   scroll-draw range, default entry 0% cover 50% (done
 *                    when the shape reaches the middle of the screen); set it
 *                    on the scroll-draw element, it inherits to the shapes
 *
 * Rules:
 *   - Every motion rule sits inside @supports (animation-timeline: view()) and
 *     prefers-reduced-motion: no-preference. Without support (Firefox before
 *     159) or with reduced motion nothing applies: the page is as authored.
 *   - A frame that crops the moving element uses overflow: clip, never hidden.
 *     hidden makes the frame a scroll container, the view timeline attaches
 *     to it and the motion freezes halfway.
 *   - Never on an element that carries chainAnimation: both use the animation
 *     property and one cancels the other. Move a child (the img) instead.
 *   - Not inside a horizontal scroller (cards--carousel, gallery--scroller):
 *     the view timeline attaches to the scroller.
 *   - Front end only: the editor shows the authored state.
 */

@property --scroll-range {
    syntax: "*";
    inherits: false;
}

:root {
    --scroll-zoom: 1.12;
    --scroll-depth: 4rem;
}

@keyframes scroll-zoom {
    from { scale: 1; }
    to   { scale: var(--scroll-zoom); }
}

@keyframes scroll-parallax {
    from { translate: 0 calc(-1 * var(--scroll-depth)); }
    to   { translate: 0 var(--scroll-depth); }
}

/* With pathLength="1" one dash spans the whole shape, so the dash offset is
   the share still undrawn. */
@keyframes scroll-draw {
    from { stroke-dashoffset: 1; }
    to   { stroke-dashoffset: 0; }
}

.scroll-depth-s {
    --scroll-depth: 2rem;
}

.scroll-depth-m {
    --scroll-depth: 4rem;
}

.scroll-depth-l {
    --scroll-depth: 8rem;
}

@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .scroll-zoom,
        .scroll-parallax {
            animation-timing-function: linear;
            animation-fill-mode: both;
            animation-timeline: view();
            animation-range: var(--scroll-range, cover);
        }

        .scroll-zoom {
            animation-name: scroll-zoom;
        }

        .scroll-parallax {
            animation-name: scroll-parallax;
        }

        .scroll-zoom.scroll-parallax {
            animation-name: scroll-zoom, scroll-parallax;
        }

        /* Only shapes the PHP filter prepared: without pathLength a dash of
           1 would cut the stroke into a dotted line. */
        .scroll-draw :is(path, circle, ellipse, line, polyline, polygon, rect)[pathLength] {
            stroke-dasharray: 1;
            animation-name: scroll-draw;
            animation-timing-function: linear;
            animation-fill-mode: both;
            animation-timeline: view();
            animation-range: var(--scroll-draw-range, entry 0% cover 50%);
        }
    }
}