/* Effetti del sito (scelti da Ludovico il 23/10/2026 tra le proposte: la "7 · Mix forma luminosa").
   Base scura con luci (dalla proposta Neon), nastri di testo, schede in orizzontale e pulsanti che si riempiono (dalla Cinetico),
   forma 3D luminosa che cambia sagoma (assets/effetti/forma.js). Si attivano con la classe "fx" sul body. */

/* Base comune delle proposte: barra di confronto, titoli a tendina, effetti riutilizzabili (anello luminoso, luce che segue il mouse, magnete). */

/* titoli che salgono riga per riga */
.pr-riga{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.pr-riga>span{display:inline-block}
html.anima .pr-riga>span{transform:translateY(108%)}

/* anello luminoso che gira attorno ai pulsanti; bagliore al passaggio del mouse */
@property --pr-ang{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes pr-gira{to{--pr-ang:360deg}}
.pr-anello{position:relative;isolation:isolate;transition:background .3s,box-shadow .45s,color .3s!important}
.pr-anello:hover{transform:none}
.pr-anello::after{content:"";position:absolute;inset:-2px;padding:2px;border-radius:inherit;pointer-events:none;
  background:conic-gradient(from var(--pr-ang),var(--pr-c1,#b5edce),var(--pr-c2,#87d6ec) 30%,var(--pr-c3,#7a5cff) 60%,var(--pr-c1,#b5edce));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  animation:pr-gira 3.2s linear infinite;opacity:.9}
.pr-anello:hover,.pr-anello:focus-visible{box-shadow:0 0 22px -2px var(--pr-alone,#b5edcecc),0 0 70px -6px var(--pr-alone2,#87d6ec99)}

/* luce che segue il mouse dentro le schede: bordo che si accende e alone morbido */
.pr-luce{position:relative;isolation:isolate}
.pr-luce::before,.pr-luce::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .45s}
.pr-luce::before{z-index:-1;background:radial-gradient(520px circle at var(--mx,50%) var(--my,50%),var(--pr-luce-fondo,#b5edce26),transparent 60%)}
.pr-luce::after{z-index:5;padding:1.5px;background:radial-gradient(300px circle at var(--mx,50%) var(--my,50%),var(--pr-luce,#b5edce),transparent 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.pr-luce:hover::before,.pr-luce:hover::after{opacity:1}

/* pulsanti "magnetici": il movimento lo fa GSAP, la transizione CSS sulla posizione lo frenerebbe */
.pr-magnete{will-change:transform}

/* le comparse le gestisce GSAP in ogni proposta: la comparsa CSS del sito (transizione su transform) le frenerebbe */
html.anima .reveal{opacity:1;transform:none;transition:none}

/* "strati": un elemento fisso (forma 3D, punti) passa sopra i fondi delle sezioni ma sotto testi e schede.
   Le sezioni non devono creare un proprio livello (niente z-index, transform, isolation sulle sezioni stesse). */
.pr-strati .pr-fisso{position:fixed;inset:0;width:100vw;height:100vh;z-index:1;pointer-events:none}
.pr-strati :is(.hero,.section,footer)>*{position:relative;z-index:2}


/* ===== Base scura e luci ===== */
.fx{background:#05090b;color:#e6eeeb}
.fx main{position:relative;z-index:1}
/* aurora fissa dietro la pagina: tre macchie di luce che si muovono lente */
.fx .pr-aurora{position:fixed;inset:-20vmax;z-index:0;pointer-events:none;overflow:hidden}
.fx .pr-aurora i{position:absolute;width:70vmax;height:70vmax;border-radius:50%;opacity:.5;will-change:transform}
.fx .pr-aurora i:nth-child(1){left:-5%;top:0;background:radial-gradient(closest-side,#1b8f78,transparent);animation:fx-a 26s ease-in-out infinite alternate}
.fx .pr-aurora i:nth-child(2){right:-10%;top:15%;background:radial-gradient(closest-side,#2b4fd9,transparent);animation:fx-b 32s ease-in-out infinite alternate}
.fx .pr-aurora i:nth-child(3){left:25%;bottom:-15%;background:radial-gradient(closest-side,#6b3fd1,transparent);opacity:.35;animation:fx-c 38s ease-in-out infinite alternate}
@keyframes fx-a{to{transform:translate(25vw,30vh) scale(1.2)}}
@keyframes fx-b{to{transform:translate(-30vw,20vh) scale(.85)}}
@keyframes fx-c{to{transform:translate(-15vw,-35vh) scale(1.25)}}
/* luce morbida che segue il mouse su tutta la pagina */
.fx .pr-torcia{position:fixed;left:0;top:0;width:700px;height:700px;margin:-350px 0 0 -350px;border-radius:50%;pointer-events:none;z-index:0;background:radial-gradient(closest-side,#5fe0c01f,transparent);will-change:transform}

/* sezioni: niente fondi chiari, separatore luminoso tra una e l'altra */
.fx .hero,.fx .section,.fx .vb-chi{background:transparent!important;color:#e6eeeb}
.fx .section{border-top:1px solid #ffffff12}
.fx .hero::after{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(#ffffff0d 1px,transparent 1px),linear-gradient(90deg,#ffffff0d 1px,transparent 1px);background-size:64px 64px;-webkit-mask:radial-gradient(ellipse 60% 70% at 40% 40%,#000,transparent);mask:radial-gradient(ellipse 60% 70% at 40% 40%,#000,transparent)}
.fx .hero-body{z-index:2}
.fx .hero-foto{filter:drop-shadow(0 0 1px #87d6ec) drop-shadow(0 0 30px #2b8fd955) drop-shadow(0 30px 60px #000a)}
.fx footer{position:relative;z-index:1;background:#030506}

/* testi delle sezioni che erano chiare: tutto leggibile sul fondo scuro (la finestra d'esempio resta uno "schermo" chiaro) */
.fx :is(#esempio,#offerta,#progetti,#laboratorio,#chi-sono,#partiamo) :is(p,small,span,li,summary,label,dd):not(.demo-window *):not(.pill):not(.pill *):not(.pr-riga):not(.pr-riga *){color:#c3d0cc}
.fx :is(#esempio,#offerta,#progetti,#laboratorio,#chi-sono,#partiamo) :is(h2,h3,b,strong,summary):not(.demo-window *):not(.pill *){color:#f3f7f5}
.fx .kicker,.fx .deliverable-no,.fx .eyebrow{color:#8ff0cf!important;text-shadow:0 0 18px #5fe0c066}
.fx .kicker::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:#8ff0cf;box-shadow:0 0 10px 2px #5fe0c0aa;margin-right:10px;vertical-align:middle}
.fx :is(.text-cta,.demo-chiusura a,.scope-note a,.lab-apri,.cf-consenso a){color:#8ff0cf!important}
.fx :is(.deliverable,.faq details,.start-expect,.project-detail,.step){border-color:#ffffff1a}
.fx .example-disclaimer{color:#a9b8b5!important}
/* titoli: gradiente argento, la parte "morbida" in neon */
.fx :is(h1,h2) .pr-riga>span{background:linear-gradient(180deg,#ffffff 30%,#a9bdb8);-webkit-background-clip:text;background-clip:text;color:transparent}
.fx h1 .soft .pr-riga>span{background:linear-gradient(90deg,#8ff0cf,#87d6ec,#a98bff,#8ff0cf);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;animation:fx-scorri 8s linear infinite;filter:drop-shadow(0 0 24px #5fe0c055)}
@keyframes fx-scorri{to{background-position:300% 0}}

/* schede di vetro scuro con luce al passaggio del mouse */
.fx :is(.deliverable,.scope-note,.project-card,.lab-card,.brief-form,.vb-cta,.diagram){background:#0b1316b3;border:1px solid #ffffff17;border-radius:18px;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.fx .deliverable{padding:30px 28px;margin-bottom:14px}
.fx .deliverables{display:grid;gap:0}
.fx :is(.project-card,.lab-card){padding:14px}
.fx :is(.lab-img,.scene){border-radius:12px;overflow:hidden}
.fx .step{border-radius:12px;padding-left:16px;padding-right:16px}
.fx .step.active{background:#8ff0cf12;box-shadow:inset 0 0 0 1px #8ff0cf44,0 0 40px -12px #5fe0c066}
.fx .demo-window{border-radius:16px;box-shadow:0 0 0 1px #ffffff14,0 50px 120px -30px #2b8fd966,0 0 80px -20px #5fe0c044}
.fx .demo-controls button{color:#dfe8e4;border-color:#ffffff33;background:#ffffff08}
.fx .demo-controls button small{color:#a9b8b5!important}
.fx .demo-controls button[aria-pressed=true]{background:#8ff0cf;color:#06110d;border-color:#8ff0cf;box-shadow:0 0 30px -4px #5fe0c099}
.fx .demo-controls button[aria-pressed=true] small{color:#163b2e!important}
.fx .demo-passi b{background:#8ff0cf;color:#06110d;box-shadow:0 0 14px #5fe0c088}
.fx .demo-caption{color:#c3d0cc}
.fx .faq summary{color:#f3f7f5}
.fx .vb-chi-grid img{filter:drop-shadow(0 0 1px #8ff0cf) drop-shadow(0 0 40px #5fe0c044)}
/* raggio che si riempie accanto alle fasi del metodo */
.fx .steps{position:relative}
.fx .pr-raggio{position:absolute;left:-18px;top:0;bottom:0;width:2px;background:#ffffff14;border-radius:2px}
.fx .pr-raggio i{position:absolute;inset:0;transform-origin:top;transform:scaleY(0);background:linear-gradient(#8ff0cf,#87d6ec,#a98bff);box-shadow:0 0 14px 1px #5fe0c0aa}
/* pulsanti: anello neon e alone */
.fx .pill{--pr-alone:#5fe0c0cc;--pr-alone2:#2b8fd999}
.fx .vb-cta .pill,.fx .hero-actions .pill{box-shadow:0 0 30px -6px #25d36699}
@media(max-width:900px){.fx .pr-raggio{display:none}.fx .pr-torcia{display:none}}
.fx .demo-window{color:var(--ink)}
.fx .demo-passi b{color:#06110d!important}
.fx :is(.detail-links a,.close-detail){color:#8ff0cf!important;border-color:#8ff0cf66}


/* ===== Nastri, scorrimento orizzontale, pulsanti che si riempiono ===== */
/* nastri di testo */
.fx .pr-nastri{background:#080e10;padding:34px 0;overflow:hidden;position:relative;z-index:1;border-top:1px solid #ffffff14}
.fx .pr-nastro{display:flex;white-space:nowrap;will-change:transform}
.fx .pr-nastro span{font:600 clamp(48px,9vw,140px)/1.05 Manrope,sans-serif;letter-spacing:-.05em;padding-right:.4em;color:#f0f0e9}
.fx .pr-nastro span i{font-style:normal;color:#b5edce;text-shadow:0 0 30px #5fe0c088;padding:0 .25em}
.fx .pr-nastro.vuoto span{color:transparent;-webkit-text-stroke:1.5px #b5edce99}
/* consegne e laboratorio in orizzontale (computer) */
.fx .pr-binario{overflow:hidden}
@media(min-width:901px){
  .fx .deliverables{display:flex;gap:24px;width:max-content;padding:10px 0 30px;will-change:transform}
  .fx .deliverable{width:min(560px,40vw);flex:none;display:flex;flex-direction:column;gap:22px;padding:40px 36px;border:1px solid #182d2026;border-radius:26px;background:#fff;box-shadow:0 30px 70px -40px #17352866}
  .fx .deliverable-no{font:600 clamp(40px,4vw,64px)/1 Manrope,sans-serif;letter-spacing:-.04em;color:transparent!important;-webkit-text-stroke:1.5px #173528}
  .fx .lab-grid{display:flex;gap:28px;width:max-content;will-change:transform}
  .fx .lab-card{width:min(640px,46vw);flex:none}
}
.fx :is(.lab-img,.scene){border-radius:18px;overflow:hidden;display:block}
.fx :is(.lab-img,.scene) img{will-change:transform}
.fx .project-card,.fx .lab-card{--pr-luce:#2a7d96;--pr-luce-fondo:#87d6ec26}
.fx .step{border-radius:12px;padding-left:14px;padding-right:14px}
/* pulsanti che si riempiono partendo dal punto in cui entra il mouse */
.fx .pill,.fx .nav-contact{position:relative;isolation:isolate;overflow:hidden;transition:color .35s,box-shadow .4s!important}
.fx .pill::before,.fx .nav-contact::before{content:"";position:absolute;left:var(--px,50%);top:var(--py,50%);width:0;height:0;border-radius:50%;background:#f0f0e9;transform:translate(-50%,-50%);transition:width .55s cubic-bezier(.22,1,.36,1),height .55s cubic-bezier(.22,1,.36,1);z-index:-1}
.fx .pill:hover::before,.fx .nav-contact:hover::before{width:320%;height:900%}
.fx .pill:hover{color:#08140c!important;box-shadow:0 0 34px -6px #b5edcecc;transform:none}
.fx .nav-contact:hover{color:#08140c}
.fx .hero h1 .soft .pr-riga>span{color:#b5edce;text-shadow:0 0 40px #5fe0c044}
@media(max-width:900px){.fx .pr-nastri{padding:22px 0}}


/* ===== Accordi tra le parti, lavori, metodo in orizzontale, forma 3D ===== */
/* titolo d'apertura: resta il gradiente neon della 2 (la 4 lo colorerebbe pieno) */
.fx .hero h1 .soft .pr-riga>span{color:transparent;text-shadow:none}
/* nastri: trasparenti sul fondo scuro, con una linea luminosa sopra e sotto */
.fx .pr-nastri{background:#05090bcc;border-top:1px solid #8ff0cf26;border-bottom:1px solid #8ff0cf26;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.fx .pr-nastro span i{color:#8ff0cf}
/* consegne in orizzontale: schede di vetro scuro invece che bianche */
@media(min-width:901px){
  .fx .deliverable{background:#0b1316cc;border:1px solid #ffffff17;box-shadow:0 30px 70px -40px #000c}
  .fx .deliverable-no{-webkit-text-stroke:1.5px #8ff0cf;text-shadow:0 0 30px #5fe0c044}
}
/* pulsanti: si riempiono di verde chiaro dal punto in cui entra il mouse; l'anello luminoso resta sul bordo (dentro, perché il riempimento taglia ciò che esce) */
.fx .pill::before,.fx .nav-contact::before{background:#d9fbec}
.fx .pill:hover,.fx .nav-contact:hover{color:#06110d!important;box-shadow:0 0 34px -4px #5fe0c0cc,0 0 80px -10px #2b8fd999}
.fx .pr-anello::after{inset:0;z-index:1}
/* elemento 3D: un po' più tenue fuori dall'apertura, così il testo chiaro resta in primo piano */
.fx .pr-fisso{transition:opacity .8s}
.fx .pr-fisso.tenue{opacity:.62}
@media(max-width:900px){.fx .pr-fisso{opacity:.5}.fx .pr-fisso.tenue{opacity:.4}}

/* lavori selezionati: due riquadri grandi e uguali, l'immagine riempie il riquadro con precisione (niente inclinazioni) */
.fx .project-grid{grid-template-columns:1fr 1fr;gap:28px;align-items:start}
.fx .project-card.second{margin-top:0}
.fx .project-card .scene,.fx .second .scene{height:auto;aspect-ratio:16/10;padding:0;background:#0b1316;border-radius:12px}
.fx .scene::before{display:none}
.fx .project-card .mini-site,.fx .second .mini-site{position:absolute;inset:0;width:100%;height:100%;transform:none;box-shadow:none;border-radius:0}
.fx .mini-site.shot img{object-fit:cover;object-position:top center;transition:transform 1s cubic-bezier(.22,1,.36,1)}
.fx .project-card:hover .mini-site{transform:none}
.fx .project-card:hover .mini-site.shot img{transform:scale(1.04)}
.fx .hover-note{z-index:3}
@media(max-width:900px){.fx .project-grid{grid-template-columns:1fr}}
/* come lavoriamo: le fasi in orizzontale sul computer, una alla volta con la successiva che si intravede */
@media(min-width:901px){
  .fx .pr-fasi-binario{position:relative;overflow:hidden;padding-bottom:26px;container-type:inline-size}
  .fx .pr-fasi-binario .steps{flex-direction:row;gap:18px;width:max-content;will-change:transform}
  .fx .pr-fasi-binario .step{flex:none;width:86cqw;min-height:300px;align-content:start;padding:30px 28px;border:1px solid #ffffff1a;border-radius:18px;background:#0b1316b3}
  .fx .pr-fasi-binario .step:last-child{border-bottom:1px solid #ffffff1a}
  .fx .pr-fasi-binario .step p{display:block}
  .fx .pr-fasi-binario .step:not(.active){opacity:.9}
  .fx .pr-fasi-binario .step{transition:opacity .4s,background .4s,box-shadow .4s}
  .fx .pr-raggio.orizzontale{left:0;right:0;top:auto;bottom:4px;width:auto;height:2px}
  .fx .pr-raggio.orizzontale i{transform-origin:left;transform:scaleX(0)}
}