/* ══════════════════════════════════════════════
   NEW TITLE — Fontshare / Indian Type Foundry
   Variabile, asse peso 200–700. Auto-ospitata: nessuna chiamata
   esterna, e il woff2 pesa 38 KB.
   Licenza in assets/fonts/NewTitle-LICENSE.txt
   ══════════════════════════════════════════════ */
@font-face{
  font-family:'New Title';
  src:url('../assets/fonts/NewTitle-Variable.woff2') format('woff2-variations'),
      url('../assets/fonts/NewTitle-Variable.woff2') format('woff2');
  font-weight:200 700;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'New Title Static';
  src:url('../assets/fonts/NewTitle-Bold.woff2') format('woff2');
  font-weight:700;font-style:normal;font-display:swap;
}

/* ══════════════════════════════════════════════
   PALETTE — presa dal CV di Michele
   Viola profondo come fondo, crema per il testo, e i colori
   degli sticker come accenti. L'inchiostro scuro resta solo
   per il testo che sta sopra le superfici chiare.
   ══════════════════════════════════════════════ */
:root{
  --bg:#3E168B;          /* fondo del sito */
  --fg:#ECE4C3;          /* testo sul fondo */
  --sep:rgba(236,228,195,.3);   /* filetti e bordi sul fondo */

  /* ── SPAZI ──
     Una scala sola per tutto il sito: prima ogni sezione aveva il suo
     numero a caso (140, 120, 220, 80…) e da lì il senso di ammassato. */
  --pad-x:clamp(24px,5vw,72px);   /* margini laterali */
  --sec-y:clamp(110px,14vw,230px);/* aria sopra e sotto ogni sezione */
  --sec-y-sm:clamp(80px,9vw,140px);/* per le sezioni che ne vogliono meno */
  --gap:clamp(28px,4vw,64px);
  --nav-h:clamp(130px,16vh,150px);  /* distanza fra i blocchi dentro una sezione: la nav è più alta ora che il logo è un pittogramma, non più una riga di testo */

  /* ── ETICHETTE ──
     Prima ce n'erano dieci varianti fra 10 e 14px con sei pesi diversi.
     Ora una sola: stessa misura, stesso peso, stessa spaziatura. */
  --label-size:12px;
  --label-weight:700;
  --label-track:.18em;
  --paper:#ECE4C3;       /* superfici chiare (card, chip, pill) */
  --ink:#0A0907;         /* testo e contorni sulle superfici chiare */
  --violet:#5C45FF;      /* viola elettrico: solo dettagli, mai fondo */
  --coral:#DB5F5A;
  --yellow:#F7D247;
  --green:#68B563;
  --pink:#FF87C3;
  --orange:#F09536;
}

