/* ==========================================================================
   PROGETTI: il telaio attorno alle card
   ==========================================================================
   Le card (.vetrine) non si toccano: markup, progetti.css e animazioni
   restano quelli di prima. Qui cambia solo cio' che le circonda.

   Ogni card si compone dai suoi strati. pr.js crea dietro la lista uno
   strato .pr-telaio (aria-hidden) con, per ogni card, un gruppo di lastre
   alle sue misure: ombra di quota, lastra margine, lastra padding con la
   fascia dei colori della card, riquadro di selezione, lampo di
   ridipintura. Mentre la card entra, lei e il suo gruppo si muovono con le
   stesse variabili (--pr-s separazione, --pr-o opacita', --pr-a angolo): la
   card solo con le proprieta' individuali translate/rotate/scale e opacity
   sul riquadro intero, mai transform (che e' del suo hover) e mai dentro.
   A fine ingresso tutto torna all'identita'.

   Senza JS, con movimento ridotto o in modalita' leggera: le card stanno
   nella loro colonna, ferme e complete.
   ========================================================================== */

#progetti.pr {
  --pr-dy: 40px;                 /* quanto la card sale mentre si compone */
  --pr-z: 240px;                 /* profondita' della lastra piu' lontana */
  --pr-su: 84px;                 /* di quanto la lastra piu' lontana sale sullo schermo */
  --pr-prospettiva: 1200px;
  position: relative;
  isolation: isolate;
  overflow-x: clip;
}
@media (min-width: 720px) { #progetti.pr { --pr-dy: 72px; --pr-su: 110px; } }

/* ---------- Testata del capitolo ---------- */
#progetti .pr-testa {
  position: relative;
  z-index: var(--z-contenuto);
  display: grid;
  gap: var(--s-4);
  margin-block-end: var(--s-7);
}
#progetti .pr-testa h2 { max-width: 15ch; }
#progetti .pr-testa .pr-lead { max-width: 44ch; }
@media (min-width: 720px) {
  #progetti .pr-testa { gap: var(--s-5); margin-block-end: var(--s-8); }
}
@media (min-width: 1080px) {
  #progetti .pr-testa { margin-block-end: var(--s-9); }
}

/* ---------- Misura: a integrazione finita il capitolo sta nella gabbia ----
   Prima (body senza .mondo) la misura e' ancora quella del foglio vecchio. */
body.mondo #progetti > .pr-testa,
body.mondo #progetti > .vetrine {
  width: min(100% - 2 * var(--s-gutter), var(--gabbia));
  margin-inline: auto;
}

/* Le card stanno sopra il telaio. Posizione e quota del contenitore, niente
   di piu': non e' dentro .vetrine * quindi non entra nella firma delle card. */
#progetti .vetrine {
  position: relative;
  z-index: var(--z-contenuto);
}

/* ---------- Le card sul telaio ----------
   L'ingresso e' del riquadro dell'<article>: opacity, translate, rotate e
   scale (non transform: quello e' dell'hover). --pr-s e --pr-o li scrive
   pr.js; senza valori tutto e' identita'. */
#progetti.pr-armato .vetrine .lista-progetti,
#progetti.pr-armato .vetrine .lista-progetti > .card-sorso-wrapper {
  perspective: var(--pr-prospettiva);
  perspective-origin: var(--pr-ox, 50%) var(--pr-oy, 50%);
}
#progetti.pr-armato .vetrine .lista-progetti > .vetrina,
#progetti.pr-armato .vetrine .lista-progetti > .card-sorso-wrapper > .vetrina {
  opacity: var(--pr-o, 1);
  translate: 0 calc(var(--pr-s, 0) * var(--pr-dy) * var(--moto, 1)) 0;
  rotate: 1 var(--pr-tw, 0.14) 0 calc(var(--pr-s, 0) * var(--pr-a, 10) * 1deg * var(--moto, 1));
  scale: calc(1 - var(--pr-s, 0) * 0.05 * var(--moto, 1));
}

/* ---------- Il telaio ---------- */
#progetti .pr-telaio {
  position: absolute;
  inset: 0;
  z-index: var(--z-scena);
  pointer-events: none;
  perspective: var(--pr-prospettiva);
  perspective-origin: var(--pr-ox, 50%) var(--pr-oy, 50%);
}

/* Un gruppo per card, alle sue misure. Prende le stesse translate/rotate/scale
   della card; le lastre dentro si separano in profondita'. */
#progetti .pr-gruppo {
  position: absolute;
  --pr-r: 34px;
  --pr-tinta: color-mix(in oklab, var(--c, var(--c-sel)) 58%, var(--c-ink));
  transform-style: preserve-3d;
  translate: 0 calc(var(--pr-s, 0) * var(--pr-dy) * var(--moto, 1)) 0;
  rotate: 1 var(--pr-tw, 0.14) 0 calc(var(--pr-s, 0) * var(--pr-a, 10) * 1deg * var(--moto, 1));
  scale: calc(1 - var(--pr-s, 0) * 0.05 * var(--moto, 1));
}
#progetti .pr-gruppo > * { position: absolute; display: block; }

