/**
 * Mittanauha (measuring tape): a full-width yellow band with tick marks, the
 * divider below the front page hero. Project block (Suomen Jättikasvisyhdistys),
 * decorative only (aria-hidden).
 *
 * globalClass: mittanauha   (an empty full-width GB container)
 *
 * Variants:
 *   mittanauha--sticky   sticks to the top of the viewport when it reaches it,
 *                        docked below the sticky header (js/blocks/mittanauha.js
 *                        sets --mittanauha-top from the header's bottom edge,
 *                        also while the auto-hiding header slides in and out),
 *                        and the ticks roll with the scroll: left when
 *                        scrolling down, right when scrolling up. With reduced
 *                        motion the band sticks but does not roll. Without JS it
 *                        sticks to the top edge.
 *
 * Structure:
 *   .mittanauha.gb-container [.mittanauha--sticky]   no inner blocks; the
 *                                                     ticks are ::before
 *
 * The sticky band stays stuck until the end of its parent, so it must be a
 * direct sibling of the page sections (not inside a section).
 *
 * Tuning: --mittanauha-height (22px), --mittanauha-step (50px, distance of the
 *         long ticks; the roll loops over one step), colors --tape-clr and
 *         --tape-tick-clr (colors.css)
 *
 * Chain animations: none; the band is a divider.
 */

:root {
    --mittanauha-height: 22px;
    --mittanauha-step: 50px;
}

.mittanauha {
    position: relative;
    height: var(--mittanauha-height);
    overflow: hidden;
    background-color: var(--tape-clr);
}

/* Short ticks every 10px, long ticks every step. One step wider than the band
   so the roll (translateX up to one step) never shows an empty edge. */
.mittanauha::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% + var(--mittanauha-step));
    height: 100%;
    background-image:
        repeating-linear-gradient(90deg, var(--tape-tick-clr) 0 2px, transparent 2px 10px),
        repeating-linear-gradient(90deg, var(--tape-tick-clr) 0 2px, transparent 2px var(--mittanauha-step));
    background-size: 100% 8px, 100% 15px;
    background-repeat: no-repeat;
    transform: translateX(var(--mittanauha-shift, 0px));
    will-change: transform;
}

/* Below the header (z-index 10000) and the off-canvas menu, above the content */
.mittanauha--sticky {
    position: sticky;
    top: var(--mittanauha-top, 0px);
    z-index: 100;
}