/* Unico rosa di brand anche nelle illustrazioni SVG incorporate. */
svg path[fill="#FF99CA"],svg path[fill="#FFABDD"],svg path[fill="#FE96D9"]{fill:#FF87C3}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:auto}
body{background:var(--bg);color:var(--fg);font-family:'DM Sans',sans-serif;font-weight:400;overflow-x:hidden;cursor:none;transition:background 0.2s cubic-bezier(.76,0,.24,1);}
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:9999;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E");mix-blend-mode:multiply;}

/* CURSOR */
body{cursor:url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCA2MDIgNzcyIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNMjIuOTg4MSAyMi45Njc4Vjc0My42MzdMMjY3LjY4MSA1MzkuMjQ3TDU3MC45NTIgNDg3LjEzN0wyMi45ODgxIDIyLjk2NzhaIiBmaWxsPSJibGFjayIvPgo8cGF0aCBkPSJNMjc1Ljk1MiA1NTQuMTM3TDM0LjY3NDggNzU3LjM3NkMzMS4xNjM5IDc2MS41NDMgMjUuNDE4NyA3NjMuMDc1IDIwLjI5OTYgNzYxLjIyNEMxNS4xODA1IDc1OS4zNzQgMTEuNzU1NSA3NTQuNTIxIDExLjc1NTUgNzQ5LjA2N0wxMCAyMi45OTIzQzkuOTg3NzYgMTcuOTQzMSAxMi45MDk1IDEzLjM0NzQgMTcuNTAwNyAxMS4yMTVDMjIuMDc5NiA5LjA4MjU2IDI3LjQ4MTEgOS43OTMzNyAzMS4zNjAzIDEzLjA1MzNMNTg3LjM5IDQ4MS4xMDZDNTkxLjU1MSA0ODQuNjExIDU5My4wODYgNDkwLjM0NiA1OTEuMjA4IDQ5NS40NTdDNTg5LjM0MiA1MDAuNTY3IDU4NC40NjggNTAzLjk3NCA1NzkuMDE3IDUwMy45NzRMMjc1Ljk1MiA1NTQuMTM3Wk0yNjEuMjIxIDUyNi4xOTVMNTQzLjQ3OCA0NzguMDkxTDM2LjAzNzQgNTAuOTA5N0wzNy42MzMzIDcxMy41NjRMMjYxLjIyMSA1MjYuMTk1WiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZD0iTTEzLjY3MjkgMS45NzIxNkMyMS41NjM1IC0xLjUyNDY1IDMwLjc1MzMgLTAuMzEwNDM3IDM3LjQ3MDggNS4xMzAzNkwzNy43OTQgNS4zOTc5NEwzNy43OTk5IDUuNDAyODNMNTkzLjgzIDQ3My40NTZMNTkzLjgzMiA0NzMuNDU4QzYwMS4xOTkgNDc5LjY2MiA2MDMuOTMgNDg5LjgyOSA2MDAuNTk0IDQ5OC45MDdMNjAwLjU5MyA0OTguOTA2QzU5Ny4zODcgNTA3LjY2MSA1ODkuMjEzIDUxMy41NzYgNTc5Ljk2IDUxMy45NTRMMjgwLjI5NCA1NjMuNTU0TDQxLjY3NDkgNzY0LjU1M0MzNS40MTcxIDc3MS4zNzIgMjUuNjQyNCA3NzMuNzg4IDE2LjkwMDUgNzcwLjYyOEM3Ljg0NjM4IDc2Ny4zNTUgMS43NjYxMSA3NTguNzY3IDEuNzU1OTMgNzQ5LjA5MUw2LjcxMjQ5ZS0wNSAyMy4wMTYxQy0wLjAyMTI0NDggMTQuMTc1OSA1LjAzMzgyIDYuMTIzIDEyLjk4ODMgMi4yODg1N1YxLjM5MTExTDEzLjY3MjkgMS45NzIxNlpNMzEuMzYwMyAxMy4wNTMzQzI3LjQ4MTEgOS43OTMzNyAyMi4wNzk2IDkuMDgyNTYgMTcuNTAwNyAxMS4yMTVDMTIuOTA5NSAxMy4zNDc0IDkuOTg3NzYgMTcuOTQzMSAxMCAyMi45OTIzTDExLjc1NTUgNzQ5LjA2N0wxMS43NjU3IDc0OS41NzdDMTEuOTcxNSA3NTQuODIxIDE1LjM0MDYgNzU5LjQzMSAyMC4yOTk2IDc2MS4yMjRDMjUuNDE4NyA3NjMuMDc1IDMxLjE2MzkgNzYxLjU0MyAzNC42NzQ4IDc1Ny4zNzZMMjc1Ljk1MiA1NTQuMTM3TDU3OS4wMTcgNTAzLjk3NEM1ODQuNDY4IDUwMy45NzQgNTg5LjM0MiA1MDAuNTY3IDU5MS4yMDggNDk1LjQ1N0M1OTMuMDg2IDQ5MC4zNDYgNTkxLjU1MSA0ODQuNjExIDU4Ny4zOSA0ODEuMTA2TDMxLjM2MDMgMTMuMDUzM1oiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=') 4 4,auto;}
a,button,[role=button],.chip,.btn,.sk,.n-links a,.n-dot,.t1-card,.pcard,.cc,.pc{cursor:url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCA2MDUgNzczIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNNDk1LjA0IDMwMC43NEM0OTUuMDQgMjg5LjI0IDUwMC4wNiAyNzguODggNTA4LjExIDI3MS4zNkM1MTYuMTcgMjYzLjg0IDUyNy4yNyAyNTkuMTUgNTM5LjU4IDI1OS4xNUM1NjQuMDYgMjU5LjE1IDU4My45NyAyNzcuNzQgNTgzLjk3IDMwMC43M1Y0OTIuNzZDNTgzLjk3IDUzMS4zNiA1NzMuMzMgNTY5LjI2IDU1My4xMSA2MDIuNzVDNTMyLjg5IDYzNi4zOSA1MjIuNCA2NzQuMjggNTIyLjQgNzEyLjg5Vjc1MS40OUgyNDUuNTZDMjQ1LjU2IDY4Ni43NyAyMTguMDQgNjI0Ljc1IDE2OS4wOSA1NzkuMDVMMzYuODMgNDU1LjcxQzI2LjA0IDQ0NS42MyAyMC41NiA0MzIuNTggMjAuNTYgNDE5LjUyQzIwLjU2IDQwNi40NiAyNi4wMyAzOTMuMjYgMzYuNjcgMzgzLjMzQzU4LjI2IDM2My4xOCA5My4yMiAzNjMuMzIgMTE0LjUxIDM4My40N0wyMTguMTkgNDgxLjk3VjY2LjcwMDJDMjE4LjE5IDUzLjkzMDIgMjIzLjY2IDQyLjQzMDIgMjMyLjc4IDM0LjA2MDJDMjQyLjUxIDI0Ljg0MDIgMjU2LjY1IDE5LjU4MDIgMjcyIDIwLjcyMDJDMjk4LjE1IDIyLjcxMDIgMzE3LjMgNDQuNzEwMiAzMTcuMyA2OS4xMjAyVjIzMy4zM0MzMTcuMyAyMjEuODMgMzIyLjMyIDIxMS40NyAzMzAuMzcgMjAzLjk1QzMzOC4yOCAxOTYuNDMgMzQ5LjUzIDE5MS44OSAzNjEuNjkgMTkxLjg5QzM4Ni4zMiAxOTEuODkgNDA2LjA4IDIxMC4zNCA0MDYuMDggMjMzLjMzVjI2NC41NUM0MDYuMDggMjUzLjA1IDQxMS4xIDI0Mi42OSA0MTkuMTUgMjM1LjE3QzQyNy4yMSAyMjcuNjUgNDM4LjMxIDIyMi45NiA0NTAuNjIgMjIyLjk2QzQ3NS4xIDIyMi45NiA0OTUuMDEgMjQxLjU1IDQ5NS4wMSAyNjQuNTRWMzAwLjczTDQ5NS4wNCAzMDAuNzRaIiBmaWxsPSJibGFjayIvPgo8cGF0aCBkPSJNNDA2LjEgMjc1LjEzQzQwMC4yNiAyNzUuMTMgMzk1LjUzIDI3MC4zOSAzOTUuNTMgMjY0LjU1VjIzMy4zM0MzOTUuNTMgMjE2LjMxIDM4MC4zNiAyMDIuNDYgMzYxLjcyIDIwMi40NkMzNTIuNTYgMjAyLjQ2IDM0My44IDIwNS43OSAzMzcuNjkgMjExLjYxQzMzMS4zNSAyMTcuNTMgMzI3Ljg5IDIyNS4yMiAzMjcuODkgMjMzLjMzQzMyNy44OSAyMzkuMTcgMzIzLjE2IDI0My45MSAzMTcuMzIgMjQzLjkxQzMxMS40OCAyNDMuOTEgMzA2Ljc1IDIzOS4xNyAzMDYuNzUgMjMzLjMzQzMwNi43NSAyMTkuMyAzMTIuNTggMjA2LjExIDMyMy4xOSAxOTYuMjJDMzMzLjEyIDE4Ni43NyAzNDcuMTkgMTgxLjMxIDM2MS43MiAxODEuMzFDMzkyLjAyIDE4MS4zMSA0MTYuNjggMjA0LjY1IDQxNi42OCAyMzMuMzNWMjY0LjU1QzQxNi42OCAyNzAuMzkgNDExLjk1IDI3NS4xMyA0MDYuMTEgMjc1LjEzSDQwNi4xWiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZD0iTTQwNi4xIDQyMS42QzQwMC4yNiA0MjEuNiAzOTUuNTMgNDE2Ljg2IDM5NS41MyA0MTEuMDJWMzM2LjY1QzM5NS41MyAzMzAuODEgNDAwLjI2IDMyNi4wNyA0MDYuMSAzMjYuMDdDNDExLjk0IDMyNi4wNyA0MTYuNjcgMzMwLjgxIDQxNi42NyAzMzYuNjVWNDExLjAyQzQxNi42NyA0MTYuODYgNDExLjk0IDQyMS42IDQwNi4xIDQyMS42WiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZD0iTTQwNi4xIDM0Ny4yM0M0MDAuMjYgMzQ3LjIzIDM5NS41MyAzNDIuNDkgMzk1LjUzIDMzNi42NVYyNjQuNTVDMzk1LjUzIDI1MC41MiA0MDEuMzYgMjM3LjM0IDQxMS45NiAyMjcuNDRDNDIyLjM2IDIxNy43MyA0MzYuMSAyMTIuMzkgNDUwLjY1IDIxMi4zOUM0ODAuOTUgMjEyLjM5IDUwNS42MSAyMzUuNzkgNTA1LjYxIDI2NC41NVYzMDAuNzRDNTA1LjYxIDMwNi41OCA1MDAuODggMzExLjMyIDQ5NS4wNCAzMTEuMzJDNDg5LjIgMzExLjMyIDQ4NC40NyAzMDYuNTggNDg0LjQ3IDMwMC43NFYyNjQuNTVDNDg0LjQ3IDI0Ny40NSA0NjkuMyAyMzMuNTQgNDUwLjY2IDIzMy41NEM0NDEuNDggMjMzLjU0IDQzMi44NyAyMzYuODYgNDI2LjQgMjQyLjlDNDIwLjEzIDI0OC43NSA0MTYuNjggMjU2LjQ0IDQxNi42OCAyNjQuNTVWMzM2LjY1QzQxNi42OCAzNDIuNDkgNDExLjk1IDM0Ny4yMyA0MDYuMTEgMzQ3LjIzSDQwNi4xWiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZD0iTTQ5NS4wNCA0NDkuOThDNDg5LjIgNDQ5Ljk4IDQ4NC40NyA0NDUuMjQgNDg0LjQ3IDQzOS40VjM4Mi45MUM0ODQuNDcgMzc3LjA3IDQ4OS4yIDM3Mi4zMyA0OTUuMDQgMzcyLjMzQzUwMC44OCAzNzIuMzMgNTA1LjYxIDM3Ny4wNyA1MDUuNjEgMzgyLjkxVjQzOS40QzUwNS42MSA0NDUuMjQgNTAwLjg4IDQ0OS45OCA0OTUuMDQgNDQ5Ljk4WiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZD0iTTUyMi40IDc2Mi4wOEgyNDUuNTZDMjM5LjcyIDc2Mi4wOCAyMzQuOTkgNzU3LjM0IDIzNC45OSA3NTEuNUMyMzQuOTkgNjg5LjMgMjA5LjAyIDYzMC44IDE2MS44OSA1ODYuNzlMMjkuNjIgNDYzLjQ2QzE2Ljk2IDQ1MS42NSAxMCA0MzYuMDQgMTAgNDE5LjUzQzEwIDQwMy4wMiAxNi45MSAzODcuMzIgMjkuNDcgMzc1LjYxQzU1LjA0IDM1MS43MiA5Ni40NyAzNTEuODIgMTIxLjc5IDM3NS44MUwyMDcuNjIgNDU3LjM1VjY2LjcwMDJDMjA3LjYyIDUxLjI5MDIgMjE0LjAxIDM2LjkzMDIgMjI1LjY0IDI2LjI3MDJDMjM3Ljc3IDE0Ljc2MDIgMjU0Ljk5IDguOTAwMjMgMjcyLjggMTAuMTcwMkMzMDMuNyAxMi41MjAyIDMyNy44OSAzOC40MTAyIDMyNy44OSA2OS4xMTAyVjM4Ni43NEMzMjcuODkgMzkyLjU4IDMyMy4xNiAzOTcuMzIgMzE3LjMyIDM5Ny4zMkMzMTEuNDggMzk3LjMyIDMwNi43NSAzOTIuNTggMzA2Ljc1IDM4Ni43NFY2OS4xMjAyQzMwNi43NSA0OS40MTAyIDI5MS4xNCAzMi43ODAyIDI3MS4yMiAzMS4yNzAyQzI1OS4zNyAzMC4zOTAyIDI0OC4wMiAzNC4yMTAyIDI0MC4wNyA0MS43NDAyQzIzMi43NCA0OC40NzAyIDIyOC43NyA1Ny4yOTAyIDIyOC43NyA2Ni43MTAyVjQ4MS45OUMyMjguNzcgNDg2LjIyIDIyNi4yNSA0OTAuMDQgMjIyLjM3IDQ5MS43MUMyMTguNDkgNDkzLjM4IDIxMy45OCA0OTIuNTcgMjEwLjkxIDQ4OS42NkwxMDcuMjMgMzkxLjE3Qzg5Ljg4IDM3NC43MyA2MS40NiAzNzQuNyA0My44OSAzOTEuMDlDMzUuNjcgMzk4Ljc3IDMxLjE0IDQwOC44NyAzMS4xNCA0MTkuNTVDMzEuMTQgNDMwLjIzIDM1LjcyIDQ0MC4yNCA0NC4wNCA0NDguMDFMMTc2LjMxIDU3MS4zNEMyMjUuMTEgNjE2LjkxIDI1My4xMiA2NzYuNzkgMjU1LjkxIDc0MC45NEg1MTEuODJWNzEyLjkxQzUxMS44MiA2NzIuMzcgNTIyLjk2IDYzMi40IDU0NC4wNCA1OTcuMzJDNTYzLjI0IDU2NS41MSA1NzMuMzkgNTI5LjM3IDU3My4zOSA0OTIuNzhWMzAwLjc1QzU3My4zOSAyODMuNjUgNTU4LjIyIDI2OS43NCA1MzkuNTggMjY5Ljc0QzUzMC40MSAyNjkuNzQgNTIxLjc5IDI3My4wNiA1MTUuMzIgMjc5LjFDNTA5LjA1IDI4NC45NSA1MDUuNiAyOTIuNjQgNTA1LjYgMzAwLjc1VjM4Mi45M0M1MDUuNiAzODguNzcgNTAwLjg3IDM5My41MSA0OTUuMDMgMzkzLjUxQzQ4OS4xOSAzOTMuNTEgNDg0LjQ2IDM4OC43NyA0ODQuNDYgMzgyLjkzVjMwMC43NUM0ODQuNDYgMjg2LjcyIDQ5MC4yOSAyNzMuNTQgNTAwLjg5IDI2My42NEM1MTEuMjkgMjUzLjkzIDUyNS4wMyAyNDguNTkgNTM5LjU4IDI0OC41OUM1NjkuODggMjQ4LjU5IDU5NC41NCAyNzEuOTkgNTk0LjU0IDMwMC43NVY0OTIuNzhDNTk0LjU0IDUzMy4yMiA1ODMuMzUgNTczLjE1IDU2Mi4xNiA2MDguMjRDNTQzLjA2IDY0MCA1MzIuOTYgNjc2LjIxIDUzMi45NiA3MTIuOTFWNzUxLjUyQzUzMi45NiA3NTcuMzYgNTI4LjIzIDc2Mi4xIDUyMi4zOSA3NjIuMUw1MjIuNCA3NjIuMDhaIiBmaWxsPSJ3aGl0ZSIvPgo8cGF0aCBkPSJNMjI0Ljk5IDc1MS41MDFDMjI0Ljk5IDY5Mi4xODggMjAwLjI1NyA2MzYuMzAyIDE1NS4wNyA1OTQuMTA0TDIyLjgwMDggNDcwLjc3NEwyMi43OTg4IDQ3MC43NzNDOC4yMTY4NyA0NTcuMTcgMCA0MzguOTU0IDAgNDE5LjUzQzAuMDAwMTI2MDU5IDQwMC40NTcgNy44NzgxOCAzODIuNDA3IDIxLjk3NDYgMzY4LjkzNEwyMi42NTA0IDM2OC4yOTdDNTEuODM3MiAzNDEuMDM1IDk4Ljc1NTggMzQwLjkxMyAxMjcuOTggMzY3LjkwOUwxMjguNjY4IDM2OC41NTFMMTI4LjY3OCAzNjguNTZMMTk3LjYyIDQzNC4wNTZWNjYuNzAwOUMxOTcuNjIgNDguNDE5OSAyMDUuMjM3IDMxLjQwNiAyMTguODgzIDE4Ljg5ODFDMjMyLjk3NiA1LjU5NjMyIDI1Mi41NiAtMS4wNDM5MiAyNzIuNTU2IDAuMTMzNDk2TDI3My41MTIgMC4xOTU5OTZMMjczLjUzNSAwLjE5Njk3MkwyNzMuNTU5IDAuMTk4OTI2QzMwOS41OTcgMi45Mzk4MSAzMzcuODg5IDMzLjEwNjQgMzM3Ljg5IDY5LjExMDFWMTc1LjYwNEMzNDUuNDI0IDE3Mi43OTMgMzUzLjUzIDE3MS4zMSAzNjEuNzIgMTcxLjMxQzM4OC4xODIgMTcxLjMxIDQxMS40NzcgMTg2LjY1OCA0MjEuNDgxIDIwOC45NjdDNDMwLjQ2IDIwNC42NTggNDQwLjQwNyAyMDIuMzkgNDUwLjY1IDIwMi4zOUM0NzguNzczIDIwMi4zOSA1MDMuMjkxIDIxOS43NTMgNTEyLjExOCAyNDQuMzc4QzUyMC42NDMgMjQwLjU4MSA1MjkuOTgxIDIzOC41OTEgNTM5LjU4IDIzOC41OTFDNTc0LjkwMyAyMzguNTkxIDYwNC41NCAyNjUuOTgxIDYwNC41NCAzMDAuNzUxVjQ5Mi43OEM2MDQuNTQgNTM1LjA2NiA1OTIuODQgNTc2Ljc4MSA1NzAuNzIxIDYxMy40MUw1NzAuNzIgNjEzLjQwOUM1NTIuNTUyIDY0My42MjUgNTQyLjk2IDY3OC4wNTEgNTQyLjk2IDcxMi45MTFWNzUxLjUyQzU0Mi45NiA3NjIuODcxIDUzMy43NjUgNzcyLjEgNTIyLjM5IDc3Mi4xSDUwNi4xODhMNTA2LjE5NyA3NzIuMDgxSDI0NS41NkMyMzQuMTg1IDc3Mi4wODEgMjI0Ljk5IDc2Mi44NTEgMjI0Ljk5IDc1MS41MDFaTTIwNy42MiA0NTcuMzVMMTIxLjc5IDM3NS44MUM5Ni40NyAzNTEuODIgNTUuMDQgMzUxLjcyIDI5LjQ3IDM3NS42MUMxNi45MSAzODcuMzIgMTAgNDAzLjAyIDEwIDQxOS41M0MxMCA0MzYuMDQgMTYuOTYgNDUxLjY1IDI5LjYyIDQ2My40NkwxNjEuODkgNTg2Ljc5QzIwOS4wMiA2MzAuOCAyMzQuOTkgNjg5LjMgMjM0Ljk5IDc1MS41TDIzNS4wMDQgNzUyLjA0NUMyMzUuMjc4IDc1Ny40NTIgMjM5LjYwOSA3NjEuNzkzIDI0NS4wMTYgNzYyLjA2N0wyNDUuNTYgNzYyLjA4SDUyMi40TDUyMi4zOSA3NjIuMUM1MjguMjMgNzYyLjEgNTMyLjk2IDc1Ny4zNiA1MzIuOTYgNzUxLjUyVjcxMi45MUM1MzIuOTYgNjc2LjIxIDU0My4wNiA2NDAgNTYyLjE2IDYwOC4yNEM1ODMuMzUgNTczLjE1IDU5NC41NCA1MzMuMjIgNTk0LjU0IDQ5Mi43OFYzMDAuNzVDNTk0LjU0IDI3Mi4yMTUgNTcwLjI2NCAyNDguOTU2IDU0MC4yODkgMjQ4LjU5NEw1MzkuNTggMjQ4LjU5QzUyNy4wNDIgMjQ4LjU5IDUxNS4xMDYgMjUyLjU1NiA1MDUuMzkgMjU5Ljg2NkM1MDIuOTA2IDIzMy41MTIgNDc5LjY3NiAyMTIuNzM2IDQ1MS4zNTkgMjEyLjM5NEw0NTAuNjUgMjEyLjM5QzQzNy44MzcgMjEyLjM5IDQyNS42NTIgMjE2LjUzMiA0MTUuODIzIDIyNC4xNTJDNDExLjIyOSAxOTkuODMzIDM4OC43MTIgMTgxLjMxIDM2MS43MiAxODEuMzFDMzQ5LjM1NCAxODEuMzEgMzM3LjMyMSAxODUuMjY2IDMyNy44OSAxOTIuMjY5TDMyNy44OSA2OS4xMTAyQzMyNy44OSAzOC40MTAyIDMwMy43IDEyLjUyMDIgMjcyLjggMTAuMTcwMkMyNTQuOTkgOC45MDAyMyAyMzcuNzcgMTQuNzYwMiAyMjUuNjQgMjYuMjcwMkMyMTQuMDEgMzYuOTMwMiAyMDcuNjIgNTEuMjkwMiAyMDcuNjIgNjYuNzAwMlY0NTcuMzVaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K') 16 0,pointer;}
/* ── CURSORE ──
   La freccia del brand resta quella di sistema; intorno si muove un anello
   che rallenta rispetto al mouse e che si apre in un'etichetta quando passa
   su qualcosa di interattivo. */
#cur-dot{
  position:fixed;top:0;left:0;z-index:9500;pointer-events:none;
  width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;
  background:#0a0907;
  transition:opacity .25s ease,transform .25s cubic-bezier(.16,1,.3,1);
  will-change:transform;
}
#cur-ring{
  position:fixed;top:0;left:0;z-index:9500;pointer-events:none;
  width:42px;height:42px;margin:-21px 0 0 -21px;border-radius:100px;
  border:2px solid #0a0907;
  display:flex;align-items:center;justify-content:center;
  font-family:'DM Sans',sans-serif;font-size:10px;font-weight:800;
  letter-spacing:.18em;text-transform:uppercase;color:var(--fg);
  white-space:nowrap;overflow:hidden;
  transition:width .34s cubic-bezier(.16,1,.3,1),height .34s cubic-bezier(.16,1,.3,1),
             margin .34s cubic-bezier(.16,1,.3,1),background .28s ease,
             border-color .28s ease,color .28s ease,opacity .25s ease;
  will-change:transform;
}
#cur-ring b{opacity:0;transition:opacity .18s ease;font-weight:800;}
/* sopra un elemento con etichetta: l'anello diventa una pillola */
body.cursor-label #cur-ring{
  width:104px;height:38px;margin:-19px 0 0 -52px;
  background:#0a0907;border-color:#0a0907;color:#EEE4BF;
}
body.cursor-label #cur-ring b{opacity:1;transition-delay:.08s;}
body.cursor-label #cur-dot{opacity:0;}
/* sopra un link semplice: solo un anello un po' più grande */
body.cursor-hover #cur-ring{width:60px;height:60px;margin:-30px 0 0 -30px;}
body.cursor-hover #cur-dot{transform:scale(.5);}
body.cursor-down #cur-ring{transform:scale(.86);}
/* sul viola il cursore si inverte */
body.fest-active #cur-dot{background:var(--fg);}
body.fest-active #cur-ring{border-color:var(--fg);color:var(--fg);}
body.fest-active.cursor-label #cur-ring{background:var(--fg);color:var(--bg);}
@media(hover:none),(max-width:768px){#cur-dot,#cur-ring{display:none!important;}}
@media(hover:none){body{cursor:auto;}}

/* SCROLL PROGRESS */
#spbar{position:fixed;top:0;left:0;height:2px;width:0;background:var(--fg);z-index:9001;pointer-events:none;transition:background .7s ease;}

/* ══════════════════════════════════════════════
   LOADER — viola, contatore a cifre, scia di illustrazioni,
   chiusura sul nome che si apre in due sulla homepage.
   ══════════════════════════════════════════════ */
body.loading{overflow:hidden;}
#loader{
  position:fixed;inset:0;z-index:8000;
  background:var(--bg);
  overflow:hidden;cursor:none;
}
#loader *{color:var(--fg);}

