/* trail.css: image mouse-trail layer for [data-trail] blocks (see js/trail.js). Photos sit behind the block's own content. */
[data-trail] { position: relative; isolation: isolate; }
/* z-index -1 inside the isolated block: above the block's background, below all of its content */
.trail { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; border-radius: inherit; }
.trail__img {
  position: absolute; left: 0; top: 0;
  width: clamp(104px, 11vw, 168px); aspect-ratio: 5 / 6; object-fit: cover;
  border: 5px solid #fff; border-radius: 18px;
  box-shadow: 0 18px 40px rgb(43 43 46 / .22);
  transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scale(0);
  opacity: 0;
  transition: transform .55s cubic-bezier(.16, 1, .3, 1), opacity .35s ease;
  will-change: transform, opacity;
}
.trail__img[data-on="1"] { transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scale(1); opacity: 1; }
/* the menu intro is a short block: let its trail spill into the section padding above and the tab row below */
.menu__head > .trail { inset: -96px -24px -72px; }