/* ===========================================================================
 * STRIP TILEMAP — autotiled underground backdrop
 *
 * Mounts on .accordion-strip.has-tilemap. Mirrors the .has-panorama /
 * .has-room pattern: a child div absolutely-positioned over the strip's
 * full bounds, painted by js/tilemap.js with a <canvas>. Header +
 * content sit above via z-index.
 *
 * The canvas's intrinsic resolution is set to its CSS pixel size so
 * tiles render at native 1:1. image-rendering: pixelated keeps edges
 * crisp if the browser ever does fractional scaling (HiDPI fallback,
 * sub-pixel layout, etc.) — without it the composite would soften.
 *
 * Paired with js/tilemap.js which:
 *   (a) loads assets/tileset.png + assets/bg_tile.png
 *   (b) generates noise-driven Boolean grids per terrain
 *   (c) blob-47 autotiles each terrain into the canvas
 *   (d) registers its own debug target (F4 toggle) against
 *       debug-configs/tilemap.json
 * ===========================================================================
 */

.strip-tilemap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Profiling flag: `?noTilemap` (js/flags.js) adds body.no-tilemap and
   js/main.js skips initTilemap() — so no canvases are created and no
   rAF/listeners run (zero tilemap compute). Hiding the (now empty)
   container too keeps the disabled strip visually plain (just its base
   section color) and robust against any future .strip-tilemap styling. */
body.no-tilemap .strip-tilemap { display: none !important; }

/* Shared canvas styles only. width/height are NOT set here because
   .strip-tilemap hosts two canvases with different sizing models:
   the static tilemap canvas uses inline `width:100%; height:100%` to
   fill the strip, while the animated lava strip uses absolute
   positioning + intrinsic canvas dimensions so its height stays
   constant as the strip expands/collapses (driven by canvas.width /
   canvas.height attributes set in js/tilemap.js's fitLavaCanvas). */
.strip-tilemap canvas {
  display: block;
  image-rendering: pixelated;
}

/* Background motion — vertical scroll-parallax (collapsed) + slight
   zoom transition (expand/collapse). Both effects are pure CSS
   transforms on the static tilemap canvas: a single compositor layer
   is promoted via will-change, then translated/scaled. No repaint —
   the canvas's rendered content is reused frame-to-frame, only the
   composite step shifts pixels around.

   --tm-parallax-y is JS-driven: js/tilemap.js writes it on every rAF
     based on the strip's getBoundingClientRect().top, gated to only
     apply when the strip is NOT .active (collapsed).
   --tm-zoom is CSS-driven: the .active class swaps it from 1 to
     var(--tm-zoom-target, 1.05). @property registration makes the
     variable interpolatable, so `transition: --tm-zoom` produces a
     smooth scale animation during the class toggle. JS overrides
     --tm-zoom-target via inline style on the canvas to expose the
     ZOOM_EXPANDED debug knob. */
@property --tm-zoom {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}

.tilemap-static {
  /* transform-origin is `center top` (not center center) because the
     static canvas is now a FIXED height (the strip's expanded height,
     set by js/tilemap.js) rather than tracking the strip's animating
     height — this is what lets the ResizeObserver stop re-rendering on
     every expand frame. A top pivot keeps the zoom scaling the SAME
     visible content regardless of how tall the canvas is or how much of
     it the collapsed strip reveals; a center pivot would scale around a
     point far below the visible region when collapsed. If the collapsed
     zoom (BG_ZOOM_COLLAPSED) reads differently than before, retune it. */
  transform-origin: center top;
  transform: translate3d(0, var(--tm-parallax-y, 0px), 0) scale(var(--tm-zoom));
  transition: --tm-zoom var(--tm-zoom-duration, 1.5s) cubic-bezier(0.25, 0, 0, 1);
  will-change: transform;
  --tm-zoom: var(--tm-zoom-collapsed, 1);
}

.accordion-strip.has-tilemap.active .tilemap-static {
  --tm-zoom: var(--tm-zoom-expanded, 1.05);
}

.accordion-strip.has-tilemap > .strip-header,
.accordion-strip.has-tilemap > .strip-content {
  position: relative;
  z-index: 1;
}