.pl-hd{position:absolute;top:32px;left:var(--pad-x);right:var(--pad-x);display:flex;justify-content:space-between;align-items:flex-start;pointer-events:none;z-index:3;}
.pl-tag{font-size:var(--label-size);font-weight:var(--label-weight);letter-spacing:var(--label-track);text-transform:uppercase;color:var(--fg);opacity:.6;line-height:1.9;
  opacity:0;transform:translateY(-8px);
  transition:opacity .7s ease,transform .7s cubic-bezier(.16,1,.3,1);}
.pl-tag-r{text-align:right;}
.pl-tag-logo{display:inline-block;width:130px;height:auto;aspect-ratio:203/157;background-color:var(--fg);
  -webkit-mask:url(../assets/logo/logo-mark.svg) no-repeat center/contain;
  mask:url(../assets/logo/logo-mark.svg) no-repeat center/contain;}
#loader.ready .pl-tag{opacity:1;transform:none;}
#loader.ready .pl-tag-r{transition-delay:.12s;}
.pl-ft{position:absolute;bottom:44px;left:var(--pad-x);pointer-events:none;z-index:3;}
#pl-hint{font-size:var(--label-size);font-weight:var(--label-weight);letter-spacing:var(--label-track);text-transform:uppercase;color:var(--fg);opacity:.55;}
#l-bar{position:absolute;bottom:0;left:0;height:4px;width:0;background:var(--fg);z-index:4;}

/* uscita: le cifre scorrono via dalla loro finestra, il resto scivola
   fuori dai bordi. Niente dissolvenza. */
.pl-hd,.pl-ft{transition:transform .5s cubic-bezier(.76,0,.24,1),opacity .3s ease;}
#loader.done .pl-hd{transform:translateY(-140%);}
#loader.done .pl-ft{transform:translateY(140%);}
#l-bar{transition:transform .5s cubic-bezier(.76,0,.24,1);transform-origin:right;}
#loader.done #l-bar{transform:scaleX(0);}
/* le colonne escono dalla finestra: la transizione la imposta il JS,
   che sa di quanti passi e' fatta la colonna */

/* ── contatore: due cifre bianche, ognuna nella sua finestra ──
   altezza del glifo e larghezza della cella arrivano dalle metriche
   vere del font (misurate su canvas), non da multipli a occhio:
   così le cifre non vengono tagliate e stanno vicine. */
#pl-count{
  position:absolute;bottom:3vh;right:4vw;z-index:2;
  display:flex;gap:0;
  --cell:clamp(200px,32vw,560px);
}
.pl-cell{height:var(--cell);position:relative;overflow:hidden;}
.pl-col{position:absolute;top:0;left:0;right:0;will-change:transform;}
.pl-col span{
  display:block;
  font-family:'New Title','New Title Static',sans-serif;font-weight:700;
  line-height:1;
  text-align:center;
  color:var(--fg);
  letter-spacing:0;
}

/* ── scia di illustrazioni: quelle del sito, bordo bianco 3px ── */
#pl-stickers{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;}
.pl-sticker{
  position:absolute;top:0;left:0;
  width:clamp(110px,15vw,220px);height:clamp(110px,15vw,220px);
  opacity:0;
  will-change:transform,opacity;
}
.pl-sticker img{
  width:100%;height:100%;object-fit:contain;display:block;
  filter:
    drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff)
    drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff)
    drop-shadow(2.1px 2.1px 0 #fff) drop-shadow(-2.1px 2.1px 0 #fff)
    drop-shadow(2.1px -2.1px 0 #fff) drop-shadow(-2.1px -2.1px 0 #fff);
}
.pl-sticker.timed{opacity:1;transition:opacity .3s ease, transform .5s cubic-bezier(.34,1.4,.5,1);}

/* quando parte il nome il loader non deve avere più addosso nulla:
   etichette, barra e contatore spariscono di netto, non a metà strada */
#loader.name .pl-hd,#loader.name .pl-ft,
#loader.name #pl-count,#loader.name #l-bar,
#loader.name #pl-stickers{display:none;}

/* ── chiusura: il nome, poi si apre in due sulla homepage ── */
#pl-name{position:absolute;inset:0;z-index:6;pointer-events:none;opacity:0;}
#loader.name #pl-name{opacity:1;}
.pl-name-half{
  position:absolute;inset:0;
  background:var(--bg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-family:'New Title','New Title Static',sans-serif;font-weight:700;
  font-size:var(--pl-name-size, clamp(56px,13vw,190px));
  line-height:.86;white-space:nowrap;
  letter-spacing:-.01em;
  color:var(--fg);
  text-transform:uppercase;
  will-change:transform;
}
/* ogni riga sale da sotto la propria maschera, come i titoli del sito */
.pl-line{overflow:hidden;display:block;}
.pl-line span{display:block;transform:translateY(110%);}
#loader.name .pl-line span{
  transform:translateY(0);
  transition:transform .8s cubic-bezier(.16,1,.3,1);
}
#loader.name .pl-line:nth-child(2) span{transition-delay:.1s;}
.pl-name-top{clip-path:inset(0 0 50% 0);}
.pl-name-bot{clip-path:inset(50% 0 0 0);}
/* da qui in poi il viola lo portano le due metà: il fondo del loader
   diventa trasparente, così aprendosi si vede la homepage */
#loader.name{background:transparent;}
#loader.open .pl-name-top{transform:translateY(-100%);transition:transform 1s cubic-bezier(.76,0,.24,1);}
#loader.open .pl-name-bot{transform:translateY(100%);transition:transform 1s cubic-bezier(.76,0,.24,1);}

@media(max-width:768px){
  .pl-hd{top:22px;left:24px;right:24px;}
  .pl-tag{font-size:10px;letter-spacing:.16em;}
  .pl-ft{bottom:28px;left:24px;}
  #pl-count{bottom:3vh;right:4vw;--cell:clamp(96px,30vw,150px);}
}

/* NAV */
nav{position:fixed;top:0;left:0;right:0;z-index:500;padding:24px var(--pad-x);display:flex;justify-content:space-between;align-items:center;opacity:0;transition:transform .45s ease,opacity .6s ease,color .7s ease;}
nav.hidden{transform:translateY(-110%);}
/* sopra il Manifesto (sfondo crema locale) la nav diventa scura, senza
   toccare i token globali --fg/--bg da cui dipende il colore del resto */
nav.on-light .n-logo{background-color:var(--bg);}
nav.on-light .n-links a{color:var(--bg);}
/* il logo è una maschera, non un'immagine con colore fisso: eredita
   --fg/--bg esattamente come faceva il testo, inversione sul Manifesto
   compresa, invece di restare crema anche su sfondo chiaro */
.n-logo{display:inline-block;width:120px;height:auto;aspect-ratio:203/157;background-color:var(--fg);text-decoration:none;
  -webkit-mask:url(../assets/logo/logo-mark.svg) no-repeat center/contain;
  mask:url(../assets/logo/logo-mark.svg) no-repeat center/contain;
  transition:background-color .7s ease;}
.n-links{display:flex;gap:40px;list-style:none;}
.n-links a{
  font-size:var(--label-size);font-weight:var(--label-weight);letter-spacing:var(--label-track);text-transform:uppercase;
  color:var(--fg);text-decoration:none;
  display:inline-block;
  transition:color .7s ease, transform .15s cubic-bezier(.16,1,.3,1);
}
.n-links a:hover{
  animation:nav-skew .4s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes nav-skew{
  0%  {transform:skewX(0deg)   scaleX(1);}
  25% {transform:skewX(-14deg) scaleX(1.08);}
  60% {transform:skewX(6deg)   scaleX(.97);}
  80% {transform:skewX(-3deg)  scaleX(1.02);}
  100%{transform:skewX(0deg)   scaleX(1);}
}
/* available chip */
.n-dot{
  position:relative;
  display:inline-flex;align-items:center;gap:8px;
  font-size:var(--label-size);font-weight:var(--label-weight);letter-spacing:var(--label-track);
  text-transform:uppercase;color:var(--bg);
  background:var(--fg);
  border:3px solid var(--fg);
  border-radius:100px;
  padding:7px 18px 7px 14px;
  white-space:nowrap;
    transition:color .22s ease, background .22s ease, border-color .22s ease;
}
.n-dot::before{
  content:'';
  width:9px;height:9px;flex-shrink:0;
  background:#22c55e;
  border-radius:50%;
}
.n-dot:hover{ background:transparent; color:var(--fg); border-color:var(--fg); }
.n-dot:hover::before{ background:#22c55e; }

@media(max-width:768px){
  nav{padding:18px var(--pad-x)}
  .n-links,.n-dot{display:none}
  .n-logo{width:88px}
  :root{--nav-h:clamp(90px,20vh,120px)}
}

/* ══════════════════════════════════════════════
   HERO
   Nome in alto a tutta larghezza, il ritratto al centro con le due
   voci ai lati, i chip che cadono in fondo.
   ══════════════════════════════════════════════ */
/* La hero sta ferma sullo schermo e il posto nel flusso lo tiene #heroSpace:
   così l'ingresso nell'occhio è una scala su un elemento fisso, senza
   trasformazioni annidate dentro un pin (che a 46x ritaglia e scatta). */
#hero{height:100svh;min-height:640px;position:relative;overflow:hidden;}
body.eye #hero{position:fixed;inset:0;height:auto;min-height:0;z-index:1;}
body.eye #hero.gone{visibility:hidden;}
#heroSpace{display:none;}
body.eye #heroSpace{display:block;height:200svh;}
/* il palco: è questo che si ingrandisce quando si entra nell'occhio */
#heroStage{
  position:absolute;inset:0;overflow:visible;
  display:grid;grid-template-rows:auto 1fr auto;
  padding:calc(var(--nav-h) + clamp(6px,1vh,18px)) 0 0;
  will-change:transform,opacity;
}
/* il diaframma che si apre dentro la pupilla: un elemento a sé, così
   nessuna sezione esce dal flusso e la pagina non si accorcia */
#eyeNext{position:fixed;inset:0;z-index:40;background:var(--fg);pointer-events:none;
  clip-path:circle(0px at 50% 50%);will-change:clip-path,opacity;opacity:0;}

#hero-name{
  font-family:'New Title','New Title Static',sans-serif;font-weight:700;
  line-height:.84;letter-spacing:-.018em;white-space:nowrap;text-align:center;
  color:var(--fg);margin:0;padding:0 var(--pad-x);
  font-size:12vw;                       /* il JS lo porta al limite giusto */
}

.hero-row{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:clamp(10px,2vw,40px);padding:clamp(4px,1.4vh,22px) var(--pad-x) 0;min-height:0;overflow:visible;
}
.hero-side{
  font-family:'New Title','New Title Static',sans-serif;font-weight:700;
  line-height:.9;letter-spacing:-.01em;color:var(--fg);white-space:nowrap;z-index:3;
  font-size:clamp(20px,3vw,52px);
}
.hero-side.l{text-align:left}
.hero-side.r{text-align:right}
.hero-side .hs-line{display:block}

.hero-figure{
  position:relative;z-index:4;overflow:visible;
  display:flex;align-items:center;justify-content:center;height:100%;
}
#me{height:100%;max-height:min(46vh,440px);/* il JS raffina */width:auto;overflow:visible;display:block}
/* durante l'immersione il disegno prende tutto lo schermo e lo zoom lo fa
   il viewBox, non una scala CSS: è vettoriale, non si sgrana e soprattutto
   non finisce fuori dai limiti di rasterizzazione del browser */
#me.dive{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;z-index:30;}
#me .eye{transform-box:fill-box;transform-origin:center;will-change:transform}
#meBody{will-change:transform}

