/* ==========================================================================
   path-map.css — the ride's map, and the page tint. See js/path-map.js and
   js/tint.js.

   THE BOX IS FIGMA 14619:12641: 184 x 265 at 10,10 — the same corner the home
   page's map takes, and deliberately the same instrument. What differs is the
   proportion (that one is 283x142, landscape; this one is portrait) because
   what it has to show differs: a cursor inside a screen there, a whole closed
   loop here.

   THE HATCH IS THE HOME PAGE'S, borrowed by using its variables rather than by
   restating its numbers — css/hud.css owns --hatch-angle, --hatch-ink,
   --hatch-thick and --hatch-period, and this reads them. Change the pattern
   there and both maps change together, which is the point of them being the
   same instrument. The only thing set here is the INK, because that page is
   dark and this one is white paper: the same rgba(255,255,255,.11) would be
   invisible.
   ========================================================================== */

.pmap{
  position: fixed;
  left: 10px; top: 10px;
  width: 184px; height: 265px;
  z-index: 42;
  overflow: hidden;
  /* IT IS AN INSTRUMENT, NOT A CONTROL. The gallery reads the wheel across the
     whole viewport; a 184x265 box that swallowed one would be a rectangle of
     the page where the ride stops. */
  pointer-events: none;
  /* THE HOME PAGE'S HATCH IS rgba(255,255,255,.11) ON BLACK. This page is
     white paper, so the same value is invisible — the ink is the one thing
     that cannot be borrowed and is set here. */
  --hatch-ink: rgba(0, 0, 0, .13);
}

/* The drifting hatch, exactly as css/hud.css builds it — a repeating gradient
   on its own layer, translated by one horizontal period so the loop closes on
   a character boundary rather than mid-stripe. */
.pmap::before{
  content: "";
  position: absolute; top: 0; bottom: 0;
  left: -8px; right: -8px;
  background: repeating-linear-gradient(var(--hatch-angle, 105deg),
      var(--hatch-ink) 0px, var(--hatch-ink) var(--hatch-thick, .5px),
      transparent var(--hatch-thick, .5px), transparent var(--hatch-period, 5px));
  animation: hud-hatch var(--hatch-speed, .313s) linear infinite;
}

.pmap canvas{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
}

/* The four corner ticks, the same 3x3 the home page's map carries. */
.pmap__tick{
  position: absolute;
  width: 3px; height: 3px;
  background: rgba(0, 0, 0, .45);
}
.pmap__tick--tl{ left: 0;  top: 0; }
.pmap__tick--tr{ right: 0; top: 0; }
.pmap__tick--bl{ left: 0;  bottom: 0; }
.pmap__tick--br{ right: 0; bottom: 0; }

/* ---------------- the page tint -------------------------------------------
   js/tint.js writes the colour, the blend and the strength; this only says
   where the sheet is and how far up the stack.

   z-index 55 IS THE WHOLE RULE. The bar is 60, so the tint passes under it and
   the bar stays the one colour it is on every page. Everything else on the
   page paints below 55 and is covered.

   NO `isolation` ANYWHERE ABOVE IT. mix-blend-mode blends an element with its
   backdrop inside the nearest stacking context that isolates, so an
   `isolation: isolate` on an ancestor would quietly reduce this to blending
   with nothing. It is a child of the Barba container, which is a stacking
   context but does not isolate — so the blend reaches the whole page. */
.tint{
  position: fixed;
  inset: 0;
  z-index: 55;
  pointer-events: none;
}