/*
 * The motifs, as CSS (§5, §10).
 *
 * **The football is in the materials, never in the illustration.** Everything
 * here is a gradient or a clip-path: no images, no icon font, no SVG sprite.
 * That is not minimalism for its own sake — a CSS motif is themeable, weighs
 * nothing, never looks like stock photography and never dates. There is no
 * player, no crowd, no stadium and no badge anywhere in this file, and there
 * is no licensing question about any of it.
 *
 * **At most one texture per screen, and never behind a table or a chart.**
 * Texture you notice on the second look, not decoration competing on the
 * first. If a section already has a lattice, its cards do not get netting.
 */

/* ---- The hexagon (§5) ------------------------------------------------ *
 *
 * The identity mark. Pointy-top, and `--hex-ratio` is load-bearing: a 1:1
 * hexagon is visibly squashed and the wordmark is exactly where a reader
 * notices. `aspect-ratio` does the arithmetic so no call site hard-codes a
 * height next to a width and updates only one of them.
 *
 * **Never put a border on this.** `clip-path` cuts a border on every diagonal
 * and it renders as two vertical bars — a bug that looks like a rendering
 * fault rather than a mistake, so it survives review. If an outline is
 * genuinely needed, draw the hexagon as an SVG `<polygon>` with a stroke.
 */
.hex {
  --hex-size: 20px;
  width: var(--hex-size);
  aspect-ratio: 1 / 1.1547;
  clip-path: var(--hex-clip);
  background: var(--ink);
  flex: none;
}

/* ---- Honeycomb lattice (§5) ------------------------------------------ *
 *
 * From a ball's panels. **~5.5{'w': 30.0, 'h': 51.96150000000001, 'uri': 'url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2230%22%20height%3D%2251.96%22%20viewBox%3D%220%200%2030%2051.96%22%3E%3Cpath%20d%3D%22M-30.0%20-34.6L-15.0%20-43.3L0.0%20-34.6L0.0%20-17.3M0.0%20-34.6L15.0%20-43.3L30.0%20-34.6L30.0%20-17.3M30.0%20-34.6L45.0%20-43.3L60.0%20-34.6L60.0%20-17.3M-45.0%20-8.7L-30.0%20-17.3L-15.0%20-8.7L-15.0%208.7M-15.0%20-8.7L0.0%20-17.3L15.0%20-8.7L15.0%208.7M15.0%20-8.7L30.0%20-17.3L45.0%20-8.7L45.0%208.7M-30.0%2017.3L-15.0%208.7L0.0%2017.3L0.0%2034.6M0.0%2017.3L15.0%208.7L30.0%2017.3L30.0%2034.6M30.0%2017.3L45.0%208.7L60.0%2017.3L60.0%2034.6M-45.0%2043.3L-30.0%2034.6L-15.0%2043.3L-15.0%2060.6M-15.0%2043.3L0.0%2034.6L15.0%2043.3L15.0%2060.6M15.0%2043.3L30.0%2034.6L45.0%2043.3L45.0%2060.6M-30.0%2069.3L-15.0%2060.6L0.0%2069.3L0.0%2086.6M0.0%2069.3L15.0%2060.6L30.0%2069.3L30.0%2086.6M30.0%2069.3L45.0%2060.6L60.0%2069.3L60.0%2086.6%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221%22%2F%3E%3C%2Fsvg%3E")'}troke** — the difference between a texture
 * and a pattern is one number, and this is it. For light sections that are
 * mostly type; never behind data.
 *
 * **It is a real hexagonal tiling, not three crossed gradients.** The
 * gradient version is the obvious way to do this and it produces diamonds:
 * close enough to read as "a texture" at a glance and wrong the moment anyone
 * looks, which on a page whose subject is a football is exactly the wrong
 * place to be approximately right.
 *
 * The tile is one lattice period, 30 x 51.96, and each hexagon in it
 * contributes **only its top-left diagonal, top-right diagonal and right
 * vertical** — the other three edges belong to its neighbours. Drawing whole
 * hexagons instead doubles every shared edge, and a doubled edge at 5.5%
 * alpha composites to 10.7%, which shows up as a visible weave running
 * through the lattice.
 *
 * Painted through `mask-image` rather than set as `background-image`, because
 * a data-URI SVG cannot see `currentColor` or a custom property — its stroke
 * would have to be a baked hex, and a baked hex is a motif that does not
 * change theme. The mask carries the shape and `background-color` carries the
 * colour, so the lattice re-inks itself in dark exactly like everything else.
 */
.lattice {
  position: relative;
  isolation: isolate;
}

.lattice::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: color-mix(in srgb, var(--ink) 5.5%, transparent);
  --lattice-tile: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2230%22%20height%3D%2251.96%22%20viewBox%3D%220%200%2030%2051.96%22%3E%3Cpath%20d%3D%22M-30.0%20-34.6L-15.0%20-43.3L0.0%20-34.6L0.0%20-17.3M0.0%20-34.6L15.0%20-43.3L30.0%20-34.6L30.0%20-17.3M30.0%20-34.6L45.0%20-43.3L60.0%20-34.6L60.0%20-17.3M-45.0%20-8.7L-30.0%20-17.3L-15.0%20-8.7L-15.0%208.7M-15.0%20-8.7L0.0%20-17.3L15.0%20-8.7L15.0%208.7M15.0%20-8.7L30.0%20-17.3L45.0%20-8.7L45.0%208.7M-30.0%2017.3L-15.0%208.7L0.0%2017.3L0.0%2034.6M0.0%2017.3L15.0%208.7L30.0%2017.3L30.0%2034.6M30.0%2017.3L45.0%208.7L60.0%2017.3L60.0%2034.6M-45.0%2043.3L-30.0%2034.6L-15.0%2043.3L-15.0%2060.6M-15.0%2043.3L0.0%2034.6L15.0%2043.3L15.0%2060.6M15.0%2043.3L30.0%2034.6L45.0%2043.3L45.0%2060.6M-30.0%2069.3L-15.0%2060.6L0.0%2069.3L0.0%2086.6M0.0%2069.3L15.0%2060.6L30.0%2069.3L30.0%2086.6M30.0%2069.3L45.0%2060.6L60.0%2069.3L60.0%2086.6%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221%22%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-image: var(--lattice-tile);
  mask-image: var(--lattice-tile);
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
}

