/* Predict Studio · bozza · base comune a tutte le pagine (token, temi, angoli, cursore, testi) */
:root{--rad:clamp(6px,.7vw,11px);
  --bg:#141413; --fg:#ECEAE4; --mute:#8C8A83; --dim:#55534E; --hair:rgba(236,234,228,.16); --hair2:rgba(236,234,228,.07); --rule:rgba(236,234,228,.3);
  --hand:#A7B89A;            /* verde salvia: unico accento dei segni a mano */
  --m:clamp(16px,2vw,28px);
  --cols:6; --colw:calc((100vw - 2*var(--m))/var(--cols));   /* la griglia di layout: le stesse colonne che si vedono disegnate sul fondo */
  --sans:"Host Grotesk",system-ui,sans-serif; --serif:"Instrument Serif",serif; --mono:"Geist Mono",ui-monospace,monospace;
  --e-out:cubic-bezier(.16,1,.3,1); --e-io:cubic-bezier(.76,0,.24,1);
  color-scheme:dark;
}
:root[data-theme="light"]{
  --bg:#ECEAE4; --fg:#141413; --mute:#6E6C66; --dim:#A4A19A; --hair:rgba(20,20,19,.18); --hair2:rgba(20,20,19,.07); --rule:rgba(20,20,19,.32);
  --hand:#6B8160;
  color-scheme:light;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--fg);overflow-x:clip}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{font-family:var(--sans);font-weight:300;-webkit-font-smoothing:antialiased}
/* cambio pagina (28/10): se ne va solo il contenuto, che sale appena; angoli, griglia e cursore restano fermi (prima lampeggiavano) */
body.leaving > :not(.corner):not(#grid):not(#cur):not(#sbar):not(#mnav):not(#mbtn){opacity:0;transform:translateY(-10px);transition:opacity .24s ease-in,transform .3s cubic-bezier(.5,0,.75,0)!important}
html.nav-in .corner{transition:none}
html.theming, html.theming *{transition:background-color .7s var(--e-out),color .7s var(--e-out),border-color .7s var(--e-out)!important}
body.locked{overflow:hidden;height:100vh}
body.nocursor, body.nocursor *{cursor:none!important}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img{display:block;max-width:100%}
::selection{background:transparent;color:inherit}   /* la selezione la segna la mano (sketchSelection) */
em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em}
.mono{font-family:var(--mono);font-size:10.5px;letter-spacing:.01em;font-weight:400}
.up{text-transform:uppercase;letter-spacing:.06em}
.mute{color:var(--mute)} .dim{color:var(--dim)}

/* angoli */
.corner{position:fixed;z-index:20;opacity:0;transition:opacity 1s var(--e-out)}
.ui-on .corner{opacity:1}
.c-tl{top:var(--m);left:var(--m);display:flex;align-items:center;gap:12px}
.c-tl svg{height:20px;width:auto;display:block}
.c-tl svg rect{fill:var(--fg)}
.c-tr{top:var(--m);right:var(--m);display:flex;gap:24px;align-items:center}
.c-bl{bottom:var(--m);left:var(--m);display:flex;gap:8px;color:var(--dim)}
.c-br{bottom:var(--m);right:var(--m);color:var(--mute)}
.link{position:relative;cursor:pointer;color:var(--fg)}
.c-bl button{color:var(--dim);transition:color .5s var(--e-out)}
.c-bl button.on{color:var(--fg)}
#snd,#thm{display:flex;align-items:center;gap:8px}
#snd .bars{display:flex;gap:2px;align-items:flex-end;height:9px}
#snd .bars i{width:1px;height:100%;background:currentColor;transform-origin:bottom;animation:bar 1.1s var(--e-io) infinite}
#snd .bars i:nth-child(2){animation-delay:-.35s}#snd .bars i:nth-child(3){animation-delay:-.7s}
#snd.off .bars i{animation:none;transform:scaleY(.2)}
@keyframes bar{0%,100%{transform:scaleY(.25)}50%{transform:scaleY(1)}}
#thm .disc{width:9px;height:9px;border-radius:50%;border:1px solid currentColor;position:relative;overflow:hidden}
#thm .disc::after{content:"";position:absolute;inset:0;background:currentColor;transform:translateX(50%);transition:transform .7s var(--e-io)}
:root[data-theme="light"] #thm .disc::after{transform:translateX(-50%)}

