[data-zoom] { cursor:zoom-in; transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s cubic-bezier(.2,.8,.2,1); }
  [data-zoom]:hover { transform:translateY(-3px); box-shadow:0 14px 34px rgba(0,0,0,.10); }
  .zoom-back { position:fixed; inset:0; z-index:50; background:rgba(16,16,16,0); backdrop-filter:blur(0px); -webkit-backdrop-filter:blur(0px); transition:background .45s ease, backdrop-filter .45s ease, -webkit-backdrop-filter .45s ease; cursor:zoom-out; }
  .zoom-back.on { background:rgba(16,16,16,.72); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
  .zoom-img { position:fixed; z-index:51; object-fit:cover; object-position:var(--zp, center); background:#fff; border-radius:14px; box-shadow:0 30px 80px rgba(0,0,0,.35); cursor:zoom-out;
    transition:left .55s cubic-bezier(.2,.8,.2,1), top .55s cubic-bezier(.2,.8,.2,1), width .55s cubic-bezier(.2,.8,.2,1), height .55s cubic-bezier(.2,.8,.2,1), border-radius .55s ease, object-position .55s ease; }
  .zoom-cap { position:fixed; z-index:51; left:0; right:0; text-align:center; color:#eee; font-size:15px; opacity:0; transition:opacity .4s ease .2s; pointer-events:none; padding:0 16px; }
  .zoom-cap.on { opacity:1; }
  @media (prefers-reduced-motion: reduce) { .zoom-img, .zoom-back, [data-zoom] { transition:none; } }