/* ---- The dark panel and its netting (§5, §8) -------------------------- *
 *
 * `--pitch` is the same colour in both themes, so this panel is the one part
 * of the product that does not change when the page does.
 *
 * **Two out-of-phase layers, squares kept square and orthogonal.** The
 * orthogonal grid is what does the recognition — a 45deg version reads as a
 * fence, not a net, which is the single most common way this motif is got
 * wrong. Out-of-phase is what stops the two layers beating against each other
 * into a visible pulse.
 *
 * The sway is **the only continuous animation in the product**: ~16s and ~22s,
 * ease-in-out, long enough that it is never noticed directly. Under
 * `prefers-reduced-motion` the durations collapse to 0s in tokens.css and this
 * stops dead, which is honouring the setting rather than acknowledging it.
 */
/* Both dark grounds rebind the ink tokens to their on-pitch values, so
   anything rendered inside them resolves against the panel instead of against
   the page. Without this every descendant that reaches for --ink, --text-help
   or a valence colour gets the page's near-black and disappears — the failure
   is total and silent, and it looks like the element did not render. */
.panel-dark,
.grass {
  --ink: var(--pitch-ink);
  --ink-body: var(--pitch-ink-body);
  --text-help: var(--pitch-text-help);
  --hairline: var(--pitch-hairline);
  --valence-good: var(--accent);
  color: var(--pitch-ink-body);
}

.panel-dark {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--pitch);
}

.panel-dark::before,
.panel-dark::after {
  content: "";
  position: absolute;
  inset: -8%;
  z-index: -1;
  pointer-events: none;
  --net: rgba(255, 255, 255, var(--texture-net-alpha));
  background-image: repeating-linear-gradient(
      90deg,
      var(--net) 0 1px,
      transparent 1px var(--texture-net-size)
    ),
    repeating-linear-gradient(
      0deg,
      var(--net) 0 1px,
      transparent 1px var(--texture-net-size)
    );
  animation: net-sway var(--sway-a) var(--ease) infinite;
}

.panel-dark::after {
  --texture-net-size: 34px;
  --texture-net-alpha: 0.06;
  animation-duration: var(--sway-b);
  animation-direction: reverse;
}

@keyframes net-sway {
  0%,
  100% {
    transform: translate3d(0, 0, 0) skewX(0deg);
  }
  50% {
    transform: translate3d(6px, -4px, 0) skewX(0.6deg);
  }
}

/* ---- Touchline (§5) --------------------------------------------------- *
 *
 * A section rule where a hairline is too quiet. **The uneven alpha is the
 * point** — worn paint, not a border. A clean 3px line is just a thick border
 * and reads as a mistake rather than as a material.
 */
.touchline {
  height: 3px;
  border: 0;
  /* currentColor, so the rule inks itself from whatever it is sitting on:
     near-black on paper, near-white inside .panel-dark and .grass, and it
     follows the theme without a second declaration anywhere. */
  background-color: currentColor;
  opacity: 0.5;
  -webkit-mask-image: var(--texture-touchline);
  mask-image: var(--texture-touchline);
}

/* ---- Mown grass band (§10) -------------------------------------------- *
 *
 * The full-bleed break on the public site, and the answer to "where does the
 * hero photograph go" — nowhere. A dark ground, repeating-gradient stripes and
 * an inset touchline rectangle. Convincing at any width, costs a few lines,
 * and has no licence attached to it.
 *
 * The stripes are two widths interleaved because a real mower leaves an
 * up-pass and a down-pass, not a single repeat.
 */
.grass {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--pitch);
}

.grass::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.045) 0 64px,
    transparent 64px 128px
  );
}

/* The inset rectangle: a penalty area drawn in worn paint. Inset rather than
   full-bleed so the band reads as a piece of pitch rather than as a border. */
.grass::after {
  content: "";
  position: absolute;
  inset: 18px;
  z-index: -1;
  pointer-events: none;
  border: 2px solid rgba(255, 255, 255, 0.16);
}

/* ---- The grass-blade full stop (§5) ----------------------------------- *
 *
 * Three tapered blades and a hexagon replacing a period. Blades large / tiny /
 * medium left to right, hexagon overlapping their roots. **It is the
 * signature.**
 *
 * **Once per viewport at most, and only at 26px and above** — below that the
 * blades collapse into a smudge and it is noise. It is drawn as an inline SVG
 * rather than a clip-path because a tapered blade is a curve, and a curve is
 * what a polygon cannot be.
 */
.blade-stop {
  display: inline-block;
  /* 44:54, the symbol's own ratio, so the artwork is never stretched. The
     viewBox bottom is the baseline, so `vertical-align: baseline` lands it
     with no magic offset — the moment a mark needs a hand-tuned `position:
     relative; top: -2px` it will need a different one at every size. */
  width: 0.496em;
  height: 0.62em;
  margin-left: 0.04em;
  vertical-align: baseline;
  color: var(--who-me);
}