/* tap-zoom (from apps/emiomer/public/assets/site.css .slide.zoom and buybox.js zoomable(), 25.10.2026; the keyboard
   part from apps/lash-room feature 15): a tap zooms the photo inside its own frame, at the point tapped; another tap
   zooms out. With a mouse the zoomed photo follows the pointer. Tune a site by overriding these tokens in its CSS. */
:root {
  --tz-scale: 2.1;                         /* how close it goes */
  --tz-ease: cubic-bezier(.16, 1, .3, 1);  /* expo.out */
  --tz-dur: .7s;
}
/* The frame stays still and clips; only the photo inside it scales (the individual scale property, so a transform the
   site or another tool sets on the same photo still works). The frame needs a size of its own. */
[data-zoom] { position: relative; overflow: hidden; cursor: zoom-in; -webkit-tap-highlight-color: transparent; }
[data-zoom] img { scale: 1; transition: scale var(--tz-dur) var(--tz-ease); }
[data-zoom].tz-on { cursor: zoom-out; }
[data-zoom].tz-on img { scale: var(--tz-scale); }
/* Panning with the mouse: the origin follows the pointer quickly, without the slow curve. */
[data-zoom].tz-pan img { transition: scale var(--tz-dur) var(--tz-ease), transform-origin .12s linear; }
[data-zoom]:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
/* An optional hint ("הקישו להגדלה"): fades out while zoomed. */
[data-zoom] [data-zoom-hint] { pointer-events: none; transition: opacity .4s; }
[data-zoom].tz-on [data-zoom-hint] { opacity: 0; }