/* Flayris: stile comune a tutte le pagine */

:root{
  --notte:#050611;
  --abisso:#0E1234;
  --ciano:#39E5FD;
  --viola:#925AFE;
  --magenta:#D04BF0;
  --nebbia:#E9ECFA;
  --cenere:#8E94BC;
  --display:"Syne", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  --testo:"Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --margine:clamp(1.25rem, 5vw, 4.5rem);
  color-scheme:dark;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-behavior:auto;scroll-padding-top:calc(env(safe-area-inset-top,0px) + 5rem)}
body{margin:0;background:var(--notte);color:var(--nebbia);font-family:var(--testo);font-size:1.0625rem;line-height:1.6;overflow-x:hidden;position:relative}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--ciano);outline-offset:4px;border-radius:2px}

/* la linea del drago */
#drago{position:absolute;inset:0 0 auto 0;width:100%;pointer-events:none;z-index:0;overflow:hidden}
#drago path{fill:none;stroke:url(#scia);stroke-linecap:round}
#drago .principale{stroke-width:2;opacity:.5}
#drago .eco{stroke-width:1;opacity:.25}
#drago .eco.sottile{stroke-width:.7;opacity:.18}
#drago circle{fill:url(#scia);opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.2);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
#drago circle.acceso{opacity:.55;transform:scale(1)}
main,header,footer{position:relative;z-index:1}

/* testata */
header{position:sticky;top:env(safe-area-inset-top,0px);display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:1rem var(--margine);background:rgba(5,6,17,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);z-index:10}
.marchio{display:flex;align-items:center;gap:.6rem;text-decoration:none;font-family:var(--display);font-weight:700;font-size:1.25rem;letter-spacing:.01em}
.marchio img{width:30px;height:auto}
nav ul{display:flex;gap:clamp(.9rem,2.4vw,2rem);list-style:none;margin:0;padding:0}
nav a{text-decoration:none;color:var(--cenere);font-size:.95rem;transition:color .2s}
nav a:hover{color:var(--nebbia)}

html[data-lingua="it"] [data-l="en"],html[data-lingua="en"] [data-l="it"]{display:none}
.lingua{display:flex;gap:.2rem;border:1px solid rgba(142,148,188,.35);border-radius:999px;padding:.15rem}
.lingua button{font:600 .78rem/1 var(--testo);letter-spacing:.04em;color:var(--cenere);background:none;border:0;border-radius:999px;padding:.4rem .65rem;cursor:pointer}
.lingua button[aria-pressed="true"]{background:linear-gradient(120deg,var(--ciano),var(--viola));color:var(--notte)}
nav{margin-left:auto}
/* apertura */
.apertura{min-height:calc(100vh - 4.5rem);display:grid;grid-template-columns:1fr 1.25fr;align-items:center;gap:2rem;padding:2rem var(--margine) 4rem}
.apertura h1{font-family:var(--display);font-weight:800;font-size:clamp(4rem,13vw,11.5rem);line-height:.86;letter-spacing:-.035em;margin:0 0 2rem;
  background:linear-gradient(170deg,var(--ciano) 10%,var(--viola) 60%,var(--magenta) 95%);-webkit-background-clip:text;background-clip:text;color:transparent}
.apertura p{max-width:32ch;font-size:clamp(1.1rem,1.6vw,1.35rem);line-height:1.5;margin:0;color:var(--nebbia)}
.apertura p .tenue{color:var(--cenere)}
.logo-grande{justify-self:center;width:min(100%,400px);order:-1}
.logo-grande img{width:100%;filter:drop-shadow(0 0 60px rgba(146,90,254,.25))}

