/* Store pictures that show the WHOLE page on hover (2026-11-07).

   Every store picture on the site is a 640x400 crop of the top of a page, so
   hovering one used to show nothing the visitor could not already see. Each
   design's full page is composed into assets/images/home/tpl/full/tpl-<n>.webp
   from its own section previews; hovering fetches that once and travels down it.

   The behaviour is keyed on [data-full] rather than on a page's own class, so
   both galleries share one implementation: the home page's moving wall
   (.h2-shot) and the /stores/ grid (.gimg). Any picture box can opt in by
   carrying data-full and being a positioned, clipping container.

   Nothing is fetched until someone hovers -- there are 58 of these at roughly
   160 KB each, and the page weight must not move until one is asked for.
   store-peek.js does the loading and sets --peek-shift / --peek-dur. */

[data-full]{position:relative;overflow:hidden;cursor:pointer;
  transition:box-shadow .25s,transform .25s,border-color .25s}

/* Hovering or tabbing to a tile lifts it and draws the ring. This lived on
   the home page's .h2-shot, so the /stores/ grid had the reveal but nothing
   saying a tile could be interacted with at all -- no pointer, no ring. One
   rule now covers both galleries.

   border-color is in there for /stores/, whose tiles carry a 1px resting
   border: without it the ring sits outside that line and reads as two
   borders. The home wall has no border, so the declaration does nothing. */
[data-full]:hover,[data-full]:focus-visible{outline:none;transform:translateY(-3px);border-color:transparent;
  box-shadow:0 18px 36px -18px rgba(13,13,18,.45),0 0 0 2px rgba(170,55,252,.55)}

/* aspect-ratio:auto and object-fit:fill are not decoration: both galleries
   style their own `img` with a fixed 8/5 ratio and object-fit:cover for the
   crop, and those would otherwise squash the full page back into a thumbnail. */
[data-full] .peek-full{position:absolute;top:0;left:0;z-index:1;width:100%;height:auto;max-width:none;
  aspect-ratio:auto;object-fit:fill;
  opacity:0;pointer-events:none;will-change:transform;transition:opacity .22s ease}

[data-full].is-peek:hover .peek-full,
[data-full].is-peek:focus-visible .peek-full{opacity:1;transform:translateY(var(--peek-shift,0px));
  transition:opacity .22s ease,transform var(--peek-dur,6s) linear .22s}

/* The resting crop sits under the full page. Any hover zoom on it would be
   visible through the fade, so it is held still while the reveal runs. */
[data-full].is-peek:hover img:not(.peek-full){transform:none}

/* Touch has no hover: the crop is all there is, and nothing is downloaded. */
@media (hover:none){
  [data-full] .peek-full{display:none}
}

/* Still show the whole page, just do not travel through it. */
@media (prefers-reduced-motion:reduce){
  [data-full].is-peek:hover .peek-full,
  [data-full].is-peek:focus-visible .peek-full{transform:none;transition:opacity .22s ease}
}