/* EXPERIMENT: football-pitch outline behind the hero, drawn at the same true-isometric angle as PontaFlow.svg
   (30 degrees: the pitch's long axis rises to the right, its short axis falls to the right).
   To drop it, delete the <div class="pitch"> block in index.html, this <link> and the pitch-tune <script>.
   This departs from context/visual-design.md ("the page draws no isometric geometry of its own"); logged in content/draft.md.

   The pitch LINES and the HONEYCOMB each have their own strength and thickness, so they can be set independently.
   WHICH PART OF THE PITCH SHOWS is set by five of the variables. Change them here, or open the page with ?tune on the
   end of the URL to get a small panel with sliders and presets that prints the values to paste back in.
     --pitch-zoom   1 = the whole pitch just fits the page width; 2 = twice as close; below 1 = smaller than the page.
     --pitch-x      point of the pitch to look at, along its length: 0 = left goal line, 50 = halfway line, 100 = right goal line.
     --pitch-y      the same across its width: 0 = one touchline, 100 = the other.
     --pitch-ax     where on the hero that point is placed, from the left (0-100%).
     --pitch-ay     where on the hero that point is placed, from the top (0-100%).
     --pitch-opacity     strength of the pitch lines only.
     --pitch-line-width  thickness of the pitch lines only, in px.
     --pitch-hex         strength of the honeycomb only (0 turns it off).
     --pitch-hex-width   thickness of the honeycomb lines only, in px.
     --pitch-hex-size size of the hexagons: 1 = 1.4 m radius, 2 = twice as big, 0.5 = half (applied by js/experiments/pitch-tune.js).
     --pitch-hex-hover   strength of the honeycomb right under the cursor (it fades to --pitch-hex at the edge of the glow).
     --pitch-hover-radius  radius of the cursor glow, in metres on the pitch (it shows as an isometric ellipse). */

:root {
  --pitch-zoom: 1.39;
  --pitch-x: 50;
  --pitch-y: 50;
  --pitch-ax: 50%;
  --pitch-ay: 54%;
  --pitch-opacity: 0.08;
  --pitch-line-width: 2;
  --pitch-hex: 0.04;
  --pitch-hex-width: 1;
  --pitch-hex-size: 0.5;
  --pitch-hex-hover: 0.5;
  --pitch-hover-radius: 2.5;
}

/* Below 1200px the hero stacks (illustration on top, copy below), so the pitch is moved up to sit under the illustration
   instead of under the copy. Change --pitch-ay here to move it. */
@media (max-width: 1199.98px) {
  :root { --pitch-ay: 30%; }
}

main#top { position: relative; isolation: isolate; }

.pitch {
  position: absolute; z-index: -1; left: 0; right: 0; top: 0;
  height: calc(var(--stage) - var(--nav-h));
  overflow: hidden; pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 90% 92% at 50% 46%, #000 38%, transparent 100%);
          mask-image: radial-gradient(ellipse 90% 92% at 50% 46%, #000 38%, transparent 100%);
}
.pitch svg {
  position: absolute; left: var(--pitch-ax); top: var(--pitch-ay);
  width: calc(70vw * var(--pitch-zoom)); height: auto; overflow: visible;
  transform-origin: 0 0;
  /* Right to left: move the chosen pitch point to the origin, then apply the 30-degree isometric matrix
     (long axis -> up-right, short axis -> down-right). */
  transform: matrix(0.866, -0.5, 0.866, 0.5, 0, 0) translate(calc(var(--pitch-x) * -1%), calc(var(--pitch-y) * -1%));
  fill: none; stroke: rgba(255, 255, 255, var(--pitch-opacity)); stroke-width: var(--pitch-line-width); stroke-linejoin: round;
}
.pitch svg * { vector-effect: non-scaling-stroke; }
.pitch .grass { fill: url(#pitch-hex); stroke: none; vector-effect: none; }
.pitch .hex { fill: none; stroke: rgba(255, 255, 255, var(--pitch-hex)); stroke-width: var(--pitch-hex-width); }
/* Cursor glow on the honeycomb: brighter hexes inside a circle on the pitch surface (an isometric ellipse on screen). */
.pitch .hex-lit { fill: none; stroke: rgba(255, 255, 255, var(--pitch-hex-hover)); stroke-width: var(--pitch-hex-width); }
.pitch .grass-lit { fill: url(#pitch-hex-lit); stroke: none; vector-effect: none; opacity: 0; transition: opacity 0.35s ease; }
.pitch .grass-lit.is-lit { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .pitch .grass-lit { transition: none; } }
.pitch .spot { fill: rgba(255, 255, 255, var(--pitch-opacity)); stroke: none; vector-effect: none; }

/* ---- Tuning panel (only built when the URL has ?tune; visitors never see it) ---- */
.pitch-tune {
  position: fixed; z-index: 200; left: 16px; bottom: 16px; width: 280px; padding: 12px 14px;
  background: rgba(5, 5, 5, 0.94); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 8px;
  font: 12px/1.4 var(--font-mono, monospace); color: #C3C3C3;
}
.pitch-tune h2 { margin: 0 0 8px; font-size: 12px; font-weight: 500; color: #fff; }
.pitch-tune label { display: grid; grid-template-columns: 74px 1fr 40px; align-items: center; gap: 6px; margin: 3px 0; }
.pitch-tune output { text-align: right; color: #fff; }
.pitch-tune input[type=range] { width: 100%; }
.pitch-tune .presets { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 8px; }
.pitch-tune button { font: inherit; color: #fff; background: transparent; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 4px; padding: 2px 6px; cursor: pointer; }
.pitch-tune button:hover { border-color: #fff; }
.pitch-tune textarea { width: 100%; height: 190px; margin-top: 8px; box-sizing: border-box; font: inherit; color: #C3C3C3; background: #0A0A0A; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 4px; resize: none; }