/* ------------------------------------------------------------------
   ASCII figures — reusable pair (used by the Categories slider)
   ------------------------------------------------------------------ */
.ascii-figures {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Hover is tracked on window, so the layer itself must not eat pointer
       events from the nav or the login link sitting above it. */
    pointer-events: none;
    z-index: 0;
}

.ascii-figure {
    position: relative;
    width: 40%;
    min-width: 200px;
    will-change: transform;
}

/* The <img> is a pixel source, not a picture: it is pulled out of flow so the
   canvas defines the wrapper's height. That matters because with fit:"subject"
   the canvas is a crop of the image and the two no longer share an aspect
   ratio. Also overrides the global `img { height: 100%; object-fit: cover }`. */
.ascii-figure img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    object-fit: fill;
    opacity: 0;
    pointer-events: none;
}

.ascii-figure canvas {
    display: block;
    width: 100%;
    height: auto;
}

/* ------------------------------------------------------------------
   Uploaded banner picture (Categories > Category page banner).

   A left/right pair sized like original built-in pairs: 80% of the
   width between them (40% each for an even pair), pushed to opposite
   edges, centred in the visible hero (the sticky header hides its last
   --expo-header-h) and free to sit behind title. --share is each
   side's part of that 80%, from image's pixel width (category.php).
   A figure takes its full width unless too tall that it
   outgrows the hero, solution is then fitted by height.
   ------------------------------------------------------------------ */
.ascii-figures--custom {
    bottom: var(--expo-header-h, 0px);
    align-items: stretch;
}

.ascii-figures--custom .ascii-figure {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(80% * var(--share, 0.5));
    min-width: 0;
}

.ascii-figures--custom .ascii-figure canvas {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}

/* Two halves of one picture (ascii_figures.js join:"auto" adds .is-joined):
   the joined picture covers whole visible hero, corner to corner, with title over it. 
   Each half fills its 50% by whichever of width or
   height needs more (--ar is the canvas's width/height, set by
   ascii_figures.js), and zooms away from it so
   the parallax overscan never pulls seam open.*/
.ascii-figures--custom.is-joined {
    top: 0;
    bottom: var(--expo-header-h, 0px);
    padding: 0;
    justify-content: center;
}

.ascii-figures--custom.is-joined .ascii-figure {
    width: 50%;
    container-type: size;
}

.ascii-figures--custom.is-joined .ascii-figure canvas {
    flex-shrink: 0;
    width: calc(max(100cqw, 100cqh * var(--ar, 1)) * var(--zoom, 1));
    max-width: none;
    max-height: none;
}

.ascii-figures--custom.is-joined .ascii-figure:first-child {
    justify-content: flex-end;
    transform-origin: right center;
}

.ascii-figures--custom.is-joined .ascii-figure:last-child {
    justify-content: flex-start;
    transform-origin: left center;
}


/* --focus (0 top to 1 bottom) and --focus-x (0 left to 1 right), set per
   category, pick which part of a picture bigger than the hero stays in
   view and 0.5 keeps it centred. Each half overflows away from the seam using the
   same amount (100% - 100cqw), moving both by it keeps them joined.*/
.ascii-figures--custom.is-joined .ascii-figure {
    align-items: flex-start;
}

.ascii-figures--custom.is-joined .ascii-figure canvas {
    translate: calc((100% - 100cqw) * (1 - 2 * var(--focus-x, 0.5))) calc((100cqh - 100%) * var(--focus, 0.5));
}

/* --zoom (set per category) scales the art: a joined picture through its
   width above, a separate pair here. */
.ascii-figures--custom:not(.is-joined) .ascii-figure canvas {
    scale: var(--zoom, 1);
}