/* MARCA_80923_COLONNE_3D — le colonne di schede inclinate che scorrono (consegna 80923, 24/9/2026).
   FILE COMUNE, piccolo e dichiarato: lo usano le pagine dei mestieri (reparto settori) e le pagine
   dei moduli (reparto moduli). Rifatto in HTML e CSS semplici dal componente che ha indicato Giovanni
   («usalo per foto o testimonianze nel sito e nelle pagine», 21st.dev 3d-testimonails): nessuna libreria.
   REGOLA: niente testimonianze inventate. Oggi dentro ci vanno foto dei mestieri, schermate vere del
   programma con dati di fantasia (dichiarato) e schede delle funzioni. Una testimonianza vera, con il
   consenso, e' una scheda .c3d-voce in piu' (vedi sotto).

   COME SI USA
   <div class="c3d" style="--c3d-altezza:520px">            (altezza facoltativa)
     <div class="c3d-scena">
       <ul class="c3d-colonna">            ... schede ...   (sale)
       <ul class="c3d-colonna c3d-giu">    ... schede ...   (scende)
       <ul class="c3d-colonna c3d-lenta">  ... schede ...   (sale piu' piano)
   Ogni colonna ha le sue schede DUE volte di fila (la seconda copia con aria-hidden="true"):
   cosi' il giro e' continuo. Velocita': --c3d-durata sulla colonna (predefinita 38s).
   Schede: <li class="c3d-scheda c3d-foto"><img ...></li>
           <li class="c3d-scheda c3d-testo"><p class="c3d-titolo">..</p><p>..</p></li>
           <li class="c3d-scheda c3d-voce"><p class="c3d-frase">«..»</p><p class="c3d-chi">Nome, mestiere</p></li>
   Ferma per chi chiede meno movimento (prefers-reduced-motion) e al passaggio del mouse.
   Solo token di temi.css: chiaro e scuro vanno da soli. Per toglierlo: 80924. */
.c3d{position:relative;height:var(--c3d-altezza,520px);overflow:hidden;perspective:1100px;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 14%,#000 86%,transparent);
          mask-image:linear-gradient(to bottom,transparent,#000 14%,#000 86%,transparent)}
.c3d-scena{display:grid;grid-template-columns:repeat(var(--c3d-colonne,3),minmax(0,1fr));gap:16px;height:100%;
  transform:rotateX(16deg) rotateY(-10deg) rotateZ(4deg) scale(1.08);transform-style:preserve-3d}
.c3d-colonna{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px;
  animation:c3d-giro var(--c3d-durata,38s) linear infinite;will-change:transform}
.c3d-giu{animation-direction:reverse}
.c3d-lenta{--c3d-durata:52s}
@keyframes c3d-giro{from{transform:translateY(0)}to{transform:translateY(calc(-50% - 8px))}}
.c3d:hover .c3d-colonna{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.c3d-colonna{animation:none}}
.c3d-scheda{flex:0 0 auto;margin:0;overflow:hidden;border-radius:18px;background:var(--surface);
  border:1px solid var(--line);box-shadow:var(--shadow)}
.c3d-foto img{display:block;width:100%;height:auto;background:var(--surface-2)}
.c3d-testo,.c3d-voce{padding:16px 18px}
.c3d-scheda p{margin:0;max-width:none;font-size:14px;line-height:1.45;color:var(--ink-2)}
.c3d-titolo{font-weight:800;color:var(--ink-strong) !important;margin-bottom:4px !important}
.c3d-frase{font-size:15px !important;color:var(--ink) !important}
.c3d-chi{margin-top:10px !important;font-size:13px !important;font-weight:700;color:var(--accent) !important}
.c3d-nota{margin:10px 0 0;font-size:12.5px;color:var(--ink-3);text-align:center;max-width:none}
@media (max-width:699px){
  .c3d{--c3d-colonne:2;height:var(--c3d-altezza-telefono,420px)}
  .c3d-scena > .c3d-colonna:nth-child(n+3){display:none}
}
/* MARCA_80923_COLONNE_3D:fine */