/* pillole */
.pill{font-family:var(--mono);font-size:10.5px;color:var(--fg);border:1px solid var(--hair);border-radius:99px;padding:11px 20px;position:relative;overflow:hidden;isolation:isolate;display:inline-flex;gap:10px;align-items:center;transition:color .6s var(--e-out),border-color .6s var(--e-out)}
.pill::before{content:"";position:absolute;inset:0;background:var(--fg);transform:translateY(101%);transition:transform .6s var(--e-out);z-index:-1}
.pill:hover{color:var(--bg);border-color:var(--fg)}
.pill:hover::before{transform:translateY(0)}

/* titoli: la riga sale in una maschera mentre le lettere si decriptano */
.title{font-weight:300;line-height:.92;letter-spacing:-.055em}
.title .l{display:block;overflow:hidden;padding-bottom:.09em;margin-bottom:-.09em}
.title .l > span{display:block;transform:translateY(110%)}
.title .g{color:var(--mute)}
.title em{color:var(--fg);letter-spacing:-.02em}
.title.shown .l > span{transform:none}
.ch{display:inline-block;position:relative;transition:color .08s}
.ch.x{color:transparent!important}
.ch.x::after{content:attr(data-g);position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);font-family:var(--mono);font-size:.5em;font-style:normal;font-weight:400;letter-spacing:0;line-height:1;color:var(--dim)}
.wd{white-space:nowrap}
.rv{opacity:0;transform:translateY(14px);transition:opacity 1.1s var(--e-out),transform 1.2s var(--e-out)}
.rv.in{opacity:1;transform:none}
@media (hover:hover) and (pointer:fine){   /* su desktop i testi entrano anche a fuoco: un velo di sfocatura che si scioglie */
  .rv{filter:blur(5px);transition:opacity 1.1s var(--e-out),transform 1.2s var(--e-out),filter 1s var(--e-out)} .rv.in{filter:none}}
/* telefoni lenti (html.low, base.js): niente sfocature dietro gli elementi mentre si scorre */
html.low .p-hero .veil,html.low .tracks,html.safari .p-hero .veil,html.safari .tracks{-webkit-backdrop-filter:none;backdrop-filter:none}
html.low .p-hero .veil,html.safari .p-hero .veil{background:linear-gradient(0deg,rgba(0,0,0,.82) 0%,rgba(0,0,0,.6) 30%,rgba(0,0,0,.2) 62%,rgba(0,0,0,0) 100%)}
.sec-label{display:none}   /* niente capitoli numerati: Federico, 26/10 */
.sec-label b{color:var(--fg);font-weight:400;margin-right:8px}
.tag{font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);border:1px solid var(--hair);border-radius:99px;padding:3px 8px;vertical-align:middle}

/* segni a mano */
svg.hand{position:absolute;overflow:visible;pointer-events:none;z-index:1}
svg.hand path{vector-effect:non-scaling-stroke}
.hbtn{position:relative;display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg);padding:12px 22px}
.hbtn .arr{display:inline-block;transition:transform .6s var(--e-out)}
.hbtn{isolation:isolate}
.hbtn:hover .arr{transform:translateX(4px)}

/* cursore */
#cur{position:fixed;left:0;top:0;z-index:60;pointer-events:none;width:8px;height:8px;transform:translate(-50%,-50%);border:1px solid var(--fg);border-radius:99px;opacity:0;
  transition:width .5s var(--e-out),height .5s var(--e-out),opacity .4s,border-color .4s}
#cur span{text-shadow:0 0 12px rgba(0,0,0,.35);position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.9);font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:#fff;
  padding:7px 10px;white-space:nowrap;opacity:0;transition:opacity .3s,transform .5s var(--e-out);isolation:isolate}
#cur.view{width:0;height:0;border-color:transparent}
#cur.grab{width:16px;height:16px} #cur.grab.held{width:11px;height:11px;background:var(--fg)}   /* sulla mano: solo l'anello che cresce, pieno mentre la tiri */
#cur.view span{opacity:1;transform:translate(-50%,-50%)}
#cur.link{width:30px;height:30px}

