/* Front page, when effects.joiner is on (src/_data/site.json): the Hockney "joiner" scroll effect from the CTC website mockup.
   The photo is split into overlapping panes (windows onto the same image) that drift apart as the band scrolls away from
   the centre of the screen and line up exactly when it is centred. Panes only change transform/opacity, so nothing repaints.
   Brand adaptation: pane tints limited to ctc-black, white and ctc-blue; the mockup's colour grade is not used. */
.joiner{position:relative;overflow:hidden;isolation:isolate;background:var(--ctc-black)}
.j-flat,.j-blur,.j-stage{position:absolute;inset:0;width:100%;height:100%}
.j-flat{display:none;background-repeat:no-repeat}
.j-blur{display:block}
.j-pane{position:absolute;overflow:hidden}
.j-img{position:absolute;background-repeat:no-repeat}
.j-fx{position:absolute;inset:0;pointer-events:none;opacity:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.joiner.live .j-pane,.joiner.live .j-img{will-change:transform,opacity}
.joiner.live .j-fx{will-change:opacity}

/* The plain photo stays until the panes are built (no JS, reduced motion, slow load) */
.joiner__fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.joiner.is-joined .joiner__fallback{display:none}

/* The photo break becomes a block holding the panes (same 360px / 220px heights as the approved page) */
div.photo-break{display:block}