/* sezioni */
.sezioni{padding:2rem var(--margine) 6rem}
.sezione{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:clamp(1.5rem,4vw,4rem);align-items:center;padding:clamp(3rem,7vw,6rem) 0;text-decoration:none}
.sezione:nth-child(even){grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
.sezione:nth-child(even) .testo-sezione{order:2}
.testo-sezione h2{font-family:var(--display);font-weight:800;font-size:clamp(3rem,8vw,6.5rem);line-height:.9;letter-spacing:-.03em;margin:0 0 1rem;transition:color .3s}
.sezione:hover h2{color:var(--ciano)}
.testo-sezione p{margin:0 0 1rem;max-width:36ch;color:var(--cenere)}
.testo-sezione .conta{font-size:.95rem;color:var(--nebbia)}

/* i lavori che arrivano fluttuando */
.mucchio{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.6rem,1.5vw,1.2rem)}
.lavoro{margin:0;transition:transform 1.1s cubic-bezier(.2,.8,.2,1),opacity .9s ease;will-change:transform}
.lavoro .cornice{aspect-ratio:4/5;overflow:hidden;background:var(--abisso);border-radius:3px;position:relative;transition:transform .35s ease,box-shadow .35s ease}
.lavoro img{width:100%;height:100%;object-fit:cover}
.lavoro figcaption{font-size:.85rem;color:var(--cenere);margin-top:.55rem;line-height:1.35}
.sezione:hover .lavoro .cornice{box-shadow:0 0 0 1px rgba(57,229,253,.35)}
.lavoro:hover .cornice{transform:translateY(-6px);box-shadow:0 0 0 1px var(--ciano),0 14px 40px -12px rgba(146,90,254,.6)!important}
.lavoro:nth-child(2){margin-top:2.5rem}
.lavoro:nth-child(3){margin-top:1rem}
.sparso .lavoro{opacity:0}

/* chi c'è dietro il drago */
.dietro{padding:6rem var(--margine);display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(2rem,5vw,5rem);align-items:center}
.ritratto{position:relative;max-width:380px}
.ritratto img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:3px;background:var(--abisso)}
.ritratto::after{content:"";position:absolute;inset:14px -14px -14px 14px;border:1.5px solid var(--viola);border-radius:3px;z-index:-1}
.dietro h2,.origini h2,.contatti h2{font-family:var(--display);font-weight:700;font-size:clamp(2.2rem,5vw,3.8rem);line-height:1;letter-spacing:-.02em;margin:0 0 1.5rem}
.dietro p{max-width:58ch;margin:0 0 1.1rem}
.dietro .note{color:var(--cenere);font-size:.95rem}

