/* =========================================================
   trail.css — cursor image trail
   Pairs with trail.js, which builds the layer and the cards itself.
   You never write trail markup, only mark the container.

   Theme it by setting these on the container, or on :root:
     --trail-size     card edge length   (default 280px)
     --trail-radius   corner radius      (default 0)
     --trail-shadow   card shadow        (default none)
   ========================================================= */

.trail {
  position: absolute;
  inset: 0;
  z-index: 1;               /* sits over a background, under the real content */
  overflow: hidden;         /* cards clip to the container, never the page */
  pointer-events: none;     /* links underneath stay clickable */
}

.trail img {
  position: absolute;
  top: 0;
  left: 0;
  /* Square by default. These stand in for project covers, and a portrait crop
     of a UI screen is the wrong shape for the thing it is meant to show. */
  width: var(--trail-size, 280px);
  height: var(--trail-size, 280px);
  object-fit: cover;
  border-radius: var(--trail-radius, 0);
  box-shadow: var(--trail-shadow, none);
  opacity: 0;               /* the animation owns opacity from here */
  will-change: transform, opacity;
}

@media (max-width: 1100px) { .trail img { --trail-size: 220px; } }

/* No cursor to chase on touch, and nothing to chase for someone who asked
   for less motion. trail.js also bails out in both cases; this is the belt
   to that pair of braces. */
@media (max-width: 760px)            { .trail { display: none; } }
@media (prefers-reduced-motion: reduce) { .trail { display: none; } }