/* scatter.css, 2026-10-13
   "Floating canvas" gallery: an airy multi-column scatter with a fixed right-side
   minimap navigator (a strip of every frame + a viewport box that tracks the scroll).
   Progressive enhancement over .gal - gallery.css is the no-JS masonry fallback and
   gallery.js still powers the click-to-open lightbox. GPU-light: opacity/transform
   + one IntersectionObserver + one rAF-throttled scroll handler only. */

.gal.gal-scatter {
  columns: 5;                                   /* laptop: 5 floating columns */
  column-gap: clamp(22px, 3.2vw, 60px);
  max-width: 1540px;
  margin-inline: auto;
  padding: clamp(18px, 4vh, 46px) 64px clamp(40px, 8vh, 96px) 0;
}
.gal-scatter .gal-item {
  display: block;
  width: 100%;
  margin: 0 0 clamp(30px, 6vh, 118px);
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  cursor: pointer;
}
/* irregular vertical rhythm so it reads scattered, not gridded */
.gal-scatter .gal-item:nth-child(4n+1) { margin-bottom: clamp(62px, 12vh, 180px); }
.gal-scatter .gal-item:nth-child(5n+3) { margin-bottom: clamp(14px, 2.6vh, 44px); }
.gal-scatter .gal-item:nth-child(3n)   { margin-top: clamp(22px, 6vh, 96px); }
.gal-scatter .gal-item:nth-child(7n+2) { margin-top: clamp(40px, 9vh, 130px); }
.gal-scatter .gal-item img {
  width: 100%; height: auto; display: block; border-radius: 2px;
}
html.scatter-js .gal-scatter .gal-item { opacity: 0; transform: translateY(36px); transition: opacity .7s ease, transform .75s cubic-bezier(.2,.7,.2,1); }
html.scatter-js .gal-scatter .gal-item.in { opacity: 1; transform: none; }
@media (hover: hover) {
  .gal-scatter .gal-item img { transition: transform .55s cubic-bezier(.2,.7,.2,1); }
  .gal-scatter .gal-item:hover img { transform: scale(1.035); }
}

/* --- minimap navigator (the right-edge strip from the reference) --- */
.scatter-map {
  position: fixed; top: 50%; right: 12px; transform: translateY(-50%);
  width: 30px; z-index: 40;
  display: flex; flex-direction: column; gap: 3px;
  max-height: 80vh;
}
.scatter-map a {
  position: relative; display: block; width: 100%; flex: 1 1 auto; min-height: 7px;
  overflow: hidden; opacity: .32; transition: opacity .25s ease; border-radius: 1px;
}
.scatter-map a img { width: 100%; height: 100%; object-fit: cover; display: block; }
.scatter-map a.active { opacity: 1; }
.scatter-map:hover a { opacity: .55; }
.scatter-map:hover a.active { opacity: 1; }
.scatter-map-view {
  position: absolute; left: -4px; right: -4px; z-index: 2;
  border: 1px solid var(--fo-ink); border-radius: 2px; pointer-events: none;
  transition: top .12s linear, height .12s linear;
}

/* dense map (big sets): thinner rows so every frame fits the 80vh strip */
.scatter-map.dense { gap: 1px; }
.scatter-map.dense a { min-height: 2px; }

/* Collection galleries (fo-sub pages) use the Copenhagen frame: same 1320px
   wrap and gutter as .d-wrap so the gallery and header land identically. */
.fo-sub.fo-scatter-sub { max-width: 1320px; padding-inline: clamp(20px, 5vw, 72px); }

@media (min-width: 901px) and (max-width: 1240px) { .gal.gal-scatter { columns: 4; } }
@media (max-width: 900px) {
  .gal.gal-scatter { columns: 2; column-gap: clamp(14px, 3vw, 22px); padding: 10px 0 40px; }
  .scatter-map { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html.scatter-js .gal-scatter .gal-item { opacity: 1; transform: none; transition: none; }
}