/* le origini */
.origini{padding:4rem 0 6rem}
.origini .intro{padding:0 var(--margine);max-width:60ch}
.origini .intro p{color:var(--cenere);margin:0 0 2.5rem}
.frigo{display:flex;gap:clamp(1.5rem,3vw,2.5rem);overflow-x:auto;padding:2.5rem max(var(--margine),2.25rem) 3rem;scroll-padding-inline:max(var(--margine),2.25rem);scroll-snap-type:x proximity;scrollbar-color:var(--viola) transparent}
.frigo::after{content:"";flex:0 0 1px}
.disegnino.foto video{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--abisso);border-radius:2px;box-shadow:0 18px 40px -18px rgba(0,0,0,.8);display:block}
.disegnino{flex:0 0 clamp(200px,24vw,280px);margin:0;scroll-snap-align:start;transform:rotate(var(--r,0deg));transition:transform .4s ease}
.disegnino:hover{transform:rotate(0deg) scale(1.03)}
.disegnino img{width:100%;aspect-ratio:3/4;object-fit:cover;background:#f3efe6;border-radius:2px;box-shadow:0 18px 40px -18px rgba(0,0,0,.8)}
.disegnino.foto img{aspect-ratio:4/3}
.disegnino.foto{flex-basis:clamp(260px,32vw,380px)}
.disegnino figcaption{font-family:var(--display);font-weight:700;font-size:1.6rem;margin-top:.8rem}
.disegnino.foto figcaption{font-family:var(--testo);font-weight:400;font-size:1rem;color:var(--cenere)}

/* contatti */
.contatti{padding:6rem var(--margine) 4rem;text-align:left}
.contatti a.mail{font-family:var(--display);font-weight:700;font-size:clamp(1.6rem,4.5vw,3.2rem);text-decoration:none;background:linear-gradient(90deg,var(--ciano),var(--viola));-webkit-background-clip:text;background-clip:text;color:transparent;overflow-wrap:anywhere}
.contatti ul{list-style:none;padding:0;margin:2rem 0 0;display:flex;gap:1.5rem}
.contatti ul a{color:var(--cenere);text-decoration:none}
.contatti ul a:hover{color:var(--nebbia)}
footer{padding:2rem var(--margine);color:var(--cenere);font-size:.85rem}

@media (max-width:820px){
  header{flex-wrap:wrap;gap:.6rem}
  nav{width:100%;overflow-x:auto;order:3;margin-left:0}
  .lingua{margin-left:auto}
  nav ul{width:max-content}
  .apertura{grid-template-columns:1fr;min-height:auto;padding-top:3rem}
  .logo-grande{order:-1;width:min(60%,240px);justify-self:start}
  .sezione,.sezione:nth-child(even){grid-template-columns:1fr}
  .sezione:nth-child(even) .testo-sezione{order:0}
  .dietro{grid-template-columns:1fr}
  .ritratto{max-width:280px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .lavoro,.disegnino,.lavoro .cornice{transition:none!important}
  .sparso .lavoro{opacity:1;transform:none!important}
}

/* ===== pagine delle sezioni (Segno, Materia) ===== */
nav a[aria-current="page"]{color:var(--nebbia)}
nav a[aria-current="page"]::after{content:"";display:block;height:2px;margin-top:2px;background:linear-gradient(90deg,var(--ciano),var(--viola))}
.lavoro .cornice img{transition:opacity .4s}
.cornice img[data-rotta]{opacity:0}

.testa-pagina{padding:clamp(3rem,8vw,6rem) var(--margine) 2rem;display:grid;gap:1.25rem;max-width:1100px}
.briciole{font-size:.9rem;color:var(--cenere);margin:0}
.briciole a{text-decoration:none}
.briciole a:hover{color:var(--nebbia)}
.testa-pagina h1{font-family:var(--display);font-weight:800;font-size:clamp(3.5rem,11vw,9rem);line-height:.88;letter-spacing:-.035em;margin:0;
  background:linear-gradient(170deg,var(--ciano) 10%,var(--viola) 60%,var(--magenta) 95%);-webkit-background-clip:text;background-clip:text;color:transparent;justify-self:start}
.testa-pagina .intro{max-width:52ch;font-size:clamp(1.05rem,1.5vw,1.25rem);margin:0}
.cifre{display:flex;flex-wrap:wrap;gap:.4rem 1.6rem;margin:0;padding:0;list-style:none;color:var(--cenere);font-size:.95rem;font-variant-numeric:tabular-nums}
.cifre b{color:var(--nebbia);font-weight:600}

/* indice delle serie: etichette sparse che si allineano */
.indice{display:flex;flex-wrap:wrap;gap:.55rem;padding:1rem var(--margine) 2rem;margin:0;list-style:none}
.indice a{display:inline-flex;align-items:baseline;gap:.45rem;text-decoration:none;font-size:.9rem;padding:.42rem .85rem;border:1px solid rgba(142,148,188,.3);border-radius:999px;color:var(--cenere);transition:color .2s,border-color .2s,transform .3s}
.indice li:nth-child(3n+1) a{transform:rotate(-1.2deg)}
.indice li:nth-child(3n+2) a{transform:rotate(.9deg)}
.indice a:hover{color:var(--nebbia);border-color:var(--ciano);transform:none}
.indice small{font-size:.75rem;opacity:.75;font-variant-numeric:tabular-nums}

/* una serie: testo a sinistra che resta fermo, lavori a destra */
.serie{display:grid;grid-template-columns:minmax(0,17rem) minmax(0,1fr);gap:clamp(1.5rem,4vw,4rem);padding:clamp(2.5rem,6vw,5rem) var(--margine);align-items:start}
.serie-testo{position:sticky;top:calc(env(safe-area-inset-top,0px) + 6rem);display:grid;gap:.6rem;min-width:0}
.serie-testo h2{font-family:var(--display);font-weight:700;font-size:clamp(1.9rem,3.6vw,2.9rem);line-height:1;letter-spacing:-.02em;margin:0;text-wrap:balance}
.serie-testo p{margin:0;color:var(--cenere);font-size:.95rem}
.serie-testo .anno{font-family:var(--display);font-weight:700;color:var(--ciano);font-size:1rem;letter-spacing:.04em}

.muro{columns:3 9.5rem;column-gap:clamp(.8rem,1.6vw,1.4rem)}
.muro .lavoro{break-inside:avoid;margin:0 0 clamp(1rem,2vw,1.6rem)}
.muro .cornice,.singoli .cornice{aspect-ratio:auto}
.muro .cornice img,.singoli .cornice img{height:auto}
.lavoro button{all:unset;display:block;width:100%;cursor:zoom-in;border-radius:3px}
.lavoro button:focus-visible{outline:2px solid var(--ciano);outline-offset:4px}

/* opere singole, una accanto all'altra */
.singoli{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));gap:clamp(1.5rem,4vw,3.5rem);padding:clamp(2.5rem,6vw,5rem) var(--margine);align-items:start}
.singoli .lavoro:nth-child(2){margin-top:3rem}
.singoli .lavoro:nth-child(3){margin-top:1.2rem}
.singoli figcaption{display:grid;gap:.15rem;margin-top:.8rem}
.singoli figcaption strong{font-family:var(--display);font-weight:700;font-size:1.35rem;color:var(--nebbia);line-height:1.1}