/* indicatore di scroll */
.h-scr-inline{
  position:absolute;right:var(--pad-x);bottom:calc(var(--pad-x) + 46px);z-index:4;
  display:flex;flex-direction:column;align-items:flex-end;gap:6px;
  font-size:var(--label-size);font-weight:var(--label-weight);
  letter-spacing:var(--label-track);text-transform:uppercase;color:var(--fg);opacity:.6;
}
.h-scr-line{width:1px;height:0;background:var(--fg);animation:scrl-pulse 1.8s ease-in-out infinite;transform-origin:top}
@keyframes scrl-pulse{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.3)}}

/* i chip cadono nell'hero */
.h-bot{padding:0 var(--pad-x) 52px;flex-shrink:0;opacity:0}
/* con la fisica attiva i chip diventano un tappeto in fondo: gli riservo
   la sua fascia, se no si mangiano le scritte e il ritratto */
#hero.phy .h-bot{height:clamp(150px,26vh,250px);padding-bottom:0}
#chip-field{position:relative;min-height:48px;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
#hero.phy #chip-field{position:absolute;inset:0;pointer-events:none}
#hero.phy .chip{position:absolute;pointer-events:all;transform-origin:center center}

@media(max-width:900px){
  /* a colonna singola la griglia crea 3 righe implicite (label/faccia/label) e
     per default le allunga a riempire lo spazio verticale disponibile (align-content:
     stretch): le etichette, alte poche decine di px, restavano imprigionate dentro
     celle enormi, staccate dalla faccia. align-content:center le fa stare vicine,
     come un unico gruppo, con lo spazio vuoto tutto fuori e non tra loro. */
  .hero-row{grid-template-columns:1fr;justify-items:center;align-content:center;gap:18px}
  .hero-side{text-align:center!important;font-size:clamp(18px,6vw,38px)}
  /* .hero-figure ha height:100% da desktop: con la riga a colonna singola non
     più stirata (align-content:center) quel 100% non ha più nulla a cui
     riferirsi e collassa a 0 — la faccia spariva. Un'altezza assoluta rompe
     il giro e dà alla riga qualcosa di concreto su cui misurarsi. */
  .hero-figure{height:32vh}
  #me{max-height:32vh}
}

