/* V9 — effetti da provare (A–E), ognuno si accende/spegne dal pannello "Effetti" */

/* pannello di prova */
#fxp{position:fixed;left:6px;top:50%;transform:translateY(-50%);z-index:90;display:flex;flex-direction:column;align-items:center;gap:4px;padding:5px;border-radius:99px;
  background:rgba(10,9,8,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(232,225,214,.18);font:600 11px/1 var(--sans)}
#fxp span{padding:4px 0 2px;letter-spacing:.08em;text-transform:uppercase;opacity:.7;font-size:8px}
#fxp button{all:unset;cursor:pointer;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;color:var(--paper);opacity:.45;border:1px solid transparent}
#fxp button.on{opacity:1;background:rgba(232,225,214,.14);border-color:rgba(232,225,214,.35)}
#fxp .legend{position:absolute;left:calc(100% + 8px);top:50%;transform:translateY(-50%);white-space:nowrap;padding:8px 12px;border-radius:8px;background:rgba(10,9,8,.9);
  font:500 12px/1.3 var(--sans);opacity:0;pointer-events:none;transition:opacity .3s}
#fxp .legend.show{opacity:1}

/* ── A · la foto si apre dal suo posto ── */
.strip figure{flex:0 0 auto;margin:0;position:relative;scroll-snap-align:start}
.strip figure img{display:block}
.strip figcaption{margin-top:8px;font:500 13px/1.3 var(--sans);opacity:.8;max-width:min(58vw,250px)}
body.fx-a .strip img{cursor:zoom-in}
.lb{position:fixed;inset:0;z-index:95;display:grid;place-items:center;pointer-events:none}
.lb .bg{position:absolute;inset:0;background:rgba(6,5,4,.94);opacity:0;pointer-events:auto}
.lb .lbp{position:fixed;object-fit:cover;border-radius:3px;will-change:left,top,width,height;box-shadow:0 40px 90px -30px #000;pointer-events:auto;touch-action:pan-y}
.lb .tx{position:fixed;left:0;right:0;bottom:max(26px,env(safe-area-inset-bottom));padding:0 max(22px,6vw);text-align:center;pointer-events:none}
.lb .tx b{display:block;font:400 italic clamp(30px,6vw,52px)/1.05 var(--serif);color:var(--lt,var(--paper))}
.lb .tx p{margin:10px auto 0;max-width:34em;font:400 15.5px/1.55 var(--sans);opacity:.9}
.lb .tx small{display:block;margin-top:12px;font:600 10px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;opacity:.55}
.lb .x{all:unset;cursor:pointer;position:fixed;top:16px;right:16px;pointer-events:auto;font:600 11px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;padding:11px 14px;border-radius:99px;border:1px solid rgba(232,225,214,.3);background:rgba(10,9,8,.6)}
.lb .nv{all:unset;cursor:pointer;position:fixed;top:44%;pointer-events:auto;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(232,225,214,.25);background:rgba(10,9,8,.5);font:300 20px/1 var(--sans)}
.lb .nv.p{left:12px}.lb .nv.n{right:12px}
@media(hover:none){.lb .nv{display:none}}

/* ── B · la linea della riga ha la materia del mondo ── */
.voce{position:relative}
.voce .vline{position:absolute;left:0;right:0;top:-1px;height:24px;margin-top:-12px;pointer-events:none;display:none}
body.fx-b .voce .vline{display:block}
body.fx-b .voce{border-top-color:transparent}
.voce .vline svg{width:100%;height:100%;overflow:visible;display:block}
.voce .vline path{fill:none;stroke:rgba(232,225,214,.16);stroke-width:1}
.voce .vline .pulse{fill:none;stroke-width:2;stroke-linecap:round;opacity:0}
/* le foto si versano dal basso (Arte) / si accendono per punti (Ginkgo) */
body.fx-b .carta.liq .voce .strip figure{clip-path:inset(100% 0 0 0);transition:clip-path 1s cubic-bezier(.65,0,.25,1) calc(var(--i,0)*90ms + .15s)}
body.fx-b .voce.open .strip figure{clip-path:inset(0 0 0 0)!important}
body.fx-b .voce .vin>*{transition:opacity .9s ease calc(var(--j,0)*120ms + .2s),filter .9s ease calc(var(--j,0)*120ms + .2s),transform .9s var(--ease-out) calc(var(--j,0)*120ms + .2s)}
body.fx-b .voce:not(.open) .vin>*{opacity:0;transform:translateY(14px)}
body.fx-b .carta.net .voce:not(.open) .vin>*{filter:blur(6px)}

/* ── C · anteprima che segue il cursore (computer) / si accende al centro (telefono) ── */
#peek{position:fixed;left:0;top:0;z-index:60;width:200px;aspect-ratio:4/5;pointer-events:none;border-radius:3px;overflow:hidden;opacity:0;transform:translate(-50%,-50%) scale(.85) rotate(-3deg);
  transition:opacity .35s,transform .5s var(--ease-out);box-shadow:0 30px 60px -20px #000}
#peek img{width:100%;height:100%;object-fit:cover}
#peek.on{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(-3deg)}
.vh .th{display:none}
@media(hover:none){
  body.fx-c .vh{grid-template-columns:2.6em 1fr auto auto}
  body.fx-c .vh .th{display:block;grid-row:1/span 2;grid-column:3;width:52px;aspect-ratio:4/5;object-fit:cover;border-radius:2px;opacity:0;transform:scale(.8);transition:opacity .5s,transform .6s var(--ease-out)}
  body.fx-c .vh .pl{grid-column:4}
  body.fx-c .voce.near:not(.open) .vh .th{opacity:1;transform:none}
  body.fx-c .voce.near .vh h3{color:var(--lt)}
}

/* ── D · anteprima viva + il progetto si apre allargandosi ── */
.pv{position:relative;width:min(38vw,200px);aspect-ratio:4/5;overflow:hidden;border-radius:3px;box-shadow:0 0 0 1px rgba(232,225,214,.18),0 20px 50px -20px #000;background:#000}
.pv img{position:absolute;inset:0;width:100%!important;height:100%!important;object-fit:cover;object-position:top;box-shadow:none!important;border-radius:0!important;aspect-ratio:auto!important}
.pv .live{opacity:0;transition:opacity .6s}
body.fx-d .pv{aspect-ratio:240/519;width:min(38vw,170px)}
body.fx-d .pv .live{opacity:1}
@media(max-width:560px){.pv{width:62vw}body.fx-d .pv{width:46vw}}
.zoomer{position:fixed;z-index:99;background:#000;overflow:hidden;border-radius:3px}
.zoomer img{width:100%;height:100%;object-fit:cover;object-position:top}

/* ── E · titoli che entrano come inchiostro ── */
body.fx-e .sh h2 .ik,body.fx-e .storia blockquote .ik{display:inline-block;opacity:0;filter:blur(8px);transform:translateY(.25em);transition:opacity .9s ease,filter .9s ease,transform 1s var(--ease-out);transition-delay:calc(var(--c)*28ms)}
body.fx-e .ink-in .ik{opacity:1!important;filter:none!important;transform:none!important}

/* A: binario nativo per sfogliare */
.lb .lbr{position:fixed;left:0;right:0;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;scrollbar-width:none;pointer-events:auto;visibility:hidden}
.lb .lbr::-webkit-scrollbar{display:none}
.lb .lbr.on{visibility:visible}
.lb .lbr .sl{flex:0 0 100%;display:grid;place-items:center;scroll-snap-align:center;scroll-snap-stop:always}
.lb .lbr img{object-fit:cover;border-radius:3px;box-shadow:0 40px 90px -30px #000;-webkit-user-drag:none;user-select:none}

/* ── 1 · telefono disegnato a linea d'argento ── */
.lphone{position:relative;width:min(58vw,230px);aspect-ratio:9/19.5;flex:0 0 auto;transform:perspective(900px) rotateY(calc(var(--tx,0)*7deg)) rotateX(calc(var(--ty,0)*-5deg));transition:transform .25s ease-out}
.lphone .scr{position:absolute;inset:6px;overflow:hidden;background:#000;opacity:0;clip-path:inset(49.6% 0 49.6% 0);filter:brightness(2.4) saturate(0)}
.lphone .scr img,.lphone .scr video{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.lphone.drawn .scr{opacity:1;transition:clip-path .6s cubic-bezier(.7,0,.2,1),filter 1.1s ease .45s;clip-path:inset(0 0 0 0);filter:none}
.lphone .gl{position:absolute;z-index:2;pointer-events:none;overflow:hidden}
.lphone .gl::before{content:"";position:absolute;inset:-20% -60%;background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.16) 49%,rgba(255,255,255,.05) 53%,transparent 60%);transform:translateX(-70%)}
.lphone.lit .gl::before{animation:glass 7s cubic-bezier(.4,0,.2,1) infinite}
@keyframes glass{0%{transform:translateX(-70%)}24%,100%{transform:translateX(70%)}}
.lphone::after{content:"";position:absolute;inset:6% -35% -14%;z-index:-1;background:radial-gradient(closest-side,rgba(143,208,176,.16),transparent);opacity:0;transition:opacity 1.6s}
.lphone.lit::after{opacity:1}
/* accensione da televisore */
.lphone.off .scr{transition:clip-path .35s cubic-bezier(.7,0,.3,1),filter .2s;clip-path:inset(49.6% 3% 49.6% 3%);filter:brightness(3) saturate(0)}
.lphone.crt .scr{animation:crt .78s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes crt{0%{clip-path:inset(49.6% 48% 49.6% 48%);filter:brightness(4) saturate(0)}35%{clip-path:inset(49.6% 0 49.6% 0);filter:brightness(3) saturate(0)}70%{clip-path:inset(0 0 0 0);filter:brightness(1.6) saturate(.5)}100%{clip-path:inset(0 0 0 0);filter:none}}
.vin .gk{display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:center}
@media(max-width:560px){.vin .gk{grid-template-columns:1fr;justify-items:center}.vin .gk .lphone{justify-self:center}.vin .gk>div{justify-self:stretch}}

/* 4 · passaggio tra i mondi */
.morph{position:fixed;inset:0;z-index:120;background:#000;opacity:0}
.morph canvas{position:absolute;inset:0;width:100%;height:100%}
.morph.in{opacity:1;transition:background .6s ease}.morph.in.bgout{background:transparent}
.morph span{position:absolute;left:0;right:0;bottom:16vh;text-align:center;font:300 italic clamp(30px,7vw,60px)/1 var(--serif);color:#e8e1d6;opacity:0;transition:opacity .6s}
.morph.done span{opacity:1}
/* 5 · l'apertura risponde al dito */
.wh .touchfx{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.wh>*:not(.touchfx){position:relative;z-index:1}
/* 6 · il bancone */

/* foto non salvabili col dito (iPhone: niente menu "Salva immagine") né trascinabili */
img,canvas{-webkit-touch-callout:none;-webkit-user-drag:none;user-select:none;-webkit-user-select:none}

.vin .mbdance{width:min(40vw,170px);height:auto;filter:drop-shadow(0 20px 30px rgba(0,0,0,.6))}
@media(max-width:560px){.vin .mbdance{width:44vw;justify-self:center}}

/* riflesso che segue l'inclinazione del telefono (o il mouse) */
.lphone .gl::after{content:"";position:absolute;inset:-40%;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.13) 47%,rgba(255,255,255,.04) 52%,transparent 58%);
  transform:translate(calc(var(--tx,0)*28%),calc(var(--ty,0)*18%));transition:transform .25s ease-out;opacity:0}
.lphone.lit .gl::after{opacity:1;transition:transform .25s ease-out,opacity 1s}
@media(max-width:560px){.vin .gk .lphone{width:60vw}}

/* telefono 3D */
.p3{position:relative;width:min(62vw,270px);perspective:1200px;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}
.p3.grab{cursor:grabbing}
.p3::before{content:"";display:block;height:var(--h)}
.p3-body{position:absolute;left:0;top:0;width:var(--w);height:var(--h);transform-style:preserve-3d;will-change:transform}
/* scocca: strati d'argento con lo stesso profilo arrotondato → bordo pieno da ogni angolo */
.p3-ed{position:absolute;inset:0;border-radius:var(--r);
  background:linear-gradient(calc(100deg + var(--sh,0)*360deg),#5f5c56,#d9d5cd 18%,#8a867f 34%,#f4f1ea 50%,#7c7973 66%,#cfcbc3 82%,#5f5c56)}
.p3-f{position:absolute;inset:0;border-radius:var(--r);backface-visibility:hidden;-webkit-backface-visibility:hidden}
/* fronte: cornice d'argento sottile tutta uguale, poi il vetro nero e lo schermo */
.p3-front{transform:translateZ(calc(var(--t)/2));padding:calc(var(--w)*.012);box-sizing:border-box;
  background:linear-gradient(calc(120deg + var(--sh,0)*360deg),#6d6a64,#f4f1ea 30%,#9a968f 50%,#ece8e0 72%,#6d6a64)}
.p3-front::before{content:"";position:absolute;inset:calc(var(--w)*.012);border-radius:calc(var(--r) - var(--w)*.012);background:#050505}
.p3-scr{position:absolute;inset:calc(var(--w)*.045);border-radius:calc(var(--r) - var(--w)*.04);overflow:hidden;background:#000}
.p3-scr video,.p3-scr img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.p3-isl{position:absolute;left:50%;top:calc(var(--w)*.075);width:30%;height:calc(var(--w)*.075);transform:translateX(-50%);border-radius:99px;background:#000;box-shadow:0 0 0 1px rgba(232,225,214,.18)}
.p3-gl{position:absolute;inset:calc(var(--w)*.045);border-radius:calc(var(--r) - var(--w)*.04);pointer-events:none;
  background:linear-gradient(115deg,transparent calc(var(--sh,0)*140% - 40%),rgba(255,255,255,.15) calc(var(--sh,0)*140% - 26%),transparent calc(var(--sh,0)*140% - 14%))}
/* retro: argento satinato come il bordo, con la foglia incisa (scavata, più scura) */
.p3-back{transform:rotateY(180deg) translateZ(calc(var(--t)/2));overflow:hidden;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px),
    linear-gradient(calc(150deg + var(--sh,0)*200deg),#8f8b84,#d8d4cc 28%,#a7a39c 46%,#ece8e0 60%,#9b978f 78%,#c9c5bd);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55),inset 0 0 0 3px rgba(0,0,0,.08)}
.p3-leaf{position:absolute;left:12%;right:12%;top:18%;aspect-ratio:1;-webkit-mask:url(/v9/img/foglia.svg) center/contain no-repeat;mask:url(/v9/img/foglia.svg) center/contain no-repeat;
  background:linear-gradient(calc(115deg + var(--sh,0)*360deg),#57534d,#7d7972 35%,#4a4742 55%,#6e6a63 80%,#55524c)}
/* bordo dell'incisione: un filo di luce sotto, un'ombra sopra */
.p3-leaf-d{transform:translate(.8px,1.2px);background:rgba(255,255,255,.75)}
.p3-leaf-s{transform:translate(-.6px,-.8px);background:rgba(40,38,34,.55)}
.p3-bgl{position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent calc(var(--sh,0)*160% - 50%),rgba(255,255,255,.22) calc(var(--sh,0)*160% - 35%),transparent calc(var(--sh,0)*160% - 20%))}
/* iPad orizzontale */
.p3.ipad{width:min(88vw,620px)}
.p3.ipad .p3-isl{left:auto;right:calc(var(--w)*.016);top:50%;width:calc(var(--w)*.008);height:calc(var(--w)*.008);transform:translateY(-50%)}
.p3.ipad .p3-scr{inset:calc(var(--w)*.03);border-radius:calc(var(--r) - var(--w)*.02)}
.p3.ipad .p3-gl{inset:calc(var(--w)*.03);border-radius:calc(var(--r) - var(--w)*.02)}
.p3.ipad .p3-leaf{left:35%;right:35%;top:auto;bottom:auto;inset-block:14%;aspect-ratio:auto}
.p3.still{pointer-events:none}
.p3::after{content:"";position:absolute;left:12%;right:12%;bottom:-6%;height:5%;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.7),transparent);filter:blur(4px)}
.p3hint{font:500 13px/1.4 var(--sans);opacity:.7}

/* niente tasto "play" di Safari sopra le anteprime */
video::-webkit-media-controls-start-playback-button{display:none!important;-webkit-appearance:none}
video::-webkit-media-controls{display:none!important}
/* comandi del telefono 3D */
.p3ctl{display:flex;gap:10px;justify-content:center}
.p3ctl button{all:unset;cursor:pointer;font:600 12px/1 var(--sans);letter-spacing:.04em;padding:10px 14px;border-radius:99px;border:1px solid rgba(232,225,214,.28);color:var(--paper);background:rgba(0,0,0,.25)}
.p3ctl button.on{background:var(--paper);color:#0d0c0b}
/* la "foto di vetrina" nella lista dei lavori */
.vin .still3d{width:min(46vw,210px);height:auto;filter:drop-shadow(0 26px 30px rgba(0,0,0,.55));justify-self:center}
.vin .still3d.wide{width:min(80vw,380px)}
@media(max-width:560px){.vin .still3d{width:42vw}.vin .still3d.wide{width:80vw}}