/* striscia contatti in fondo alle pagine interne */
.endcta{padding:22vh var(--m) calc(var(--m) + 70px);position:relative}
.endcta h2{font-size:clamp(40px,7vw,132px)}
.endcta .mail{display:inline-block;margin-top:clamp(28px,3.4vw,52px);font-size:clamp(22px,2.8vw,44px);letter-spacing:-.035em;position:relative;padding-bottom:12px;font-weight:300}
.mail .arr{display:inline-block;margin-left:.3em;transition:transform .6s var(--e-out)}
.mail:hover .arr{transform:translate(.15em,-.15em)}
.foot{position:absolute;left:var(--m);right:var(--m);bottom:calc(var(--m) + 30px);display:grid;grid-template-columns:repeat(4,1fr);color:var(--dim)}

/* leggibili su tutto (27/10): angoli, didascalia, barra e cursore si invertono sopra le immagini, scure o chiare che siano.
   Colori già compensati per la differenza: sul fondo pieno restano identici a prima, sopra il nero diventano chiari */
.corner,#caption,#sbar,#cur:not(.view){mix-blend-mode:difference;--fg:#D8D6D1;--bg:#000;--mute:#7A7873;--dim:#45443F;--rule:rgba(216,214,209,.55);--hair:rgba(216,214,209,.3);--hand:#93A487}
:root[data-theme="light"] :is(.corner,#caption,#sbar,#cur:not(.view)){--hand:#816984;color:var(--fg)}   /* 28/10: i testi senza colore proprio ereditavano il nero del tema e la differenza li rendeva bianchi */
#sbar.on,#sbar:hover{mix-blend-mode:normal;--hand:var(--hand0)}
/* 28/10 Safari (Federico: "su Safari lagga tanto"): la differenza sopra il canvas WebGL obbliga Safari a ricomporre lo schermo a ogni fotogramma.
   Qui angoli, didascalia, barra e cursore hanno i colori normali del tema; niente sfocatura di entrata dei testi, niente sfocature dietro gli elementi */
html:root.safari :is(.corner,#caption,#sbar,#cur:not(.view)){mix-blend-mode:normal;--fg:inherit;--bg:inherit;--mute:inherit;--dim:inherit;--rule:inherit;--hair:inherit;--hand:var(--hand0)}
html.safari .rv,html.safari .rv.in{filter:none}
:root{--hand0:#A7B89A} :root[data-theme="light"]{--hand0:#6B8160}

/* menu su mobile */
#mbtn{display:none;align-items:center;gap:8px;border:1px solid var(--rule);border-radius:99px;padding:9px 14px 9px 16px;color:var(--fg)}
#mbtn .dot{width:5px;height:5px;border-radius:50%;background:currentColor}
#mnav{position:fixed;z-index:45;top:0;right:0;width:0;height:0;border-radius:99px;background:var(--fg);color:var(--bg);overflow:hidden;visibility:hidden;opacity:0;
  transition:top .9s var(--spring,var(--e-out)),right .9s var(--spring,var(--e-out)),width .9s var(--spring,var(--e-out)),height 1s var(--spring,var(--e-out)),border-radius .9s var(--e-out),opacity .2s .45s,visibility 0s .65s}
#mnav.vis{visibility:visible;opacity:1;transition:top .9s var(--spring,var(--e-out)),right .9s var(--spring,var(--e-out)),width .9s var(--spring,var(--e-out)),height 1s var(--spring,var(--e-out)),border-radius .9s var(--e-out),opacity .15s,visibility 0s}
#mnav.on{border-radius:18px}
#mnav.closing .mn-in{opacity:0;transition:opacity .14s ease-out}   /* in chiusura il contenuto se ne va per primo */
#mnav .mn-in{position:absolute;top:0;right:0;width:calc(100vw - 16px);height:calc(100dvh - 16px);display:flex;flex-direction:column;padding:12px 18px 22px 22px}
#mnav .mn-x{align-self:flex-end;display:flex;align-items:center;gap:12px;color:var(--bg);opacity:0;transition:opacity .3s}
#mnav .mn-x .x{width:38px;height:38px;border-radius:50%;background:var(--bg);position:relative;transform:rotate(0);transition:transform .8s var(--spring,var(--e-out))}
#mnav .mn-x .x::before,#mnav .mn-x .x::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.4px;background:var(--fg);transform:translate(-50%,-50%)}
#mnav .mn-x .x::after{transform:translate(-50%,-50%) rotate(90deg)}
#mnav.on .mn-x{opacity:1;transition-delay:.15s} #mnav.on .mn-x .x{transform:rotate(135deg)}   /* il + gira e atterra come × */
#mnav .mn-links{margin:auto 0;display:flex;flex-direction:column}
#mnav .mn-l{font-size:clamp(54px,17vw,92px);font-weight:300;letter-spacing:-.055em;line-height:.98;padding:.02em 0;width:max-content;position:relative;
  opacity:0;transform:translateY(.45em);transition:opacity .25s,transform .25s,padding-left .5s var(--spring,var(--e-out))}
#mnav .mn-l .w{position:relative;display:inline-block}
#mnav.on .mn-l{opacity:1;transform:none;transition:opacity .5s var(--e-out),transform .7s var(--e-out),padding-left .5s var(--spring,var(--e-out))}
#mnav.on .mn-l:nth-child(2){transition-delay:.07s} #mnav.on .mn-l:nth-child(3){transition-delay:.14s} #mnav.on .mn-l:nth-child(4){transition-delay:.21s}
#mnav.on .mn-l:first-child{transition-delay:0s}
#mnav .mn-l:active{padding-left:.18em}
#mnav .mn-l .ch.x::after{color:color-mix(in srgb,var(--bg) 55%,var(--fg))}
#mnav .mn-foot{display:flex;justify-content:space-between;gap:12px;opacity:0;transform:translateY(8px);transition:opacity .25s,transform .25s}
#mnav.on .mn-foot{opacity:1;transform:none;transition:opacity .5s .35s,transform .7s .35s var(--e-out)}
#mnav .mn-foot .mute{color:color-mix(in srgb,var(--bg) 60%,var(--fg))}
#mnav svg.hand{--hand:var(--bg)}
html.menu-open #sbar{opacity:0}

@media (max-width:760px){
  .c-tr{gap:14px} .c-tr a.link{display:none} #mbtn{display:inline-flex} #thm .lbl,#snd .lbl{display:none} .c-tl .mono{display:none}
  .foot{grid-template-columns:1fr 1fr;row-gap:6px}
}
@media (prefers-reduced-motion:reduce){
  .title .l > span{transform:none!important}
  .rv{opacity:1;transform:none;filter:none}
}

/* barra di scorrimento: quella di sistema sparisce, al suo posto un tratto di penna (base.js · scrollMark) */
html{scrollbar-width:none} html::-webkit-scrollbar{display:none}
#sbar{position:fixed;top:0;right:3px;width:14px;z-index:60;opacity:.45;transition:opacity .5s var(--e-out);cursor:grab;touch-action:none}
#sbar svg{position:absolute;inset:0 4px;width:6px;height:100%;overflow:visible}
#sbar path{fill:none;stroke:var(--rule);stroke-width:1.6;stroke-linecap:round;transition:stroke .3s var(--e-out)}
#sbar.on,#sbar:hover{opacity:1} #sbar.on path,#sbar:hover path{stroke:var(--hand)}
#sbar.drag{cursor:grabbing} #sbar.none{display:none} body.locked #sbar{display:none}   /* all'ingresso la pagina è ferma: niente barra */
@media (pointer:coarse){#sbar{pointer-events:none;right:1px}}

/* griglia di fondo (27/10): colonne tracciate a mano, fisse, dietro a tutto; 6 · 4 · 2 colonne secondo lo schermo */
@media (max-width:1024px){:root{--cols:4}}
@media (max-width:760px){:root{--cols:2}}
#grid{position:fixed;left:0;top:0;width:100vw;height:100vh;height:100lvh;z-index:0;pointer-events:none;overflow:visible}
#grid path{fill:none;stroke:var(--rule);stroke-width:.9;opacity:.36;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
#grid path.b{opacity:.42;stroke-width:1.15}
#grid path.pluck{stroke:var(--hand);opacity:.9;stroke-width:1.2}   /* la corda pizzicata (uova.js) */
.at{display:inline-block}

/* tra galleria e progetto: il fotogramma della pagina che lascia resta fermo finché la nuova non ha la stessa immagine, poi una dissolvenza invisibile */
@view-transition{navigation:auto}
::view-transition-old(root){animation:.22s ease both vtOut}
::view-transition-new(root){animation:.22s ease both vtIn}
html:active-view-transition-type(cover)::view-transition-old(root){animation:.75s linear both vtHold}
html:active-view-transition-type(cover)::view-transition-new(root){animation:.3s .4s ease both vtIn}
@keyframes vtHold{to{opacity:1}} @keyframes vtIn{from{opacity:0}} @keyframes vtOut{to{opacity:0}}