/* /pipeline/ only - loaded by src/pages/pipeline.js, not by the other 466 pages.
   The programme table's phase track. Reduced motion is handled by the global rule in
   styles.css, whose !important beats the animation here whatever the load order. */
/* pipeline table bar. The phases are named across the head of the Stage column, so the bar
   lands somewhere a reader can name: the fill is a position on that track, not a percentage. */
.phase-scale{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.phase-bar{position:relative;padding:26px 20px}
.phase-bar__grid{position:absolute;inset:26px 20px;display:grid;grid-template-columns:repeat(4,1fr)}
.phase-bar__grid span{border-left:1px dashed var(--line-2)}
.phase-bar__track{position:relative;height:30px;display:flex;align-items:center}
/* The resting state: the bar at its width, no animation. Everything below is additive, so a
   visitor with no JS or with reduced motion gets exactly this. */
.phase-bar__fill{height:30px;width:var(--pct);background:var(--bar,var(--cyan));display:flex;
  align-items:center;padding:0 14px;border-radius:var(--r-pill);position:relative;overflow:hidden}
/* pipeline-reveal.js holds the bars at zero until the table is on screen, then lets them draw
   left to right, one row after another, so the movement reads as progression through the phases. */
@keyframes bsDraw{from{width:0}to{width:var(--pct)}}
[data-reveal="out"] .phase-bar__fill{width:0}
[data-reveal="in"] .phase-bar__fill{animation:bsDraw 1.25s cubic-bezier(.22,.61,.36,1) both;
  animation-delay:calc(var(--i,0)*.18s)}
/* The label would stretch with the bar, so it fades in once its bar has arrived. */
[data-reveal="in"] .phase-bar__fill span{animation:bsFade .45s ease both;
  animation-delay:calc(var(--i,0)*.18s + 1s)}
@keyframes bsFade{from{opacity:0}to{opacity:1}}
/* One slow sheen, on the ACTIVE programme only. It is the difference between a programme that
   is running and one that has finished, so it carries meaning rather than decorating. */
@keyframes bsSheen{0%{transform:translateX(-120%)}55%,100%{transform:translateX(340%)}}
[data-reveal="in"] .phase-bar__fill--live::after{content:'';position:absolute;top:0;bottom:0;
  width:34%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);
  animation:bsSheen 4s ease-in-out 2.2s infinite}
.phase-bar__fill span{font:600 11.5px/1 var(--font-ui);letter-spacing:.04em;
  color:var(--bar-fg,var(--ink-900));white-space:nowrap}