/* la prossima sezione */
.prossima{display:block;padding:clamp(4rem,9vw,7rem) var(--margine);text-decoration:none;border-top:1px solid rgba(142,148,188,.18)}
.prossima span{display:block;color:var(--cenere);font-size:.95rem;margin-bottom:.4rem}
.prossima strong{font-family:var(--display);font-weight:800;font-size:clamp(3rem,9vw,7rem);line-height:.9;letter-spacing:-.03em;transition:color .3s}
.prossima:hover strong{color:var(--ciano)}

/* la lente: un lavoro alla volta, a schermo intero */
.lente{border:0;padding:0;margin:0;max-width:none;max-height:none;width:100%;height:100%;background:rgba(5,6,17,.95);color:var(--nebbia)}
.lente::backdrop{background:rgba(5,6,17,.6)}
.lente[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto}
.lente-barra{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:calc(env(safe-area-inset-top,0px) + .9rem) var(--margine) .9rem;font-size:.9rem;color:var(--cenere);font-variant-numeric:tabular-nums}
.lente figure{margin:0;display:grid;place-items:center;min-height:0;padding:0 clamp(3.5rem,8vw,6rem)}
.lente img{max-width:100%;max-height:100%;object-fit:contain;border-radius:2px}
.lente-dida{padding:.9rem var(--margine) calc(env(safe-area-inset-bottom,0px) + 1.2rem);text-align:center}
.lente-dida strong{font-family:var(--display);font-weight:700;font-size:1.2rem}
.lente-dida span{color:var(--cenere)}
.lente button{font:600 .9rem/1 var(--testo);color:var(--nebbia);background:rgba(14,18,52,.8);border:1px solid rgba(142,148,188,.35);border-radius:999px;padding:.6rem 1rem;cursor:pointer}
.lente button:hover{border-color:var(--ciano)}
.lente .freccia{position:absolute;top:50%;transform:translateY(-50%);width:2.8rem;height:2.8rem;padding:0;font-size:1.2rem}
.lente .freccia.prima{left:max(.6rem,calc(var(--margine) - 1.4rem))}
.lente .freccia.dopo{right:max(.6rem,calc(var(--margine) - 1.4rem))}

@media (max-width:820px){
  .serie{grid-template-columns:1fr}
  .serie-testo{position:static}
  .singoli .lavoro:nth-child(n){margin-top:0}
  .lente figure{padding:0 .75rem}
  .lente .freccia{top:auto;bottom:calc(env(safe-area-inset-bottom,0px) + 1rem);transform:none}
}
.muro .lavoro:nth-child(n){margin-top:0}
.lavoro button .cornice{display:block}
.lente{background:rgba(5,6,17,.97);position:fixed;inset:0;height:100dvh}
.lente figure{overflow:hidden}
.lente img{width:auto;height:auto;max-height:calc(100dvh - 10rem)}

/* Pixel e Luce */
.vai{justify-self:start;display:inline-block;margin-top:.4rem;padding:.5rem .95rem;border-radius:999px;text-decoration:none;font-weight:600;font-size:.9rem;color:var(--notte);background:linear-gradient(120deg,var(--ciano),var(--viola))}
.vai:hover{filter:brightness(1.1)}
.video-lavoro video{width:100%;max-width:960px;border-radius:3px;background:var(--abisso);display:block}
.divisore-anno{font-family:var(--display);font-weight:800;font-size:clamp(4rem,12vw,10rem);line-height:.85;letter-spacing:-.04em;margin:clamp(3rem,7vw,6rem) var(--margine) 0;color:transparent;-webkit-text-stroke:1.5px var(--viola);opacity:.85}
.muro .cornice img{max-height:none}