/* Frame zoom hover: the photo grows inside a frame that stays put.
   Markup: <a class="card" data-fzh-card> <div class="fzh"><img ...></div> ... </a>
   The frame (.fzh) clips; its first-level media (img, video, picture, svg or .fzh__media) scales.
   Trigger: hovering the frame itself, or anything marked [data-fzh-card] around it (the whole card),
   plus keyboard focus on that card. Measured from Patty Wagon's menu cards (brand.css "hover details"). */
.fzh {
  --fzh-scale: 1.06;                         /* zoom at rest under the pointer */
  --fzh-dur: .7s;                            /* in and out */
  --fzh-ease: cubic-bezier(.16, 1, .3, 1);   /* expo-like out: 63% of the zoom in the first 100ms */
  --fzh-origin: 50% 50%;                     /* where the photo grows from */
  --fzh-radius: 0px;                         /* round the frame; the photo stays clipped to it */
  display: block;
  position: relative;
  overflow: hidden;
  overflow: clip;
  border-radius: var(--fzh-radius);
  isolation: isolate;                        /* keeps rounded corners clipping while the child scales (Safari) */
}
.fzh > :is(img, video, picture, svg, .fzh__media) {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: var(--fzh-origin);
  transition: scale var(--fzh-dur) var(--fzh-ease);
}
.fzh > picture > img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* forced state: demos, a "featured" card, or JS that wants it on (class on the frame or the card) */
.fzh.is-zoomed > :is(img, video, picture, svg, .fzh__media),
.is-zoomed[data-fzh-card] .fzh > :is(img, video, picture, svg, .fzh__media) { scale: var(--fzh-scale); }

/* real pointers only: touch screens would stick the zoom on after a tap */
@media (hover: hover) {
  .fzh:hover > :is(img, video, picture, svg, .fzh__media),
  [data-fzh-card]:hover .fzh > :is(img, video, picture, svg, .fzh__media) { scale: var(--fzh-scale); }
}
/* keyboard: the card (or a link inside it) has visible focus */
[data-fzh-card]:focus-visible .fzh > :is(img, video, picture, svg, .fzh__media),
[data-fzh-card]:has(:focus-visible) .fzh > :is(img, video, picture, svg, .fzh__media) { scale: var(--fzh-scale); }

@media (prefers-reduced-motion: reduce) {
  .fzh > :is(img, video, picture, svg, .fzh__media) { transition: none; scale: none !important; }
}