/* La quota: l'ombra della card sul foglio, sempre. Va con l'opacita' della card. */
#progetti .pr-om {
  inset: 0;
  border-radius: var(--pr-r);
  box-shadow: var(--o-strato-alto);
  opacity: var(--pr-o, 1);
}

/* Le due lastre fantasma: margine (fuori, piu' lontana) e padding (alla misura
   della card, con la fascia dei suoi colori). */
#progetti .pr-m,
#progetti .pr-p {
  opacity: min(1, calc(var(--pr-s, 0) * 1.6));
}
#progetti .pr-m {
  inset: -22px;
  border-radius: calc(var(--pr-r) + 22px);
  background-color: var(--bm-margine-velo);
  translate: 0 calc(var(--pr-s, 0) * var(--pr-su) * -1 * var(--moto, 1)) calc(var(--pr-s, 0) * var(--pr-z) * -1 * var(--moto, 1));
}
#progetti .pr-p {
  inset: 0;
  border-radius: var(--pr-r);
  background-color: var(--bm-padding-velo);
  overflow: hidden;
  translate: 0 calc(var(--pr-s, 0) * var(--pr-su) * -0.45 * var(--moto, 1)) calc(var(--pr-s, 0) * var(--pr-z) * -0.5 * var(--moto, 1));
}
#progetti .pr-p .pr-fascia {
  position: absolute;
  inset: 0 0 auto;
  display: flex;
  block-size: 10px;
}
#progetti .pr-p .pr-fascia b { display: block; min-inline-size: 2px; background-color: var(--c, var(--strato)); }

/* Il riquadro di selezione, con le quattro maniglie, nel colore della card
   (portato verso l'ink perche' regga anche sul foglio chiaro). */
#progetti .pr-sel {
  inset: -8px;
  border: 1.5px solid var(--pr-tinta);
  border-radius: var(--r-1);
  opacity: min(1, calc(var(--pr-s, 0) * 2.4));
  background:
    linear-gradient(var(--c-superficie) 0 0) 2px 2px / 3px 3px no-repeat,
    linear-gradient(var(--c-superficie) 0 0) right 2px top 2px / 3px 3px no-repeat,
    linear-gradient(var(--c-superficie) 0 0) left 2px bottom 2px / 3px 3px no-repeat,
    linear-gradient(var(--c-superficie) 0 0) right 2px bottom 2px / 3px 3px no-repeat,
    linear-gradient(var(--pr-tinta) 0 0) 0 0 / 7px 7px no-repeat,
    linear-gradient(var(--pr-tinta) 0 0) right 0 top 0 / 7px 7px no-repeat,
    linear-gradient(var(--pr-tinta) 0 0) left 0 bottom 0 / 7px 7px no-repeat,
    linear-gradient(var(--pr-tinta) 0 0) right 0 bottom 0 / 7px 7px no-repeat;
}

/* Il lampo di ridipintura: quando la card si e' chiusa in piano il suo
   contorno si accende una volta nel verde del padding, come l'ispettore
   segnala un'area ridipinta. Sta dietro la card: si vede solo fuori. */
#progetti .pr-lampo {
  inset: -2px;
  border: 2px solid var(--bm-padding);
  border-radius: calc(var(--pr-r) + 2px);
  outline: 10px solid var(--bm-padding-velo);
  opacity: 0;
}

/* Lo spazio fra due card e' un gap dichiarato: due fili nel colore margine
   ai suoi bordi, accesi solo mentre la card successiva si compone. */
#progetti .pr-gap {
  --vista: 1;                    /* nel gap si vedono anche le colonne della griglia */
  position: absolute;
  border-block: 1px solid var(--bm-margine);
  background-color: var(--bm-margine-velo);
  opacity: var(--pr-g, 0);
}

/* ---------- Ripieghi ----------
   Ridotto: card in piano, telaio fermo (resta solo la quota). Leggero: idem,
   la card entra con una dissolvenza (pr.js tiene --pr-s a 0). */
@media (prefers-reduced-motion: reduce) {
  #progetti.pr-armato .vetrine .lista-progetti,
  #progetti.pr-armato .vetrine .lista-progetti > .card-sorso-wrapper { perspective: none; }
  #progetti.pr-armato .vetrine .lista-progetti > .vetrina,
  #progetti.pr-armato .vetrine .lista-progetti > .card-sorso-wrapper > .vetrina { opacity: 1; translate: none; rotate: none; scale: none; }
  #progetti .pr-telaio { perspective: none; }
  #progetti .pr-gruppo { translate: none; rotate: none; scale: none; }
  #progetti .pr-om { opacity: 1; }
  #progetti .pr-m, #progetti .pr-p, #progetti .pr-sel, #progetti .pr-lampo, #progetti .pr-gap { display: none; }
}
body.leggero #progetti .pr-m,
body.leggero #progetti .pr-p,
body.leggero #progetti .pr-sel,
body.leggero #progetti .pr-lampo,
body.leggero #progetti .pr-gap { display: none; }