/* =====================================================================================================
   Header band ticker, v1. Pixel, desk 10, brief MK4b (Brain ruling, 06-11-2026, Fabrice's wish). FOR RULING.
   Loads AFTER: TEMPLATE - Header band and back button v1, CSS for Nick (05-11-2026).css (it adds to it, it
   replaces nothing in it).

   What: on a phone (768 px and under) the five figures of the header band glide continuously from right to
   left as one line, slowly (about 40 px per second), in a seamless loop. The strip stops while a thumb is on
   it. Nothing moves on a desktop. With prefers-reduced-motion the strip stays exactly as MK4 v1 made it
   (the figures scroll sideways by hand). Everything below sits inside one media query, so a desktop and a
   reduced-motion phone never see a single rule of it.

   Markup Nick adds to the MK4 v1 strip (the strip itself is unchanged):
     1. One wrapper inside .gpcf-hband__items:  <div class="gpcf-hband__track"> ... </div>
        holding the five .gpcf-hb items exactly as printed today.
     2. Right after the fifth item, inside the same track, the same five items a second time, each one with
        class "gpcf-hb gpcf-hb--dup" (plus its own modifier: gpcf-hb-wx, gpcf-hb-vis, gpcf-hb-on,
        gpcf-hb-date, gpcf-hb-time) and aria-hidden="true". The copies carry no id and no tabindex.
     3. The theme script fills both copies (querySelectorAll on the class, not querySelector) and, if a figure
        fails to load, sets hidden on both. Simplest: fill the five originals, then clone them into the track:
          var t = band.querySelector('.gpcf-hband__track');
          [].slice.call(t.children).filter(function (e) { return !e.hidden; }).forEach(function (e) {
            var c = e.cloneNode(true); c.classList.add('gpcf-hb--dup'); c.setAttribute('aria-hidden', 'true'); t.appendChild(c);
          });
        Refresh a figure later (the clock, the readers online) in both copies.
     4. On a phone the strip no longer scrolls by hand, so tabindex="0" on .gpcf-hband__items may stay (the
        reduced-motion phone still scrolls) and the role="group" and aria-label stay as they are.

   Speed: a linear glide of one set of five items (plus one gap) per cycle. The cycle time is that width divided
   by 40 px per second. Measured on the mockup at 390 px: FR 933 px, EN 872 px, RU 946 px, hence 24 s as one
   value for the three languages (36 to 39 px per second). If a label changes the set width, the new time is
   set width / 40. The duration sits on the .gpcf-hband__track rule, marked (A) below.

   Direction: right to left. The direction is one value, marked (B) below, on the same rule:
   animation-direction:normal is right to left; change it to reverse and the strip runs left to right.

   Tokens of tokens.css only: no hex, no important flag, no new token, no new font.
   ===================================================================================================== */


/* Outside the ticker (a desktop, a reduced-motion phone): the wrapper vanishes, the copies are not shown. */
.gpcf-hband__track{ display:contents; }
.gpcf-hb.gpcf-hb--dup{ display:none; }


/* ----- Phone, motion allowed: the strip becomes a ticker ----- */
@media (max-width:768px) and (prefers-reduced-motion:no-preference){

  /* The strip is now a window that clips; the track inside it moves. */
  .gpcf-hband__items{
    display:block;
    overflow:hidden;
    padding:var(--space-4) 0;
    overscroll-behavior-x:auto;
    scroll-snap-type:none;
    mask-image:linear-gradient(90deg, transparent, var(--os-chrome-dark) 5%, var(--os-chrome-dark) 92%, transparent);
  }

  /* One set plus the copy side by side. The right padding equals the gap, so the half of the track is exactly
     one set plus one gap and the loop has no jump. */
  .gpcf-hband__track{
    display:flex;
    align-items:center;
    gap:var(--space-9);
    width:max-content;
    padding-right:var(--space-9);
    animation-name:gpcf-hb-tick;
    animation-duration:24s;                 /* (A) set width / 40 px per second */
    animation-timing-function:linear;
    animation-iteration-count:infinite;
    animation-direction:normal;             /* (B) normal = right to left, reverse = left to right */
    animation-play-state:running;
    will-change:transform;
  }
  /* The first item takes the same hairline as the others, so both sets are the same width and the half of the
     track is exactly one set (the hairline sits left of the window, out of sight, at rest). */
  .gpcf-hband__track > .gpcf-hb:first-child::before{
    content:"";
    align-self:stretch;
    width:1px;
    margin:var(--space-2) var(--space-5) var(--space-2) calc(-1 * var(--space-5));
    background:var(--on-dark-border);
  }
  .gpcf-hb.gpcf-hb--dup{ display:inline-flex; }
  .gpcf-hb.gpcf-hb--dup[hidden]{ display:none; }

  /* The thumb is on the strip: it stops where it is, and resumes where it left off. */
  .gpcf-hband__items:active .gpcf-hband__track,
  .gpcf-hband__items:focus-visible .gpcf-hband__track{
    animation-play-state:paused;
  }
  /* A mouse pointer on a large phone or a tablet in landscape does the same, but only a real pointer: a
     touch screen keeps :hover after a tap, which would freeze the strip. */
  @media (hover:hover){
    .gpcf-hband__items:hover .gpcf-hband__track{ animation-play-state:paused; }
  }

  @keyframes gpcf-hb-tick{
    from{ transform:translate3d(0, 0, 0); }
    to{ transform:translate3d(-50%, 0, 0); }
  }
}