/* css/pau-hana.css — P5-02. The Pau Hana paper signature style.
 *
 * "Paper texture plus sepia over a light base. Ties to your Etsy print.
 *  Nobody else's map looks like this."
 *
 * HOW IT HOOKS IN. The registry entry declares className:'pau-hana', which
 * tileOptions() appends to the tile layer container's class — so everything
 * here activates purely by picking the style in the switcher. No JS.
 *
 * THE PRINT ILLUSION, in three layers:
 *   1. The filter stack on the tile container: sepia + desaturation +
 *      REDUCED contrast + slight brightness lift. The tell of a cheap filter
 *      is uniform tint over intact digital contrast; ink on aged paper has
 *      compressed darks and a warm white that is never #fff.
 *   2. The paper sheet: a ::after element INSIDE the tile container — above
 *      the tiles, below every other pane by pane z-order — carrying the
 *      procedural seamless texture (assets/paper-texture.png, FFT-periodic,
 *      31 KB) in multiply blend. It is a large fixed sheet so it MOVES WITH
 *      THE MAP: the map is printed ON the paper, which is exactly the
 *      physical story a print tells. Texture varies across the frame; a
 *      screen-fixed grain slides against the chart and breaks the illusion
 *      the moment you pan.
 *   3. The vignette: viewport-anchored on the map container via :has() —
 *      a vignette is a property of the viewing frame, not the chart, so
 *      screen-fixed is correct for it. STACKING CONSTRAINT, measured, not
 *      guessed: Leaflet's .leaflet-map-pane is transformed, which isolates
 *      its stacking context — a sibling pseudo-element cannot sit between
 *      panes, only under or over ALL of them. The vignette therefore rides
 *      above the panes (z 800, under controls at 1000) and is kept edge-only
 *      and faint so pins stay crisp; it is pointer-events:none so nothing
 *      loses a tap. The paper sheet (layer 2) obeys the below-the-pins rule.
 *
 * LEGIBILITY WINS, EVERY TIME. Verified by screenshot at z11/14/16 in both
 * modes; if a future tweak dims labels, back the treatment off first.
 *
 * VARIANTS — Dan picks one, switching is one word on the registry entry's
 * className ('pau-hana' alone = Aged linen, the default):
 *   pau-hana--bleach   "Sun-bleached chart" — lightest touch, faded noon
 *   (default)          "Aged linen"         — the wall-chart middle
 *   pau-hana--tobacco  "Tobacco and ink"    — deepest, evening lamplight
 */

/* ---- 1. the ink: filter stack on the tile container ---------------------- */

.atlas-basemap-tiles.pau-hana {
  /* Aged linen (default): warm sepia, compressed contrast, no digital snap. */
  filter: sepia(0.72) saturate(0.72) contrast(0.9) brightness(0.99)
          hue-rotate(-7deg);
}

.atlas-basemap-tiles.pau-hana.pau-hana--bleach {
  filter: sepia(0.5) saturate(0.5) contrast(0.9) brightness(1.08)
          hue-rotate(-4deg);
}

.atlas-basemap-tiles.pau-hana.pau-hana--tobacco {
  filter: sepia(0.92) saturate(0.78) contrast(0.96) brightness(0.88)
          hue-rotate(-10deg);
}

/* ---- 2. the paper: multiply sheet riding with the map -------------------- */
/* A 16384px sheet centred on the layer origin. Leaflet re-anchors its pixel
 * origin every zoom, so offsets stay small and the sheet never runs out on a
 * bounded Oahu map. Background paint is viewport-clipped by the compositor —
 * the size costs nothing until looked at. z-index 999, MEASURED not guessed:
 * GridLayer "level" divs inside this container carry z-indexes up to the
 * style's maxZoom (20 here) — a lower value paints the paper UNDER the tiles
 * and multiply makes it invisible (observed: flat cream, std 3.4). The pane
 * itself has position+z-index (js/map.js), so its stacking context contains
 * this 999 — it can never rise above other panes. */

.atlas-basemap-tiles.pau-hana::after {
  content: '';
  position: absolute;
  left: -8192px;
  top: -8192px;
  width: 16384px;
  height: 16384px;
  z-index: 999;
  pointer-events: none;
  background: url('../assets/paper-texture.png') repeat;
  background-size: 256px 256px;
  mix-blend-mode: multiply;
  opacity: 0.78;
}

.atlas-basemap-tiles.pau-hana.pau-hana--bleach::after { opacity: 0.55; }
.atlas-basemap-tiles.pau-hana.pau-hana--tobacco::after { opacity: 0.95; }

/* ---- 3. paper-white ground + vignette on the frame ----------------------- */
/* Where tiles have not loaded yet, the void should be paper, not app-dark. */

.leaflet-container:has(.atlas-basemap-tiles.pau-hana) {
  background: #ece1c6;
}

.leaflet-container:has(.atlas-basemap-tiles.pau-hana)::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 800;               /* above panes (<=700), below controls (1000) */
  pointer-events: none;       /* nothing loses a tap */
  /* Edge-only: dead-transparent centre so pins and labels keep full snap. */
  background:
    radial-gradient(ellipse 115% 100% at 50% 46%,
      transparent 52%,
      rgba(96, 72, 32, 0.14) 80%,
      rgba(62, 43, 16, 0.34) 100%);
}

.leaflet-container:has(.atlas-basemap-tiles.pau-hana--bleach)::after {
  background:
    radial-gradient(ellipse 122% 108% at 50% 46%,
      transparent 60%,
      rgba(100, 78, 38, 0.10) 84%,
      rgba(72, 52, 22, 0.22) 100%);
}

.leaflet-container:has(.atlas-basemap-tiles.pau-hana--tobacco)::after {
  background:
    radial-gradient(ellipse 108% 95% at 50% 46%,
      transparent 46%,
      rgba(74, 52, 18, 0.20) 78%,
      rgba(46, 30, 9, 0.44) 100%);
}