/* ==========================================================================
   app/runway.css: the walking-silhouette runway under the footer (app/runway.js)

   Faded, small, low contrast: the figures are something to spot, never something
   that competes with the page. Its own strip in the flow, so it covers nothing.
   ========================================================================== */
.runway {
  --rw-dur: 90s;
  position: relative; overflow: hidden; height: 74px;
  max-width: calc(var(--content, 1200px) - 2 * var(--gutter, 16px)); width: calc(100% - 2 * var(--gutter, 16px));
  margin: 0 auto calc(6px + env(safe-area-inset-bottom));
  /* Solid colour on the shapes, faded as a group: overlapping parts of a figure
     (a hat over a head) must not double up into darker seams. */
  color: rgb(var(--mode-rgb, 255,138,61));
  /* fade in and out at the edges, so figures arrive and leave rather than pop */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.runway::after {
  /* the ground they walk on */
  content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 1px;
  background: rgba(var(--mode-rgb, 255,138,61), .12);
}
.rw-track { position: absolute; inset: 0; }
.rw-fig {
  position: absolute; left: 0; bottom: 8px; width: 26px; height: 45px;
  animation: rw-walk var(--rw-dur) linear infinite;
  will-change: transform; cursor: default;
  -webkit-tap-highlight-color: transparent;
}
.rw-inner { display: block; width: 100%; height: 100%; opacity: .24; transition: opacity 160ms ease; animation: rw-bob .7s ease-in-out infinite; }
.rw-svg, .rw-fig img { display: block; width: 100%; height: 100%; overflow: visible; }
/* the two walking frames swap */
.rw-svg .rw-a { animation: rw-step-a .7s steps(1, end) infinite; }
.rw-svg .rw-b { animation: rw-step-b .7s steps(1, end) infinite; }
@keyframes rw-walk { from { transform: translateX(-60px); } to { transform: translateX(var(--rw-span, 100vw)); } }
@keyframes rw-bob { 0%, 100% { transform: translateY(0); } 25%, 75% { transform: translateY(-1.5px); } }
@keyframes rw-step-a { 0% { opacity: 1; } 50% { opacity: 0; } }
@keyframes rw-step-b { 0% { opacity: 0; } 50% { opacity: 1; } }

/* who is that: hover or tap stops the figure and names it */
.rw-name {
  position: absolute; left: 50%; bottom: calc(100% + 2px); transform: translateX(-50%);
  white-space: nowrap; pointer-events: none;
  font: 600 10.5px/1 var(--font-label, system-ui); letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-2, #aaa); opacity: 0; transition: opacity 160ms ease;
}
.rw-fig:hover, .rw-fig.is-named { animation-play-state: paused; z-index: 1; }
.rw-fig:hover .rw-inner, .rw-fig.is-named .rw-inner { opacity: .7; }
.rw-fig:hover .rw-inner, .rw-fig.is-named .rw-inner,
.rw-fig:hover .rw-a, .rw-fig.is-named .rw-a, .rw-fig:hover .rw-b, .rw-fig.is-named .rw-b { animation-play-state: paused; }
.rw-fig:hover .rw-name, .rw-fig.is-named .rw-name { opacity: 1; }

/* off screen, or in a hidden tab: nothing moves */
.runway.is-off .rw-fig, .runway.is-off .rw-inner, .runway.is-off .rw-a, .runway.is-off .rw-b { animation-play-state: paused; }

/* reduced motion: they stand still, spread along the strip, and still say who they are */
@media (prefers-reduced-motion: reduce) {
  .rw-fig, .rw-inner, .rw-svg .rw-a, .rw-svg .rw-b { animation: none; }
  .rw-svg .rw-b { opacity: 0; }
  .rw-fig { left: calc((var(--rw-i) + .5) / var(--rw-n) * 100% - 13px); transform: none; }
}
@media (max-width: 600px) {
  .runway { height: 64px; }
  .rw-fig { width: 22px; height: 38px; }
}
@media print { .runway { display: none; } }