/* imagetrail.css — effetto "image trail" (Variante 6) SOLO su contact.html.
   Le tile seguono il cursore nella hero. Puramente decorativo (aria-hidden):
   il container e' trasparente e le immagini partono a opacity:0, rivelate dal JS.
   Se il JS non parte, non resta nessun box visibile (nessun elemento "fantasma").
   La grana + vignetta del sito (body::after/::before, z-index:9990) restano SOPRA
   il trail: coerenza filmica garantita. Il cursore custom (z-index:900) resta sopra. */

/* La hero diventa il contenitore-scena; il testo sta sopra al trail. */
.page-top { position: relative; }
.page-top > .label,
.page-top > h1,
.page-top > .lead { position: relative; z-index: 1; }

.lr-trail {
  position: absolute;
  inset: 0;
  z-index: 0;              /* sotto al testo (z-index:1), sopra allo sfondo */
  pointer-events: none;    /* non blocca mai testo, form o cursore custom */
  overflow: visible;       /* le tile possono debordare dalla hero */
}

.lr-trail .content__img {
  position: absolute;
  top: 0;
  left: 0;
  width: clamp(140px, 15vw, 200px);
  aspect-ratio: 1.3;
  border-radius: 10px;
  opacity: 0;              /* stato iniziale: lo rivela il JS via GSAP */
  overflow: hidden;
  will-change: transform, filter;
  box-shadow: 0 18px 50px -20px rgba(0, 0, 0, .7);
}

.lr-trail .content__img-inner {
  position: absolute;
  top: -12px;
  left: -12px;
  width: calc(100% + 24px);
  height: calc(100% + 24px);
  background-position: 50% 50%;
  background-size: cover;
  will-change: transform;
}

/* Sorgenti: WebP con fallback JPG nella stessa regola.
   I browser che capiscono image-set() usano il .webp; gli altri ripiegano
   sull'url(.jpg) della riga precedente. Niente <img>, niente rumore per screen reader. */
.lr-trail .t01 { background-image: url('../img/trail-01.jpg'); background-image: image-set(url('../img/trail-01.webp') type('image/webp'), url('../img/trail-01.jpg') type('image/jpeg')); }
.lr-trail .t02 { background-image: url('../img/trail-02.jpg'); background-image: image-set(url('../img/trail-02.webp') type('image/webp'), url('../img/trail-02.jpg') type('image/jpeg')); }
.lr-trail .t03 { background-image: url('../img/trail-03.jpg'); background-image: image-set(url('../img/trail-03.webp') type('image/webp'), url('../img/trail-03.jpg') type('image/jpeg')); }
.lr-trail .t04 { background-image: url('../img/trail-04.jpg'); background-image: image-set(url('../img/trail-04.webp') type('image/webp'), url('../img/trail-04.jpg') type('image/jpeg')); }
.lr-trail .t05 { background-image: url('../img/trail-05.jpg'); background-image: image-set(url('../img/trail-05.webp') type('image/webp'), url('../img/trail-05.jpg') type('image/jpeg')); }
.lr-trail .t06 { background-image: url('../img/trail-06.jpg'); background-image: image-set(url('../img/trail-06.webp') type('image/webp'), url('../img/trail-06.jpg') type('image/jpeg')); }
.lr-trail .t07 { background-image: url('../img/trail-07.jpg'); background-image: image-set(url('../img/trail-07.webp') type('image/webp'), url('../img/trail-07.jpg') type('image/jpeg')); }
.lr-trail .t08 { background-image: url('../img/trail-08.jpg'); background-image: image-set(url('../img/trail-08.webp') type('image/webp'), url('../img/trail-08.jpg') type('image/jpeg')); }
.lr-trail .t09 { background-image: url('../img/trail-09.jpg'); background-image: image-set(url('../img/trail-09.webp') type('image/webp'), url('../img/trail-09.jpg') type('image/jpeg')); }
.lr-trail .t10 { background-image: url('../img/trail-10.jpg'); background-image: image-set(url('../img/trail-10.webp') type('image/webp'), url('../img/trail-10.jpg') type('image/jpeg')); }
.lr-trail .t11 { background-image: url('../img/trail-11.jpg'); background-image: image-set(url('../img/trail-11.webp') type('image/webp'), url('../img/trail-11.jpg') type('image/jpeg')); }
.lr-trail .t12 { background-image: url('../img/trail-12.jpg'); background-image: image-set(url('../img/trail-12.webp') type('image/webp'), url('../img/trail-12.jpg') type('image/jpeg')); }

/* Touch: l'effetto segue il DITO (imagetrail.js, modalita' touch) — tile piu'
   piccole e leggere. Su reduced-motion resta spento del tutto. */
@media (hover: none) {
  .lr-trail .content__img { width: clamp(104px, 30vw, 150px); }
}
@media (prefers-reduced-motion: reduce) {
  .lr-trail { display: none; }
}