/* ==========================================================================
   AXI-x Image v0.1 — the score.                       (extension; not SNX core)
   image.js reads and writes numbers; everything visible about an image block
   is here. An image block (.im) is an ordinary .snx-b; the image fills it.
   ========================================================================== */
.im{overflow:hidden;background:var(--snx-paper-dim);min-height:0;min-width:0}
/* the image is positioned, not flowed, so the row never grows to its intrinsic height (type may grow a row; a picture may not) */
.im img{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--fx,50%) var(--fy,50%)}
/* law 3: a screenshot is not cropped; the remainder is paper */
.im[data-fit=contain]{background:var(--snx-paper)}
.im[data-fit=contain] img{object-fit:contain;object-position:50% 50%}
/* law 5: tone — the engine's glass pane over the image (multiply, .8), by the ledger's closure */
.im::after{content:'';position:absolute;inset:0;pointer-events:none;mix-blend-mode:multiply;opacity:.8;background:transparent;transition:background-color var(--snx-t-move) ease}
.im[data-tone=navy]::after{background:var(--snx-navy)}
.im[data-tone=sky]::after{background:var(--snx-sky)}
.im[data-tone=signal]::after{background:var(--snx-signal)}
.im[data-tone=mint]::after{background:var(--snx-mint)}
/* an image is content, not an empty field: the slivers (z1) pass behind it as they pass behind type (z2) */
.im{z-index:2}
/* law 6: plane −1 — the image behind a cut window, taller by its travel, rolled by the page */
.im[data-plane="-1"]{background:var(--snx-paper-dim);overflow:hidden;z-index:1}
.im[data-plane="-1"]::after{box-shadow:inset 0 12px 20px rgba(19,22,40,.38),inset 0 -5px 10px rgba(19,22,40,.16),inset 4px 0 10px rgba(19,22,40,.18);mix-blend-mode:normal;opacity:1;background:transparent;z-index:2}
.im[data-plane="-1"] img{
  height:calc(100% + var(--im-travel,2)*var(--snx-row));inset:auto 0 auto 0;top:0;
  animation:im-roll linear both;animation-timeline:view();animation-range:entry 0% exit 100%;
}
@keyframes im-roll{from{transform:translateY(0)}to{transform:translateY(calc(-1*var(--im-travel,2)*var(--snx-row)))}}
@supports not (animation-timeline:view()){.im[data-plane="-1"] img{animation:none;transform:translateY(calc(-.5*var(--im-travel,2)*var(--snx-row)))}}
@media (prefers-reduced-motion:reduce){.im[data-plane="-1"] img{animation:none;transform:translateY(calc(-.5*var(--im-travel,2)*var(--snx-row)))}}
/* the grids over an image, on request: both grids of the page, read from the block's span */
.im .snx-gridlines{opacity:0;transition:opacity 200ms ease;z-index:3;
  background-size:calc(100%/var(--s,1)) 100%,calc(100%/(var(--s,1)*var(--snx-over)/var(--snx-base))) 100%}
.im-grids .im .snx-gridlines,.im[data-grids] .snx-gridlines{opacity:1}
/* the edges found by the census, on request: one mark per edge at the top of the block */
.im .im-edge{position:absolute;top:0;bottom:0;width:1px;background:var(--snx-signal);z-index:4;opacity:0;pointer-events:none;mix-blend-mode:normal}
.im .im-edge::after{content:attr(data-d);position:absolute;top:4px;left:3px;font-family:var(--snx-mono);font-size:9px;color:var(--snx-chalk);background:var(--snx-ink);padding:1px 3px;letter-spacing:.04em}
.im-edges .im .im-edge{opacity:1}
/* the corner label: from what the script wrote */
.im::before{
  content:attr(data-box) ' · kept ' attr(data-kept) '% · ' attr(data-token) ' Δ' attr(data-dist);
  position:absolute;left:5px;top:4px;z-index:5;pointer-events:none;white-space:nowrap;
  font-family:var(--snx-mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--snx-chalk);
  background:rgba(19,22,40,.72);padding:2px 5px;
}
.im[data-plane="-1"]::before{content:'plane −1 · travel ' attr(data-travel-px) 'px · ' attr(data-speed) ' of page speed · roll ' attr(data-roll) 'px'}
.im[data-fit=contain]::before{content:attr(data-box) ' · letterbox ' attr(data-letterbox) ' · edges on a line ' attr(data-edges-near)}
.im[data-label=none]::before{content:none}
@media (max-width:639px){.im::before{font-size:8px;letter-spacing:.04em}}
@media (prefers-reduced-motion:reduce){.im::after,.im .snx-gridlines{transition:none}}