/* CHIPS */
.chip{display:inline-flex;align-items:center;font-size:clamp(13px,1.6vw,22px);font-weight:900;-webkit-text-stroke:0.5px #0a0907;letter-spacing:.02em;text-transform:uppercase;color:#0a0907;padding:clamp(10px,1.2vw,18px) clamp(18px,2.5vw,40px);border-radius:100px;cursor:grab;user-select:none;border:4px solid #0a0907;will-change:transform;white-space:nowrap;}
.chip:active{cursor:grabbing;}
/* il colore sta sul chip, non sulla posizione: la fisica li sposta
   fuori dal contenitore e nth-child perdeva il conto */
.chip.c1{background:#5bb8f5;}
.chip.c2{background:#d4b84a;}
.chip.c3{background:#4ecb71;}
.chip.c4{background:#9b59f5;}
.chip.c5{background:#f57c35;}
.chip.c6{background:#FF87C3;}
.chip.c7{background:#b5ead7;}
.chip.c8{background:#ffd6a5;}
.chip.c9{background:#c9b1ff;}
.chip.c10{background:#a0c4ff;}
.chip.c11{background:#caffbf;}
.chip.c12{background:#ffadad;}
.chip.c13{background:#FF87C3;}
.chip.c14{background:#fdffb6;}
.chip.c15{background:#bde0fe;}
/* STATEMENT */
/* colori fissi, non i token --bg/--fg: quei due vengono invertiti da
   body.fest-active per le sezioni chiare, e il Manifesto deve restare
   viola sempre, a prescindere da cosa succede altrove sulla pagina */
#statement{background:#3E168B;color:#ECE4C3;padding:var(--sec-y) var(--pad-x);display:grid;grid-template-columns:140px 1fr;gap:60px;align-items:start;transition:border-color .7s ease;}
#statement .stmt,#sLbl{color:#ECE4C3;}
.s-label{font-size:var(--label-size);font-weight:var(--label-weight);letter-spacing:var(--label-track);text-transform:uppercase;color:var(--fg);opacity:0;transform:translateX(-16px);transition:opacity .6s ease,transform .6s ease;}
.s-label.in{opacity:1;transform:none;}
.stmt{font-family:'New Title','New Title Static',sans-serif;font-weight:700;font-size:clamp(58px,9.6vw,168px);line-height:.85;letter-spacing:-.012em;color:var(--fg);display:block;}
.sw{display:inline-block;overflow:hidden;vertical-align:bottom;margin-right:.2em;}
.sw-i{display:inline-block;transform:translateY(105%);opacity:0;will-change:transform,opacity;}
.sw-i.in{transform:translateY(0);opacity:1;transition:transform .7s cubic-bezier(.16,1,.3,1),opacity .5s ease;}
@media(max-width:768px){#statement{grid-template-columns:1fr;gap:20px}}

/* MARQUEE */
.mq{overflow:hidden;position:relative;border-top:4px solid var(--ink);border-bottom:4px solid var(--ink);}
/* wrapper per la rotazione — evita triangoli vuoti scalando oltre il viewport */
.mq-wrap{overflow:hidden;margin:-48px -20px;padding:48px 20px;position:relative;}
#mq1{background:#FF87C3;transform:rotate(-1.5deg);scale:1.08;z-index:100;}
#mq2{background:#FF87C3;transform:rotate(1.5deg);scale:1.08;}
.mq-t{display:flex;white-space:nowrap;will-change:transform;}
.mq-i{
  font-family:'New Title','New Title Static',sans-serif;font-weight:700;
  font-size:clamp(40px,7.2vw,116px);
  font-weight:900;
  letter-spacing:-.01em;
  text-transform:uppercase;
  color:#0a0907;
  padding:clamp(18px,2.2vw,40px) clamp(26px,3.4vw,64px);
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  gap:32px;
  transition:color .2s;
}
.mq-i:hover{opacity:1;}
.mq-i b{color:#0a0907;font-style:normal;opacity:1;font-size:.6em;}

.mq-sep{
  display:inline-block;
  width:clamp(10px,1.1vw,18px);height:clamp(10px,1.1vw,18px);
  background:#0a0907;
  border-radius:50%;
  opacity:.3;
  flex-shrink:0;
  align-self:center;
  margin:0 8px;
}

/* PROJECTS */
#proj{padding:var(--sec-y) 0;overflow:hidden;}
.proj-cta-wrap{padding:var(--gap) var(--pad-x) 0;opacity:0;transform:translateY(16px);transition:opacity .6s ease .4s,transform .6s ease .4s;}
.proj-cta-wrap.in{opacity:1;transform:none;}


.proj-hd{padding:0 var(--pad-x) var(--gap);display:flex;justify-content:space-between;align-items:flex-end;}
.sec-title{font-family:'New Title','New Title Static',sans-serif;font-weight:700;font-size:clamp(64px,13vw,220px);line-height:.84;letter-spacing:-.012em;color:var(--fg);transition:color .7s ease;}
.sec-title .sw-i.in{transition:transform .8s cubic-bezier(.16,1,.3,1),opacity .6s ease;}
.proj-meta{font-size:var(--label-size);font-weight:var(--label-weight);letter-spacing:var(--label-track);text-transform:uppercase;color:var(--fg);padding-bottom:4px;opacity:0;transform:translateY(12px);transition:opacity .6s ease,transform .6s ease;}
.proj-meta.in{opacity:1;transform:none;}
#proj-track{display:flex;gap:20px;padding:0 var(--pad-x);width:max-content;will-change:transform;}
.pc{position:relative;flex-shrink:0;overflow:hidden;border:1px solid rgba(10,9,7,.12);opacity:0;transform:translateY(50px);transition:opacity .65s ease,transform .7s cubic-bezier(.16,1,.3,1);}
.pc.in{opacity:1;transform:translateY(0);}
.pc:nth-child(1){width:400px;height:540px;}
.pc:nth-child(2){width:340px;height:460px;margin-top:60px;}
.pc:nth-child(3){width:580px;height:500px;}
.pc:nth-child(4){width:360px;height:480px;margin-top:50px;}
.pc:nth-child(5){width:420px;height:520px;}
.pc:nth-child(6){width:360px;height:460px;margin-top:40px;}
.pc:nth-child(7){width:500px;height:510px;}
.pc-img{width:100%;height:100%;display:block;filter:grayscale(1) brightness(.65);transition:filter .7s ease,transform .8s ease;}
.pc:hover .pc-img{filter:grayscale(0) brightness(.9);transform:scale(1.04);}
.g1{background:linear-gradient(135deg,#1a0a0a,#5c1515,#8f2020);}
.g2{background:linear-gradient(135deg,#0a0f1a,#0e2040,#1a3a6a);}
.g3{background:linear-gradient(135deg,#0e1a06,#1e3c0a,#2e5c10);}
.g4{background:linear-gradient(135deg,#12061a,#280c3c,#3e1260);}
.g5{background:linear-gradient(135deg,#061410,#0c2e20,#124830);}
.g6{background:linear-gradient(135deg,#1a0e36,#3c2080,#5C45FF);}
.g7{background:linear-gradient(135deg,#0a0f1a,#1a2a4a,#0e3060);}
.pc-ov{position:absolute;inset:0;background:linear-gradient(to top,rgba(10,9,7,.96) 0%,rgba(10,9,7,.25) 55%,transparent 100%);display:flex;flex-direction:column;justify-content:flex-end;padding:26px;opacity:0;transition:opacity .35s ease;}
.pc:hover .pc-ov{opacity:1;}
.pc-cat{font-size:var(--label-size);font-weight:var(--label-weight);letter-spacing:var(--label-track);text-transform:uppercase;color:var(--coral);transform:translateY(10px);transition:transform .35s ease .04s;}
.pc-name{font-family:'New Title','New Title Static',sans-serif;font-weight:700;font-size:clamp(16px,1.8vw,26px);color:#f0e0d0;line-height:1.15;margin-top:4px;transform:translateY(12px);transition:transform .35s ease .08s;}
.pc-cta{font-size:var(--label-size);font-weight:var(--label-weight);letter-spacing:var(--label-track);text-transform:uppercase;color:rgba(240,224,208,.55);margin-top:8px;transform:translateY(12px);transition:transform .35s ease .13s;}
.pc:hover .pc-cat,.pc:hover .pc-name,.pc:hover .pc-cta{transform:translateY(0);}

/* ABOUT */
#about{padding:var(--sec-y) var(--pad-x);display:grid;grid-template-columns:1fr 1fr;gap:100px;align-items:start;transition:border-color .7s ease;}
.about-l{opacity:0;transform:translateX(-50px);transition:opacity .85s ease,transform .85s cubic-bezier(.16,1,.3,1);}
.about-r{opacity:0;transform:translateX(50px);transition:opacity .85s ease,transform .85s cubic-bezier(.16,1,.3,1);}
.about-l.in,.about-r.in{opacity:1;transform:translateX(0);}
.ab-h{font-family:'New Title','New Title Static',sans-serif;font-weight:700;font-size:clamp(64px,13vw,220px);line-height:.84;letter-spacing:-.012em;color:var(--fg);transition:color .7s ease;}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-top:44px;}
.sn{font-family:'New Title','New Title Static',sans-serif;font-weight:700;font-size:clamp(52px,5.4vw,86px);color:var(--fg);line-height:1;transition:color .7s ease;}
/* contatore a cifre rotanti, stessa lingua del loader */
.odo{display:inline-flex;align-items:flex-start;line-height:1;}
.odo-cell{display:inline-block;height:1em;overflow:hidden;}
.odo-col{display:block;transform:translateY(0);will-change:transform;}
.odo-col span{display:block;height:1em;line-height:1;}
.odo-plus{display:inline-block;}
.sl{font-size:var(--label-size);font-weight:var(--label-weight);letter-spacing:var(--label-track);text-transform:uppercase;color:var(--fg);opacity:.62;margin-top:4px;transition:color .7s ease;}
.ab-p{font-size:22px;font-weight:400;line-height:1.68;color:var(--fg);margin-bottom:22px;transition:color .7s ease;}
.ab-p strong{color:var(--fg);font-weight:700;transition:color .7s ease;}
/* Le competenze sono chip come quelle della hero: stesso bordo nero
   spesso, stesso nero pieno del testo, stessi colori. Prima erano
   pillole con un filetto crema traslucido — un'altra cosa. Qui non c'e'
   la fisica, quindi i colori li da nth-child invece delle classi c1..c15. */
.skills{display:flex;flex-wrap:wrap;gap:10px;margin-top:36px;}
.sk{
  display:inline-flex;align-items:center;white-space:nowrap;
  font-size:clamp(12px,1.05vw,17px);font-weight:900;letter-spacing:.02em;
  text-transform:uppercase;-webkit-text-stroke:0.5px #0a0907;color:#0a0907;
  border:4px solid #0a0907;border-radius:100px;
  padding:clamp(8px,.8vw,13px) clamp(14px,1.7vw,26px);
  opacity:0;transform:scale(.9);
  transition:opacity .4s ease,transform .4s cubic-bezier(.34,1.56,.64,1);
}
.sk.in{opacity:1;transform:scale(1);}
.sk:nth-child(8n+1){background:#5bb8f5;}
.sk:nth-child(8n+2){background:#d4b84a;}
.sk:nth-child(8n+3){background:#4ecb71;}
.sk:nth-child(8n+4){background:#9b59f5;}
.sk:nth-child(8n+5){background:#f57c35;}
.sk:nth-child(8n+6){background:#fdffb6;}  /* non rosa: sarebbe lo stesso colore del fondo */
.sk:nth-child(8n+7){background:#b5ead7;}
.sk:nth-child(8n+8){background:#ffd6a5;}
.sk:hover{transform:scale(1.05) rotate(-1.5deg);}
@media(max-width:768px){#about{grid-template-columns:1fr;gap:50px;}}

/* FESTIVAL */
#festival{position:relative;padding:var(--sec-y) var(--pad-x);display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:center;overflow:hidden;transition:color .7s ease;}
.fest-l{opacity:0;transform:translateX(-50px);transition:opacity .85s ease,transform .85s cubic-bezier(.16,1,.3,1);}
.fest-r{opacity:0;transform:translateX(50px);transition:opacity .85s ease,transform .85s cubic-bezier(.16,1,.3,1);}
.fest-l.in,.fest-r.in{opacity:1;transform:translateX(0);}
.fest-p{font-size:22px;font-weight:400;line-height:1.68;color:var(--fg);margin-bottom:40px;}
.fest-p strong{color:var(--fg);font-weight:700;}

.btn:hover{gap:22px;color:#d4b84a;}
@media(max-width:768px){#festival{grid-template-columns:1fr;gap:44px;}}




/* ── KINETIC TEXT ── */
#kinetic{
  padding:var(--sec-y) var(--pad-x);
  overflow:visible;
  text-align:center;
}
.kin-line{
  display:block;
  margin-bottom:48px;
  position:relative;
}
.kin-inner{
  display:inline-block;
  position:relative;
  transform:translateX(-120px);
  opacity:0;
  will-change:transform,opacity;
  cursor:default;
  transition:transform .9s cubic-bezier(.16,1,.3,1), opacity .6s ease;
}
.kin-line.from-right .kin-inner{transform:translateX(120px);}
.kin-line.in .kin-inner{
  transform:translateX(0)!important;
  opacity:1;
}
.kin-line.out.from-left  .kin-inner{transform:translateX(-120px)!important; opacity:0;}
.kin-line.out.from-right .kin-inner{transform:translateX(120px)!important;  opacity:0;}
.kin-word{
  display:inline-block;
  font-family:'New Title','New Title Static',sans-serif;font-weight:700;
  font-size:clamp(72px,15vw,240px);
  line-height:.84;letter-spacing:-.012em;
  color:var(--fg)!important;
  text-transform:uppercase;
  transition:color .7s ease;
}
/* sticker */
.kin-sticker{
  position:absolute;
  width:clamp(150px,14vw,220px);
  height:clamp(150px,14vw,220px);
  opacity:0;
  transform:scale(.3) rotate(-20deg);
  transition:opacity .35s cubic-bezier(.16,1,.3,1), transform .45s cubic-bezier(.16,1,.3,1);
  pointer-events:none;
  z-index:10;
}
.kin-inner:hover .kin-sticker{
  opacity:1;
  transform:scale(1) rotate(var(--sr, 0deg));
}
.kin-sticker svg{width:100%;height:100%;display:block;}
/* Sul telefono le parole erano cinque francobolli in mezzo a uno schermo
   vuoto: il carattere e' strettissimo, a 72px "IDENTITY" occupava 125px su
   390. Qui il corpo e' legato alla larghezza, cosi' la parola arriva quasi
   a bordo schermo su qualsiasi telefono. */
@media(max-width:768px){
  .kin-word{font-size:46vw;}
  .kin-line{margin-bottom:36px;}
  .kin-sticker{width:38vw;height:38vw;}
  /* Su un telefono non esiste il passaggio del dito sopra la parola: senza
     hover l'illustrazione non si vedeva mai. Entra insieme alla riga, un
     soffio dopo, e se ne va quando la riga se ne va. */
  .kin-line.in .kin-sticker{
    opacity:1;
    transform:scale(1) rotate(var(--sr,0deg));
    transition-delay:.18s;
  }
}

/* ══════════════════════════════════════════════
   GSAP PROPOSTA 1 — Draggable Fan Cards
   ══════════════════════════════════════════════ */
#testem-1{padding:var(--sec-y) var(--pad-x);}
.t1-hd{margin-bottom:80px;}
.t1-stage{
  position:relative;
  height:560px;
  display:flex;align-items:center;justify-content:center;
  overflow:visible;
}
.t1-card{
  position:absolute;
  width:360px;min-height:440px;
  border:4px solid #0a0907;border-radius:20px;
  padding:36px 32px 40px;
  display:flex;flex-direction:column;justify-content:space-between;
  cursor:grab;
  user-select:none;
  transform-origin:50% 110%;
  will-change:transform;
  color:#0a0907;
}
.t1-card:active{cursor:grabbing;}
.t1-card:nth-child(1){background:#FF87C3;z-index:5;}
.t1-card:nth-child(2){background:#5bb8f5;z-index:4;}
.t1-card:nth-child(3){background:#3E168B;z-index:3;color:#ECE4C3;}
.t1-card:nth-child(4){background:#4ecb71;z-index:2;}
.t1-card:nth-child(5){background:var(--yellow);z-index:1;color:var(--ink);}
.t1-q{font-size:clamp(15px,1.5vw,18px);font-weight:400;line-height:1.65;color:inherit;flex:1;}
.t1-foot{margin-top:24px;padding-top:16px;border-top:3px solid rgba(10,9,7,.12);}
.t1-name{font-size:var(--label-size);font-weight:var(--label-weight);letter-spacing:var(--label-track);text-transform:uppercase;color:inherit;}
.t1-role{font-size:var(--label-size);font-weight:var(--label-weight);letter-spacing:var(--label-track);text-transform:uppercase;color:inherit;opacity:.6;opacity:1;margin-top:3px;}
.t1-hint{font-size:var(--label-size);font-weight:var(--label-weight);letter-spacing:var(--label-track);text-transform:uppercase;color:var(--fg);opacity:.55;text-align:center;margin-top:32px;}








/* ══════════════════════════════════════════════
   ALT B — Three.js WebGL Scroll Gallery
   ══════════════════════════════════════════════ */
#proj-b{
  padding:0;
  background:var(--bg);
  overflow:hidden;
}
#proj-b-sticky{
  width:100%;
  height:100vh;
  overflow:hidden;
  position:relative;
  margin-top: 32px;
}
#proj-b-canvas{
  position:absolute;inset:0;
  width:100%;height:100%;
  display:block;
}
#proj-b-canvas.hovering{
  cursor:url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCA2MDUgNzczIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNNDk1LjA0IDMwMC43NEM0OTUuMDQgMjg5LjI0IDUwMC4wNiAyNzguODggNTA4LjExIDI3MS4zNkM1MTYuMTcgMjYzLjg0IDUyNy4yNyAyNTkuMTUgNTM5LjU4IDI1OS4xNUM1NjQuMDYgMjU5LjE1IDU4My45NyAyNzcuNzQgNTgzLjk3IDMwMC43M1Y0OTIuNzZDNTgzLjk3IDUzMS4zNiA1NzMuMzMgNTY5LjI2IDU1My4xMSA2MDIuNzVDNTMyLjg5IDYzNi4zOSA1MjIuNCA2NzQuMjggNTIyLjQgNzEyLjg5Vjc1MS40OUgyNDUuNTZDMjQ1LjU2IDY4Ni43NyAyMTguMDQgNjI0Ljc1IDE2OS4wOSA1NzkuMDVMMzYuODMgNDU1LjcxQzI2LjA0IDQ0NS42MyAyMC41NiA0MzIuNTggMjAuNTYgNDE5LjUyQzIwLjU2IDQwNi40NiAyNi4wMyAzOTMuMjYgMzYuNjcgMzgzLjMzQzU4LjI2IDM2My4xOCA5My4yMiAzNjMuMzIgMTE0LjUxIDM4My40N0wyMTguMTkgNDgxLjk3VjY2LjcwMDJDMjE4LjE5IDUzLjkzMDIgMjIzLjY2IDQyLjQzMDIgMjMyLjc4IDM0LjA2MDJDMjQyLjUxIDI0Ljg0MDIgMjU2LjY1IDE5LjU4MDIgMjcyIDIwLjcyMDJDMjk4LjE1IDIyLjcxMDIgMzE3LjMgNDQuNzEwMiAzMTcuMyA2OS4xMjAyVjIzMy4zM0MzMTcuMyAyMjEuODMgMzIyLjMyIDIxMS40NyAzMzAuMzcgMjAzLjk1QzMzOC4yOCAxOTYuNDMgMzQ5LjUzIDE5MS44OSAzNjEuNjkgMTkxLjg5QzM4Ni4zMiAxOTEuODkgNDA2LjA4IDIxMC4zNCA0MDYuMDggMjMzLjMzVjI2NC41NUM0MDYuMDggMjUzLjA1IDQxMS4xIDI0Mi42OSA0MTkuMTUgMjM1LjE3QzQyNy4yMSAyMjcuNjUgNDM4LjMxIDIyMi45NiA0NTAuNjIgMjIyLjk2QzQ3NS4xIDIyMi45NiA0OTUuMDEgMjQxLjU1IDQ5NS4wMSAyNjQuNTRWMzAwLjczTDQ5NS4wNCAzMDAuNzRaIiBmaWxsPSJibGFjayIvPgo8cGF0aCBkPSJNNDA2LjEgMjc1LjEzQzQwMC4yNiAyNzUuMTMgMzk1LjUzIDI3MC4zOSAzOTUuNTMgMjY0LjU1VjIzMy4zM0MzOTUuNTMgMjE2LjMxIDM4MC4zNiAyMDIuNDYgMzYxLjcyIDIwMi40NkMzNTIuNTYgMjAyLjQ2IDM0My44IDIwNS43OSAzMzcuNjkgMjExLjYxQzMzMS4zNSAyMTcuNTMgMzI3Ljg5IDIyNS4yMiAzMjcuODkgMjMzLjMzQzMyNy44OSAyMzkuMTcgMzIzLjE2IDI0My45MSAzMTcuMzIgMjQzLjkxQzMxMS40OCAyNDMuOTEgMzA2Ljc1IDIzOS4xNyAzMDYuNzUgMjMzLjMzQzMwNi43NSAyMTkuMyAzMTIuNTggMjA2LjExIDMyMy4xOSAxOTYuMjJDMzMzLjEyIDE4Ni43NyAzNDcuMTkgMTgxLjMxIDM2MS43MiAxODEuMzFDMzkyLjAyIDE4MS4zMSA0MTYuNjggMjA0LjY1IDQxNi42OCAyMzMuMzNWMjY0LjU1QzQxNi42OCAyNzAuMzkgNDExLjk1IDI3NS4xMyA0MDYuMTEgMjc1LjEzSDQwNi4xWiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZD0iTTQwNi4xIDQyMS42QzQwMC4yNiA0MjEuNiAzOTUuNTMgNDE2Ljg2IDM5NS41MyA0MTEuMDJWMzM2LjY1QzM5NS41MyAzMzAuODEgNDAwLjI2IDMyNi4wNyA0MDYuMSAzMjYuMDdDNDExLjk0IDMyNi4wNyA0MTYuNjcgMzMwLjgxIDQxNi42NyAzMzYuNjVWNDExLjAyQzQxNi42NyA0MTYuODYgNDExLjk0IDQyMS42IDQwNi4xIDQyMS42WiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZD0iTTQwNi4xIDM0Ny4yM0M0MDAuMjYgMzQ3LjIzIDM5NS41MyAzNDIuNDkgMzk1LjUzIDMzNi42NVYyNjQuNTVDMzk1LjUzIDI1MC41MiA0MDEuMzYgMjM3LjM0IDQxMS45NiAyMjcuNDRDNDIyLjM2IDIxNy43MyA0MzYuMSAyMTIuMzkgNDUwLjY1IDIxMi4zOUM0ODAuOTUgMjEyLjM5IDUwNS42MSAyMzUuNzkgNTA1LjYxIDI2NC41NVYzMDAuNzRDNTA1LjYxIDMwNi41OCA1MDAuODggMzExLjMyIDQ5NS4wNCAzMTEuMzJDNDg5LjIgMzExLjMyIDQ4NC40NyAzMDYuNTggNDg0LjQ3IDMwMC43NFYyNjQuNTVDNDg0LjQ3IDI0Ny40NSA0NjkuMyAyMzMuNTQgNDUwLjY2IDIzMy41NEM0NDEuNDggMjMzLjU0IDQzMi44NyAyMzYuODYgNDI2LjQgMjQyLjlDNDIwLjEzIDI0OC43NSA0MTYuNjggMjU2LjQ0IDQxNi42OCAyNjQuNTVWMzM2LjY1QzQxNi42OCAzNDIuNDkgNDExLjk1IDM0Ny4yMyA0MDYuMTEgMzQ3LjIzSDQwNi4xWiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZD0iTTQ5NS4wNCA0NDkuOThDNDg5LjIgNDQ5Ljk4IDQ4NC40NyA0NDUuMjQgNDg0LjQ3IDQzOS40VjM4Mi45MUM0ODQuNDcgMzc3LjA3IDQ4OS4yIDM3Mi4zMyA0OTUuMDQgMzcyLjMzQzUwMC44OCAzNzIuMzMgNTA1LjYxIDM3Ny4wNyA1MDUuNjEgMzgyLjkxVjQzOS40QzUwNS42MSA0NDUuMjQgNTAwLjg4IDQ0OS45OCA0OTUuMDQgNDQ5Ljk4WiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZD0iTTUyMi40IDc2Mi4wOEgyNDUuNTZDMjM5LjcyIDc2Mi4wOCAyMzQuOTkgNzU3LjM0IDIzNC45OSA3NTEuNUMyMzQuOTkgNjg5LjMgMjA5LjAyIDYzMC44IDE2MS44OSA1ODYuNzlMMjkuNjIgNDYzLjQ2QzE2Ljk2IDQ1MS42NSAxMCA0MzYuMDQgMTAgNDE5LjUzQzEwIDQwMy4wMiAxNi45MSAzODcuMzIgMjkuNDcgMzc1LjYxQzU1LjA0IDM1MS43MiA5Ni40NyAzNTEuODIgMTIxLjc5IDM3NS44MUwyMDcuNjIgNDU3LjM1VjY2LjcwMDJDMjA3LjYyIDUxLjI5MDIgMjE0LjAxIDM2LjkzMDIgMjI1LjY0IDI2LjI3MDJDMjM3Ljc3IDE0Ljc2MDIgMjU0Ljk5IDguOTAwMjMgMjcyLjggMTAuMTcwMkMzMDMuNyAxMi41MjAyIDMyNy44OSAzOC40MTAyIDMyNy44OSA2OS4xMTAyVjM4Ni43NEMzMjcuODkgMzkyLjU4IDMyMy4xNiAzOTcuMzIgMzE3LjMyIDM5Ny4zMkMzMTEuNDggMzk3LjMyIDMwNi43NSAzOTIuNTggMzA2Ljc1IDM4Ni43NFY2OS4xMjAyQzMwNi43NSA0OS40MTAyIDI5MS4xNCAzMi43ODAyIDI3MS4yMiAzMS4yNzAyQzI1OS4zNyAzMC4zOTAyIDI0OC4wMiAzNC4yMTAyIDI0MC4wNyA0MS43NDAyQzIzMi43NCA0OC40NzAyIDIyOC43NyA1Ny4yOTAyIDIyOC43NyA2Ni43MTAyVjQ4MS45OUMyMjguNzcgNDg2LjIyIDIyNi4yNSA0OTAuMDQgMjIyLjM3IDQ5MS43MUMyMTguNDkgNDkzLjM4IDIxMy45OCA0OTIuNTcgMjEwLjkxIDQ4OS42NkwxMDcuMjMgMzkxLjE3Qzg5Ljg4IDM3NC43MyA2MS40NiAzNzQuNyA0My44OSAzOTEuMDlDMzUuNjcgMzk4Ljc3IDMxLjE0IDQwOC44NyAzMS4xNCA0MTkuNTVDMzEuMTQgNDMwLjIzIDM1LjcyIDQ0MC4yNCA0NC4wNCA0NDguMDFMMTc2LjMxIDU3MS4zNEMyMjUuMTEgNjE2LjkxIDI1My4xMiA2NzYuNzkgMjU1LjkxIDc0MC45NEg1MTEuODJWNzEyLjkxQzUxMS44MiA2NzIuMzcgNTIyLjk2IDYzMi40IDU0NC4wNCA1OTcuMzJDNTYzLjI0IDU2NS41MSA1NzMuMzkgNTI5LjM3IDU3My4zOSA0OTIuNzhWMzAwLjc1QzU3My4zOSAyODMuNjUgNTU4LjIyIDI2OS43NCA1MzkuNTggMjY5Ljc0QzUzMC40MSAyNjkuNzQgNTIxLjc5IDI3My4wNiA1MTUuMzIgMjc5LjFDNTA5LjA1IDI4NC45NSA1MDUuNiAyOTIuNjQgNTA1LjYgMzAwLjc1VjM4Mi45M0M1MDUuNiAzODguNzcgNTAwLjg3IDM5My41MSA0OTUuMDMgMzkzLjUxQzQ4OS4xOSAzOTMuNTEgNDg0LjQ2IDM4OC43NyA0ODQuNDYgMzgyLjkzVjMwMC43NUM0ODQuNDYgMjg2LjcyIDQ5MC4yOSAyNzMuNTQgNTAwLjg5IDI2My42NEM1MTEuMjkgMjUzLjkzIDUyNS4wMyAyNDguNTkgNTM5LjU4IDI0OC41OUM1NjkuODggMjQ4LjU5IDU5NC41NCAyNzEuOTkgNTk0LjU0IDMwMC43NVY0OTIuNzhDNTk0LjU0IDUzMy4yMiA1ODMuMzUgNTczLjE1IDU2Mi4xNiA2MDguMjRDNTQzLjA2IDY0MCA1MzIuOTYgNjc2LjIxIDUzMi45NiA3MTIuOTFWNzUxLjUyQzUzMi45NiA3NTcuMzYgNTI4LjIzIDc2Mi4xIDUyMi4zOSA3NjIuMUw1MjIuNCA3NjIuMDhaIiBmaWxsPSJ3aGl0ZSIvPgo8cGF0aCBkPSJNMjI0Ljk5IDc1MS41MDFDMjI0Ljk5IDY5Mi4xODggMjAwLjI1NyA2MzYuMzAyIDE1NS4wNyA1OTQuMTA0TDIyLjgwMDggNDcwLjc3NEwyMi43OTg4IDQ3MC43NzNDOC4yMTY4NyA0NTcuMTcgMCA0MzguOTU0IDAgNDE5LjUzQzAuMDAwMTI2MDU5IDQwMC40NTcgNy44NzgxOCAzODIuNDA3IDIxLjk3NDYgMzY4LjkzNEwyMi42NTA0IDM2OC4yOTdDNTEuODM3MiAzNDEuMDM1IDk4Ljc1NTggMzQwLjkxMyAxMjcuOTggMzY3LjkwOUwxMjguNjY4IDM2OC41NTFMMTI4LjY3OCAzNjguNTZMMTk3LjYyIDQzNC4wNTZWNjYuNzAwOUMxOTcuNjIgNDguNDE5OSAyMDUuMjM3IDMxLjQwNiAyMTguODgzIDE4Ljg5ODFDMjMyLjk3NiA1LjU5NjMyIDI1Mi41NiAtMS4wNDM5MiAyNzIuNTU2IDAuMTMzNDk2TDI3My41MTIgMC4xOTU5OTZMMjczLjUzNSAwLjE5Njk3MkwyNzMuNTU5IDAuMTk4OTI2QzMwOS41OTcgMi45Mzk4MSAzMzcuODg5IDMzLjEwNjQgMzM3Ljg5IDY5LjExMDFWMTc1LjYwNEMzNDUuNDI0IDE3Mi43OTMgMzUzLjUzIDE3MS4zMSAzNjEuNzIgMTcxLjMxQzM4OC4xODIgMTcxLjMxIDQxMS40NzcgMTg2LjY1OCA0MjEuNDgxIDIwOC45NjdDNDMwLjQ2IDIwNC42NTggNDQwLjQwNyAyMDIuMzkgNDUwLjY1IDIwMi4zOUM0NzguNzczIDIwMi4zOSA1MDMuMjkxIDIxOS43NTMgNTEyLjExOCAyNDQuMzc4QzUyMC42NDMgMjQwLjU4MSA1MjkuOTgxIDIzOC41OTEgNTM5LjU4IDIzOC41OTFDNTc0LjkwMyAyMzguNTkxIDYwNC41NCAyNjUuOTgxIDYwNC41NCAzMDAuNzUxVjQ5Mi43OEM2MDQuNTQgNTM1LjA2NiA1OTIuODQgNTc2Ljc4MSA1NzAuNzIxIDYxMy40MUw1NzAuNzIgNjEzLjQwOUM1NTIuNTUyIDY0My42MjUgNTQyLjk2IDY3OC4wNTEgNTQyLjk2IDcxMi45MTFWNzUxLjUyQzU0Mi45NiA3NjIuODcxIDUzMy43NjUgNzcyLjEgNTIyLjM5IDc3Mi4xSDUwNi4xODhMNTA2LjE5NyA3NzIuMDgxSDI0NS41NkMyMzQuMTg1IDc3Mi4wODEgMjI0Ljk5IDc2Mi44NTEgMjI0Ljk5IDc1MS41MDFaTTIwNy42MiA0NTcuMzVMMTIxLjc5IDM3NS44MUM5Ni40NyAzNTEuODIgNTUuMDQgMzUxLjcyIDI5LjQ3IDM3NS42MUMxNi45MSAzODcuMzIgMTAgNDAzLjAyIDEwIDQxOS41M0MxMCA0MzYuMDQgMTYuOTYgNDUxLjY1IDI5LjYyIDQ2My40NkwxNjEuODkgNTg2Ljc5QzIwOS4wMiA2MzAuOCAyMzQuOTkgNjg5LjMgMjM0Ljk5IDc1MS41TDIzNS4wMDQgNzUyLjA0NUMyMzUuMjc4IDc1Ny40NTIgMjM5LjYwOSA3NjEuNzkzIDI0NS4wMTYgNzYyLjA2N0wyNDUuNTYgNzYyLjA4SDUyMi40TDUyMi4zOSA3NjIuMUM1MjguMjMgNzYyLjEgNTMyLjk2IDc1Ny4zNiA1MzIuOTYgNzUxLjUyVjcxMi45MUM1MzIuOTYgNjc2LjIxIDU0My4wNiA2NDAgNTYyLjE2IDYwOC4yNEM1ODMuMzUgNTczLjE1IDU5NC41NCA1MzMuMjIgNTk0LjU0IDQ5Mi43OFYzMDAuNzVDNTk0LjU0IDI3Mi4yMTUgNTcwLjI2NCAyNDguOTU2IDU0MC4yODkgMjQ4LjU5NEw1MzkuNTggMjQ4LjU5QzUyNy4wNDIgMjQ4LjU5IDUxNS4xMDYgMjUyLjU1NiA1MDUuMzkgMjU5Ljg2NkM1MDIuOTA2IDIzMy41MTIgNDc5LjY3NiAyMTIuNzM2IDQ1MS4zNTkgMjEyLjM5NEw0NTAuNjUgMjEyLjM5QzQzNy44MzcgMjEyLjM5IDQyNS42NTIgMjE2LjUzMiA0MTUuODIzIDIyNC4xNTJDNDExLjIyOSAxOTkuODMzIDM4OC43MTIgMTgxLjMxIDM2MS43MiAxODEuMzFDMzQ5LjM1NCAxODEuMzEgMzM3LjMyMSAxODUuMjY2IDMyNy44OSAxOTIuMjY5TDMyNy44OSA2OS4xMTAyQzMyNy44OSAzOC40MTAyIDMwMy43IDEyLjUyMDIgMjcyLjggMTAuMTcwMkMyNTQuOTkgOC45MDAyMyAyMzcuNzcgMTQuNzYwMiAyMjUuNjQgMjYuMjcwMkMyMTQuMDEgMzYuOTMwMiAyMDcuNjIgNTEuMjkwMiAyMDcuNjIgNjYuNzAwMlY0NTcuMzVaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K') 16 0,pointer;
}
#proj-b-hd{
  position:absolute;top:0;left:0;right:0;z-index:10;
  padding:60px var(--pad-x) 0;
  display:flex;justify-content:space-between;align-items:flex-start;
  pointer-events:none;
}
#proj-b-hd .sec-title{color:var(--fg);}
/* la label seguiva un nero fisso invece del token, l'unico pre-title del sito rimasto scuro */
#proj-b-info{
  position:absolute;bottom:64px;left:64px;z-index:10;
  pointer-events:none;
  /* il numero sta a destra e occupa circa 400px: oltre questo limite il
     nome del progetto ci finiva sotto */
  max-width:calc(100% - 64px - 400px);
}
#proj-b-name{
  font-family:'New Title','New Title Static',sans-serif;font-weight:700;
  font-size:clamp(38px,6vw,92px);
  color:var(--fg);line-height:.86;letter-spacing:-.015em;
  opacity:0;transform:translateY(16px);
  transition:opacity .4s ease, transform .4s cubic-bezier(.16,1,.3,1);
}
#proj-b-cat{font-size:var(--label-size);font-weight:var(--label-weight);letter-spacing:var(--label-track);text-transform:uppercase;color:rgba(236,228,195,.62);margin-bottom:8px;
  opacity:0;transition:opacity .3s ease;}
#proj-b-name.show,#proj-b-cat.show{opacity:1;transform:translateY(0);}
#proj-b-count{
  /* il bottone "View all" parte da 64px dal bordo ed e' largo ~160:
     a 200px il numero gli finiva sopra per 23px */
  position:absolute;bottom:64px;right:260px;z-index:10;
  font-family:'New Title','New Title Static',sans-serif;font-weight:700;font-size:clamp(80px,10vw,140px);
  color:var(--fg);line-height:1;letter-spacing:-.015em;
  pointer-events:none;
}
#proj-b-cta{
  position:absolute;bottom:64px;right:64px;z-index:10;
}
/* Su schermi stretti nome, numero e bottone stavano tutti a bottom:64
   su tre coordinate pensate per uno schermo largo, e si accavallavano:
   "01" finiva sopra "Citypop". Il nome va sopra; sotto, ai due lati,
   il bottone e il numero. */
@media(max-width:900px){
  /* Alzati dal fondo: il riquadro e' alto 100vh, che su telefono
     comprende anche la fascia dove il browser tiene la barra degli
     indirizzi — li' sotto il numero e il bottone restavano coperti.
     env() aggiunge lo spazio della barra di sistema dove c'e'. */
  #proj-b-info{bottom:calc(176px + env(safe-area-inset-bottom,0px));left:var(--pad-x);right:var(--pad-x);max-width:none;}
  #proj-b-name{font-size:clamp(34px,9vw,56px);}
  #proj-b-cta{bottom:calc(98px + env(safe-area-inset-bottom,0px));left:var(--pad-x);right:auto;}
  #proj-b-count{bottom:calc(94px + env(safe-area-inset-bottom,0px));right:var(--pad-x);padding-right:0;font-size:clamp(44px,13vw,72px);}
}
#proj-b-hint{font-size:var(--label-size);font-weight:var(--label-weight);letter-spacing:var(--label-track);text-transform:uppercase;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  z-index:5;pointer-events:none;
  
  color:rgba(236,228,195,.45);
  display:flex;flex-direction:column;align-items:center;gap:10px;
  transition:opacity .5s;}
#proj-b-hint.hide{opacity:0;}

/* card borders sopra il canvas WebGL */
#pb-cards-overlay{
  position:absolute;inset:0;pointer-events:none;z-index:3;
  display:flex;align-items:center;
}

.pb-hint-line{width:40px;height:1px;background:rgba(10,9,7,.25);}

/* ══════════════════════════════════════════════
   ALT C — GSAP Magnetic Stack Reveal
   ══════════════════════════════════════════════ */
#proj-c{padding:var(--sec-y) 0;overflow:hidden;}
.pc3-hd{padding:0 var(--pad-x) var(--gap);display:flex;justify-content:space-between;align-items:flex-end;}
.pc3-stack-wrap{
  position:relative;
  padding:0 var(--pad-x);
}
.pc3-item{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:64px;
  align-items:center;
  padding:80px 0;
  border-top:2px solid #0a0907;
  opacity:0;
  transform:translateY(60px);
}
.pc3-item:last-child{border-bottom:2px solid #0a0907;}
.pc3-item-img-wrap{
  position:relative;overflow:hidden;border-radius:12px;
  border:3px solid #0a0907;
  aspect-ratio:4/3;
}
.pc3-item-img{
  width:100%;height:100%;
  transform:scale(1.08);
  transition:transform .8s cubic-bezier(.16,1,.3,1);
}
.pc3-item:hover .pc3-item-img{transform:scale(1);}
.pc3-item-clip{
  position:absolute;inset:0;
  background:var(--bg);
  transform-origin:left;
  transform:scaleX(1);
  transition:transform .8s cubic-bezier(.77,0,.18,1);
}
.pc3-item.revealed .pc3-item-clip{transform:scaleX(0);}
.pc3-item-body{padding:20px 0;}
.pc3-item-num{font-size:var(--label-size);font-weight:var(--label-weight);letter-spacing:var(--label-track);text-transform:uppercase;color:var(--coral);margin-bottom:12px;}
.pc3-item-name{
  font-family:'New Title','New Title Static',sans-serif;font-weight:700;
  font-size:clamp(36px,5vw,80px);
  line-height:.88;letter-spacing:-.015em;color:var(--fg);
  margin-bottom:20px;
}
.pc3-item-cat{font-size:var(--label-size);font-weight:var(--label-weight);letter-spacing:var(--label-track);text-transform:uppercase;color:var(--fg);margin-bottom:28px;}
.pc3-item-desc{
  font-size:16px;line-height:1.6;color:var(--fg);
  max-width:380px;
}
.pc3-item-link{font-size:var(--label-size);font-weight:var(--label-weight);letter-spacing:var(--label-track);text-transform:uppercase;display:inline-flex;align-items:center;gap:8px;
  margin-top:28px;
  
  color:var(--fg);text-decoration:none;
  border-bottom:2px solid #0a0907;padding-bottom:4px;
  transition:gap .2s;}
.pc3-item-link:hover{gap:16px;}
/* alternating layout */
.pc3-item:nth-child(even){direction:rtl;}
.pc3-item:nth-child(even) .pc3-item-body{direction:ltr;}
.pc3-item:nth-child(even) .pc3-item-img-wrap{direction:ltr;}
.alt-tag{font-size:var(--label-size);font-weight:var(--label-weight);letter-spacing:var(--label-track);text-transform:uppercase;background:var(--fg);color:var(--bg);padding:5px 16px;border-radius:100px;display:inline-block;margin-bottom:20px;}

/* ── UNIFIED CTA BUTTON — stile identico al badge Available ── */
span.mag{display:inline-block;will-change:transform;}
.cta-btn{
  position:relative;
  display:inline-flex;align-items:center;gap:10px;
  font-size:var(--label-size);font-weight:var(--label-weight);letter-spacing:var(--label-track);
  text-transform:uppercase;color:var(--bg);background:var(--fg);
  border:3px solid var(--fg);border-radius:100px;
  padding:12px 28px;
  text-decoration:none;
  white-space:nowrap;
    transition:color .22s ease, background .22s ease, border-color .22s ease;
}
.cta-btn:hover{ background:transparent; color:var(--fg); border-color:var(--fg); }


#fest-trail{position:absolute;inset:0;pointer-events:none;z-index:2;overflow:hidden;}
.ft-img{position:absolute;object-fit:cover;border:4px solid #0a0907;border-radius:4px;pointer-events:none;will-change:transform,opacity;display:block;}
.fest-l,.fest-r{position:relative;z-index:3;}

/* CONTACT */
/* ── PROCESS SECTION ── */
#process{background:var(--bg);
  padding:var(--sec-y) var(--pad-x);
}
.proc-hd{margin-bottom:72px;}
/* ── Flick card deck (reference style) ── */
.proc-stage{
  display:flex;
  flex-direction:column;
  align-items:center;
}
.proc-deck{
  position:relative;
  width:clamp(320px,40vw,480px);
  aspect-ratio:3/4;
}
.fcard{
  position:absolute;
  inset:0;
  border-radius:20px;
  border:6px solid #0a0907;
  overflow:hidden;
  cursor:grab;
  user-select:none;
  will-change:transform;
  touch-action:none;
  background:#fff;
}
.fcard:active{cursor:grabbing;}
/* Le quattro carte del mazzo erano quattro foto di sconosciuti prese da
   Unsplash. Ora sono blocchi di colore del sito con il numero del
   passaggio: il nome del passaggio lo dice gia' il pannello di fianco,
   e 01-04 e' la stessa numerazione dell'accordion in About. */
.fcard-img{
  width:100%;
  height:100%;
  background:var(--fcard-color,#ECE4C3);
  background-size:cover;
  background-position:center;
  border-radius:14px;
  display:flex;align-items:center;justify-content:center;
}
.fcard-img span{
  font-family:'New Title','New Title Static',sans-serif;font-weight:700;
  font-size:clamp(90px,18vw,190px);line-height:1;
  color:#3E168B;
}
.fcard-badge{
  position:absolute;
  top:20px;
  right:20px;
  font-family:'New Title','New Title Static',sans-serif;font-weight:700;
  font-size:16px;
  letter-spacing:.04em;
  text-transform:lowercase;
  color:#0a0907;
  background:#fff;
  border:3px solid #0a0907;
  border-radius:100px;
  padding:6px 20px;
  pointer-events:none;
}
.fcard-drag-hint{font-size:var(--label-size);font-weight:var(--label-weight);letter-spacing:var(--label-track);text-transform:uppercase;position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  font-family:'DM Sans',sans-serif;
  
  
  
  
  color:#0a0907;
  background:#FF87C3;
  border-radius:100px;
  padding:6px 18px;
  z-index:100;
  pointer-events:none;}
.proc-info{
  text-align:center;
  margin-top:40px;
}
.proc-info-label{
  font-family:'New Title','New Title Static',sans-serif;font-weight:700;
  font-size:clamp(32px,5vw,48px);
  line-height:1;
  letter-spacing:-.02em;
  color:#0a0907;
  background:#fff;
  border:4px solid #0a0907;
  border-radius:100px;
  padding:10px 40px;
  display:inline-block;
  margin-bottom:20px;
  transition:opacity .3s ease, transform .3s ease;
}
.proc-info-desc{
  font-size:clamp(15px,1.4vw,19px);
  font-weight:500;
  line-height:1.55;
  color:#EEE4BF;
  max-width:440px;
  margin:0 auto;
  transition:opacity .3s ease, transform .3s ease;
}
.proc-hint{font-size:var(--label-size);font-weight:var(--label-weight);letter-spacing:var(--label-track);text-transform:uppercase;color:var(--fg);opacity:.55;text-align:center;
  
  
  
  
  
  opacity:.5;
  margin-top:32px;}
@media(max-width:768px){
  #process{isolation:isolate;background:var(--bg);}
  .proc-deck{
    width:clamp(280px,80vw,380px);
  }
}

/* LET'S WORK — enorme */

.ct-big{ margin-bottom:64px; overflow:hidden; }
.ct-line{
  display:block;
  font-family:'New Title','New Title Static',sans-serif;font-weight:700;
  font-size:clamp(56px,12.5vw,100vw);
  line-height:.82;
  letter-spacing:-.015em;
  color:var(--fg);
  white-space:nowrap;
}

.ct-letter{display:inline-block;opacity:0;transform:translateX(36px) rotate(3deg);will-change:transform,opacity;}
.ct-letter.in{opacity:1;transform:translateX(0) rotate(0deg);transition:opacity .4s ease,transform .5s cubic-bezier(.16,1,.3,1);}
/* ── STACKED CONTACT DECK ── */
.deck-wrap{display:flex;flex-direction:column;align-items:center;gap:24px;padding-bottom:20px;}
.deck{position:relative;width:560px;height:300px;opacity:0;transform:translateY(28px);transition:opacity .6s ease,transform .6s cubic-bezier(.16,1,.3,1);}
.deck.in{opacity:1;transform:translateY(0);}
.cc{position:absolute;width:540px;height:260px;top:20px;left:10px;border-radius:24px;border:5px solid #0a0907;padding:28px 40px;display:flex;flex-direction:column;justify-content:space-between;cursor:inherit;transition:transform .6s cubic-bezier(.34,1.35,.64,1),box-shadow .6s cubic-bezier(.34,1.35,.64,1),filter .25s;will-change:transform;user-select:none;pointer-events:none;overflow:hidden;}
.cc:nth-child(1){background:var(--beige-c, #EEE4BF);transform:rotate(-7deg) translateY(12px);z-index:1;}
.cc:nth-child(2){background:#5bb8f5;transform:rotate(-4deg) translateY(7px);z-index:2;}
.cc:nth-child(3){background:var(--bg);transform:rotate(-1.5deg) translateY(2px);z-index:3;}
.cc:nth-child(4){background:#FF87C3;transform:rotate(2deg) translateY(3px);z-index:4;}
.cc:nth-child(5){background:#4ecb71;transform:rotate(5deg) translateY(8px);z-index:5;}
.cc:nth-child(6){background:#FFD166;transform:rotate(8deg) translateY(13px);z-index:6;}
.deck.fanned .cc{pointer-events:auto;}
.deck.fanned .cc:nth-child(1){transform:rotate(-40deg) translateY(-240px) translateX(-340px);box-shadow:0 32px 60px rgba(0,0,0,.22);z-index:6;}
.deck.fanned .cc:nth-child(2){transform:rotate(-24deg) translateY(-290px) translateX(-200px);box-shadow:0 32px 60px rgba(0,0,0,.22);z-index:7;}
.deck.fanned .cc:nth-child(3){transform:rotate(-8deg) translateY(-310px) translateX(-60px);box-shadow:0 32px 60px rgba(0,0,0,.22);z-index:8;}
.deck.fanned .cc:nth-child(4){transform:rotate(8deg) translateY(-310px) translateX(60px);box-shadow:0 32px 60px rgba(0,0,0,.22);z-index:9;}
.deck.fanned .cc:nth-child(5){transform:rotate(24deg) translateY(-290px) translateX(200px);box-shadow:0 32px 60px rgba(0,0,0,.22);z-index:10;}
.deck.fanned .cc:nth-child(6){transform:rotate(40deg) translateY(-240px) translateX(340px);box-shadow:0 32px 60px rgba(0,0,0,.22);z-index:11;}
.deck.fanned .cc:hover{filter:brightness(1.07);box-shadow:0 44px 88px rgba(0,0,0,.3)!important;z-index:20!important;}
.cc-label{font-size:var(--label-size);font-weight:var(--label-weight);letter-spacing:var(--label-track);text-transform:uppercase;color:var(--ink);opacity:.55;font-family:'DM Sans',sans-serif;}
.cc:nth-child(3) .cc-label{color:var(--paper);}
.cc-value{font-family:'New Title','New Title Static',sans-serif;font-weight:700;font-size:56px;line-height:.92;color:#0a0907;letter-spacing:-.01em;white-space:nowrap;}
.cc:nth-child(3) .cc-value{color:var(--paper);}
.cc-cta{font-size:var(--label-size);font-weight:var(--label-weight);letter-spacing:var(--label-track);text-transform:uppercase;color:var(--ink);opacity:0;transition:opacity .3s;}
.cc:nth-child(3) .cc-cta{color:var(--paper);}
.deck.fanned .cc:hover .cc-cta{opacity:1;}
.deck-hint{font-size:var(--label-size);font-weight:var(--label-weight);letter-spacing:var(--label-track);text-transform:uppercase;color:var(--fg);transition:opacity .4s;pointer-events:none;}
.deck-hint.hidden{opacity:0;}
.deck-close{font-size:var(--label-size);font-weight:var(--label-weight);letter-spacing:var(--label-track);text-transform:uppercase;color:var(--fg);opacity:0;transition:opacity .4s;pointer-events:none;}
.deck-close.visible{opacity:1;}
@media(max-width:768px){#contact{}.deck,.cc{width:calc(100vw - 48px);}.deck{height:260px;}.cc{width:calc(100vw - 68px);height:220px;}
.deck.fanned .cc:nth-child(1){transform:rotate(-40deg) translateY(-180px) translateX(-220px);}
.deck.fanned .cc:nth-child(2){transform:rotate(-24deg) translateY(-220px) translateX(-130px);}
.deck.fanned .cc:nth-child(3){transform:rotate(-8deg) translateY(-240px) translateX(-40px);}
.deck.fanned .cc:nth-child(4){transform:rotate(8deg) translateY(-240px) translateX(40px);}
.deck.fanned .cc:nth-child(5){transform:rotate(24deg) translateY(-220px) translateX(130px);}
.deck.fanned .cc:nth-child(6){transform:rotate(40deg) translateY(-180px) translateX(220px);}}

/* ── PARALLAX FOOTER ──
   main copre il contact (z:1 > z:0)
   contact è sticky al fondo — si rivela quando main scorre via */
main{
  position:relative;
  z-index:1;
  background:var(--bg);
  transition:background 0.2s cubic-bezier(.76,0,.24,1);
}
#contact{
  position:sticky;
  bottom:0;
  z-index:0;
  padding:var(--sec-y) var(--pad-x) var(--sec-y-sm);
  transition:color .7s ease;
  background:var(--bg);
}


/* ── TEMA INVERTITO ──
   Sulle sezioni che cambiano colore si scambiano fondo e testo: crema
   sotto, viola profondo sopra. Basta ridefinire i due token, tutto il
   resto — bottoni, filetti, cursore — segue da solo. */
body.fest-active{
  --bg:#FF87C3;
  --fg:#3E168B;
  --sep:rgba(62,22,139,.34);
  background:var(--bg);color:var(--fg);
}
body.fest-active main{background:var(--bg);}
/* sulle sezioni chiare le CTA restano vuote col solo contorno, come in origine */
body.fest-active .n-dot,
body.fest-active .cta-btn{background:transparent;border-color:var(--fg);color:var(--fg);}

/* FOOTER */
/* old footer rules moved to bottom */

/* LABELS */
.lbl{font-size:var(--label-size);font-weight:var(--label-weight);letter-spacing:var(--label-track);text-transform:uppercase;color:var(--fg);display:inline-block;margin-bottom:18px;opacity:0;transform:translateX(-14px);transition:opacity .55s ease,transform .55s ease,color .7s ease;}
.lbl.in{opacity:1;transform:translateX(0);}

/* ── STATEMENT: line sweep + overflow ── */
#statement{position:relative;}
.stmt-sweep{
  position:absolute;left:140px;right:0;top:0;bottom:0;
  pointer-events:none;z-index:2;
  background:#3E168B;   /* stesso colore fisso di #statement: non deve mai poter diventare crema */
  transform-origin:left;
  transform:scaleX(1);
  transition:transform .9s cubic-bezier(.76,0,.24,1);
}
#statement.revealed .stmt-sweep{transform:scaleX(0);}
@media(max-width:768px){.stmt-sweep{left:0;}}

.about-l,.about-r{will-change:transform;}

/* ── FESTIVAL: background invert ── */
#festival{transition:color .7s ease;}
.fest-l,.fest-r,.fest-p,.fest-p strong{transition:color .7s ease;}

/* ── CONTACT: dark bg wipe ── */

/* ── Parallax: section separators ── */
.section-rule{
  height:1px;
  background:linear-gradient(to right, transparent, rgba(236,228,195,.3) 20%, rgba(236,228,195,.3) 80%, transparent);
  transform-origin:left;
  transform:scaleX(0);
  transition:transform 1.1s cubic-bezier(.16,1,.3,1);
}
.section-rule.in{transform:scaleX(1);}
.hc.font-lora { font-family: 'Lora', serif; text-transform: lowercase; font-style: italic; }
.hc.font-lora.font-lora-cap { text-transform: uppercase; }
#proj-b-canvas { cursor: inherit; }

#pb-hover-label {
  position: absolute;
  z-index: 20;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s ease;
  background: #0a0907;
  color: #EEE4BF;
  padding: 14px 20px;
  border-radius: 8px;
}
#pb-hover-label.show { opacity: 1; }
#pb-hover-label-cat {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .6;
  margin-bottom: 4px;
}
#pb-hover-label-name {
  font-family:'New Title','New Title Static',sans-serif;font-weight:700;
  font-size: 22px;
  line-height: 1;
  margin-bottom: 6px;
}
#pb-hover-label-cta {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  opacity: .7;
}

/* ── FOOTER IMPROVED ── */
footer { padding:var(--sec-y-sm) var(--pad-x) 32px; background:var(--bg); transition:border-color .7s ease;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}
.footer-left p:first-child {
  font-size:var(--label-size);font-weight:var(--label-weight);
  letter-spacing:var(--label-track);text-transform:uppercase;
  color:var(--fg);
  transition:color .7s ease;
}
.footer-role {
  font-size:var(--label-size);font-weight:var(--label-weight);
  letter-spacing:var(--label-track);text-transform:uppercase;
  color:var(--fg);opacity:1;
  margin-top:6px;
  transition:color .7s ease;
}
.footer-links {
  display: flex;
  gap: 28px;
  align-items: center;
}
.footer-links a {
  font-size:var(--label-size);font-weight:var(--label-weight);
  letter-spacing:var(--label-track);text-transform:uppercase;
  color:var(--fg);text-decoration:none;
  transition:color .7s ease, opacity .2s ease;
}
.footer-links a:hover { opacity: .6; }

@media(max-width:768px){
  footer { flex-direction: column; text-align: center; }
  .footer-links { flex-wrap: wrap; justify-content: center; gap: 16px; }
}

/* ── SECTION SEPARATORS (floating illustrations) ── */
.section-sep {
  position: relative;
  z-index: 10;
  pointer-events: none;
  overflow: visible;
  display: flex;
  margin: -60px 0;
}
.section-sep svg {
  width: clamp(120px, 16vw, 220px);
  height: auto;
  opacity: 0;
  transform: translateY(50px);
  transition: opacity .65s ease, transform .7s cubic-bezier(.16,1,.3,1);
  pointer-events: all;
}
.section-sep.sep-right {
  justify-content: flex-end;
  padding-right: 10%;
}
.section-sep.sep-left {
  justify-content: flex-start;
  padding-left: 10%;
}
.section-sep.in svg {
  opacity: 1;
  transform: translateY(0);
}
@media(max-width:768px){
  /* Erano gli unici disegni rimasti piccoli: 59px sullo schermo, mentre
     quelli che volano allo scroll ne misurano 150 e quelli sulle parole
     148. Stessa misura per tutti. */
  .section-sep svg { width: clamp(120px, 38vw, 150px); }
  .section-sep.sep-right { padding-right: 5%; }
  .section-sep.sep-left { padding-left: 5%; }
}

/* ── CURSOR TRAIL ── */
#cursor-trail {
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
}


/* ══════════════════════════════════════════════
   TRANSIZIONE FRA LE PAGINE
   ══════════════════════════════════════════════ */
#pt{position:fixed;inset:0;z-index:9700;pointer-events:none;}
#pt .pt-half{
  position:absolute;left:0;right:0;height:50.4%;
  background:var(--bg);
  transform:translateY(-101%);
}
#pt .pt-bot{top:auto;bottom:0;transform:translateY(101%);}
/* chiusura */
#pt.pt-closing{pointer-events:all;}
#pt.pt-closing .pt-half{transform:translateY(0);transition:transform .8s cubic-bezier(.76,0,.24,1);}
/* arrivo: partono chiuse... */
#pt.pt-closed .pt-half{transform:translateY(0);}
/* ...e si aprono */
#pt.pt-opening .pt-top{transform:translateY(-101%);transition:transform .8s cubic-bezier(.76,0,.24,1);}
#pt.pt-opening .pt-bot{transform:translateY(101%);transition:transform .8s cubic-bezier(.76,0,.24,1);}


/* ══════════════════════════════════════════════
   ACCESSIBILITÀ
   ══════════════════════════════════════════════ */
/* salta al contenuto: primo elemento raggiungibile col tab */
.skip{font-size:var(--label-size);font-weight:var(--label-weight);letter-spacing:var(--label-track);text-transform:uppercase;position:absolute;left:-9999px;top:0;z-index:10000;
  background:var(--paper);color:var(--ink);
  
  padding:14px 22px;border:3px solid var(--ink);border-radius:0 0 12px 0;}
.skip:focus{left:0;}

/* stato di focus visibile ovunque */
:focus-visible{
  outline:3px solid var(--yellow);
  outline-offset:3px;
  border-radius:2px;
}
/* il cursore personalizzato nasconde quello di sistema: chi usa la tastiera
   deve comunque vedere dove si trova */
body:focus-within .n-links a:focus-visible{outline-offset:5px;}

/* ══════════════════════════════════════════════
   MENO MOVIMENTO
   Per chi lo ha chiesto al sistema: niente scorrimenti, niente
   trasformazioni, niente parallasse. Il sito resta leggibile e completo.
   ══════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
  #cur-dot,#cur-ring{display:none!important;}
  body{cursor:auto!important;}
  a,button,[role=button],.chip,.btn,.sk,.n-links a,.n-dot,.t1-card,.pcard,.cc,.pc{cursor:pointer!important;}
  /* tutto ciò che entra animato deve comunque essere visibile */
  .sw-i,.lbl,.s-label,.proj-meta,.sk,.about-l,.about-r,.fest-l,.fest-r,
  .kin-inner,.pc,.deck,.proj-cta-wrap,.section-sep svg{
    opacity:1!important;transform:none!important;clip-path:none!important;
  }
  .stmt-sweep,.pc3-item-clip{display:none!important;}
  .h-scr-line{animation:none!important;}
}

body.fest-active .proc-info-desc{color:var(--fg)}
.fcard-drag-hint{font-size:var(--label-size);font-weight:var(--label-weight);letter-spacing:var(--label-track);line-height:1.4;padding:14px 24px;background:#191919;color:#ECE4C3;border:2px solid #ECE4C3;min-height:44px}

/* Requested marquee contrast and opaque separators. */
.mq-sep{opacity:1}
#mq1{background:#ECE4C3;border-color:#0A0907}
#mq1 .mq-i,#mq1 .mq-i b{color:#3E168B}
#mq1 .mq-sep{background:#3E168B}
.footer-signature{flex-basis:100%;width:100%;display:block;margin-top:36px}
/* la firma e' un filigrana: l'inchiostro della pagina appena accennato
   sul suo stesso fondo, non un colore a parte. Sul rosa rende come il
   vecchio #EC77B1, sul viola si adegua da sola. */
.footer-signature text{font-family:'New Title','New Title Static',sans-serif;font-weight:700;fill:var(--fg);fill-opacity:.15}
.footer-details{flex-basis:100%;display:flex;gap:18px 32px;flex-wrap:wrap;color:var(--fg);font-size:var(--label-size);font-weight:var(--label-weight);letter-spacing:var(--label-track)}
.footer-details a{color:inherit;text-decoration:none}
@media(max-width:768px){.footer-details{justify-content:center}.footer-signature{margin-top:20px}}

/* Footer contact form: one contact channel, without repeated social lists. */
/* Il footer prende il colore che la pagina ha in quel punto: se l'ultimo
   scroll prima del footer e' viola, il footer e' viola. Niente rosa
   scritto a mano, quindi niente stacco in fondo a nessuna pagina. */
footer.contact-footer{display:grid;grid-template-columns:1fr 1.3fr;gap:42px;background:var(--bg);color:var(--fg);text-align:left}
.footer-meta{grid-column:1/-1;display:flex;align-items:center;flex-wrap:wrap;gap:20px 32px;border-top:1px solid var(--fg);padding-top:22px;font-size:14px}.footer-meta a{color:inherit;text-decoration:none;font-size:var(--label-size);font-weight:var(--label-weight);letter-spacing:var(--label-track);text-transform:uppercase}
.footer-meta a:hover{text-decoration:underline;text-underline-offset:4px}.footer-meta span{margin-right:auto}.contact-footer .footer-signature{grid-column:1/-1;width:100%;margin:0}.contact-footer .footer-signature text{fill:var(--fg);fill-opacity:.15}.contact-footer .footer-role{opacity:1}
@media(max-width:700px){footer.contact-footer{grid-template-columns:1fr;gap:32px}.footer-meta{gap:12px 20px}.footer-meta span{width:100%}}
/* Footer action: same pill shape and label language as the site CTAs. */
/* (di Codex; i colori dell'hover passano dai token invece che da
   #3E168B/#FF87C3 fissi, se no il bottone non segue il footer che ora
   prende la tinta della sezione sopra) */
.footer-meta .footer-top{display:inline-flex;align-items:center;justify-content:center;gap:22px;padding:14px 18px 14px 24px;border:2px solid currentColor;border-radius:100px;background:transparent;color:inherit;font:var(--label-weight) var(--label-size)/1 'DM Sans',sans-serif;letter-spacing:var(--label-track);cursor:pointer;min-height:52px;transition:background .25s,color .25s}
.footer-top span{display:grid;place-items:center;width:26px;height:26px;font-size:25px;transition:transform .25s}
.footer-meta .footer-top:hover{background:var(--fg);color:var(--bg)}.footer-top:hover span{transform:translateY(-3px)}.footer-top:focus-visible{outline:2px dashed currentColor;outline-offset:5px}
@media(prefers-reduced-motion:reduce){.footer-meta .footer-top,.footer-top span{transition:none}}