/* =============================================================================
   artwork-zoom.css — desktop-only cursor-follow zoom for the artwork detail
   image. Linked only from pages/bibliographie.html, alongside artwork-zoom.js.

   Scope / safety:
     - Every rule that could change what's VISIBLE lives inside
       @media (min-width: 1024px). Rules outside that block only establish
       positioning context (position: relative / absolute) and a default
       opacity: 0 + pointer-events: none on the lens — none of that changes
       mobile/tablet layout or rendering, since an opacity-0, absolutely
       positioned element never affects its parent's box size or the normal
       document flow.
     - .artwork-zoom wraps the existing .artwork-detail__image (unchanged —
       same class, same src, same aspect-ratio/object-fit rules in
       artwork-info.css) purely to host the .artwork-zoom__lens layer.
       .artwork-zoom itself takes over the grid-column/width positioning
       that used to live on .artwork-detail__image (see
       artwork-detail-layout.css) so the desktop two-column layout is
       byte-for-byte unchanged.
     - js/artwork-zoom.js only ever toggles the .is-zoomed class inside a
       matchMedia('(min-width: 1024px)') guard, so the lens can never
       become visible on mobile/tablet even if this file is loaded there.

   Component ownership:
     .artwork-zoom          — wrapper; positioning context only, no visual styling
     .artwork-zoom__lens    — high-res (daniel-ortiz-studio-ceuse-macro.webp, Bibliographie's own
                               zoom source — see assets/artworks/ceuse/) layer,
                               panned via background-position in JS to follow
                               the cursor. Other artwork pages supply their own
                               macro photo inline, from their own
                               assets/artworks/{folder}/ — see the note in
                               pages/capitan-black.html.
   ============================================================================= */


/* ── Wrapper — positioning context only, no size/layout rules ────────────────
 * display: block matches the <img> it replaces as a grid/flow item; it adds
 * no width/height of its own; the wrapper's rendered size is still driven
 * entirely by the existing .artwork-detail__image rules on the <img> inside
 * it (and, on desktop, the grid-column/width rules in
 * artwork-detail-layout.css that now target .artwork-zoom instead).
 * ─────────────────────────────────────────────────────────────────────────── */

.artwork-zoom {
  position: relative;
  display: block;
}


/* ── High-res zoom layer ──────────────────────────────────────────────────── *
 * Hidden by default (opacity: 0, pointer-events: none) at every breakpoint —
 * this is what guarantees "use ceuse_macro only as the zoom source; never
 * shown in the normal view" holds even before the desktop media query below
 * is considered. inset: 0 makes it exactly match the wrapper's box, which
 * is itself exactly the size of .artwork-detail__image — no separate
 * sizing needed.
 *
 * background-size math: daniel-ortiz-studio-ceuse-macro.webp (assets/artworks/ceuse/) is
 * 2400 × 3163px; the artwork image
 * box is 500 × 659px on desktop (artwork-detail-layout.css /
 * artwork-info.css). 2400 / 500 = 4.8, 3163 / 659 ≈ 4.8 — the same scale
 * factor on both axes, so 480% / 480% maps the full high-res photo onto a
 * background-position range of 0%–100% with no distortion and no dead
 * space at the edges, giving a true ~4.8x magnification that pans edge to
 * edge as the cursor moves edge to edge.
 * ─────────────────────────────────────────────────────────────────────────── */

.artwork-zoom__lens {
  position: absolute;
  inset: 0;
  background-image: url("../../assets/artworks/ceuse/daniel-ortiz-studio-ceuse-macro.webp");
  background-repeat: no-repeat;
  background-size: 480% 480%;
  background-position: 50% 50%;      /* default before the first mousemove */
  opacity: 0;
  pointer-events: none;              /* never intercepts hover/click, at any breakpoint */
  transition: opacity 250ms ease;    /* smooth enter/leave, within the requested 200–300ms range */
}


/* ── Desktop-only interaction ─────────────────────────────────────────────── */

@media (min-width: 1024px) {

  .artwork-zoom {
    cursor: zoom-in;                 /* default affordance before hover */
  }

  .artwork-zoom.is-zoomed {
    cursor: grab;                    /* while zoomed, per spec */
  }

  .artwork-zoom.is-zoomed .artwork-zoom__lens {
    opacity: 1;
  }

}