/* The pitch behind the landing page: fragments of one football pitch, drawn by shared/pitch-figures.js at the true
   measures of the Laws of the Game. One language for all of them: fine crisp lines in mint at the strength of a
   hairline (lines may be muted, words never are), a filled emerald spot where the pitch has one, and at most one fine
   emerald light: a dash of a fixed length that runs along a line once, after the figure is drawn, and is then gone,
   leaving nothing behind. No glow, no blur.
   The layer lies under the particles and under every word: the figures are the ground, the particles move over it,
   the content stands on top. A figure is drawn in once, the first time it is seen and only after its words have come
   in, and then stays still; with reduced motion it is simply there, with no light.
   --pf-line and --pf-fine are also the colours of the board of the One play (index.html), so the pitch speaks one
   language in every section. */
:root{--pf-line:rgba(182,222,200,.3);--pf-fine:rgba(182,222,200,.22);--pf-spot:var(--em);--pf-light:var(--em)}
.pf{position:absolute;left:0;top:0;width:100%;height:0;z-index:0;pointer-events:none}
.pf__fig{position:absolute;display:block;overflow:hidden}
/* the kick-off stays with the brain while the hero leaves: it fades and is cut where the next words come up
   (pitch-figures.js sets its opacity and its clip) */
.pf__fig.pf__fig--fixed{position:fixed;will-change:opacity}

/* the lines draw themselves from their start (every path is one unit long: pathLength="1") */
.pf path{fill:none;stroke:var(--pf-line);stroke-width:1;stroke-dasharray:1 1;stroke-dashoffset:1;transition:stroke-dashoffset var(--t,1.6s) var(--ease) var(--d,0s)}
/* straight lines are 1px on the centre of a pixel, curves a quarter more so they hold the same weight */
.pf .pf__arc{stroke-width:1.25}
.pf .in path{stroke-dashoffset:0}
/* a spot is filled, and simply appears */
.pf .pf__spot{fill:var(--pf-spot);stroke:none;stroke-dasharray:none;opacity:0;transition:opacity .7s var(--ease) var(--d,0s)}
.pf .in .pf__spot{opacity:1}
/* the one light: a short emerald dash (--dash: its share of the line, about 56px) that travels the whole line once at a
   calm pace (--run, longer for a longer line), leaves it, and is hidden once it has run */
.pf .pf__lit{stroke:var(--pf-light);stroke-width:1.5;stroke-linecap:round;stroke-dasharray:var(--dash,.05) 2;stroke-dashoffset:var(--dash,.05);transition:none}
.pf .in .pf__lit{animation:pf-run var(--run,2.6s) cubic-bezier(.45,0,.2,1) var(--d,1.4s) both}
.pf .in .pf__lit.done{animation:none;visibility:hidden}
@keyframes pf-run{from{stroke-dashoffset:var(--dash,.05)}to{stroke-dashoffset:-1}}

@media (prefers-reduced-motion:reduce){
  .pf path{stroke-dasharray:none;transition:none}
  .pf .pf__spot{opacity:1;transition:none}
  .pf .pf__lit{display:none}
}