/* ============================================================
   LUCA.MAINARDI — Cosmic (v2)
   Spazio continuo in WebGL dietro la pagina (space.js), pianeti
   completi e fluidi, vetro liquido per menu e card, grana retrò.
   ============================================================ */

:root{
  --space:#050508;
  --warm:#f4f1ea;
  --text:#cbc8d6;
  --text-glass:#e2e0ea;
  --label:#a3a1af;
  --chip:#d2cfdb;
  --ink:#0a0710;
  --line:rgba(255,255,255,.08);
  --line-2:rgba(255,255,255,.18);
  --hot:#ffb35c;

  --ff-display:'Unbounded',sans-serif;
  --ff-body:'Manrope',system-ui,sans-serif;
  --ff-mono:'JetBrains Mono',ui-monospace,monospace;
  --maxw:1280px;
  --pad:clamp(16px,4vw,56px);
  --ease:cubic-bezier(.2,.7,.1,1);
  --ease-liquid:cubic-bezier(.5,1.45,.45,1);
  --grain:.42;
}

/* ============================================================
   BASE
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--space)}
body{margin:0;background:transparent;color:var(--warm);font-family:var(--ff-body);overflow-x:hidden;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img,svg{display:block;max-width:100%}
a{color:var(--warm)}
a:hover{color:var(--hot)}
:focus-visible{outline:2px solid var(--hot);outline-offset:3px;border-radius:10px}
.skip-link{position:fixed;left:16px;top:-80px;z-index:300;padding:14px 20px;border-radius:999px;
  background:var(--warm);color:var(--ink);font:700 14px/1 var(--ff-body);text-decoration:none}
.skip-link:focus{top:84px}

.wrap{max-width:var(--maxw);margin:0 auto}
.section{position:relative;padding:130px var(--pad)}
.sec-head{display:flex;flex-direction:column;gap:20px;max-width:760px}
.disc .sec-head{align-items:center;text-align:center;margin:0 auto;max-width:none}
/* titolo delle Discipline su una sola riga (sotto i 700px può andare a capo) */
.disc .sec-head .h2{font-size:clamp(26px,4.6vw,56px);white-space:nowrap}
.label{margin:0;font:500 12px/1.4 var(--ff-mono);letter-spacing:.32em;text-transform:uppercase;color:var(--label)}
.h2{margin:0;font:700 clamp(32px,4.4vw,56px)/1.08 var(--ff-display);letter-spacing:-.02em;color:#fff}
.body{margin:0;font:400 18px/1.65 var(--ff-body);color:var(--text)}
.body strong{color:#fff}
.tag{padding:9px 14px;border-radius:999px;border:1px solid var(--line-2);background:rgba(255,255,255,.04);
  font:500 11px/1 var(--ff-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--chip)}

/* ============================================================
   SPAZIO (canvas WebGL fisso) + GRANA SU TUTTO LO SFONDO
   ============================================================ */
.space{position:fixed;inset:0;width:100%;height:100%;z-index:-2;display:block;background:var(--space)}
.grain{position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:url(assets/tex/grain.png) 0 0/320px 320px;mix-blend-mode:overlay;opacity:var(--grain);
  animation:lm-grain .9s steps(1,end) infinite}
.grain--screen{position:fixed;z-index:-1;border-radius:0;opacity:.5}
/* crocini di registro agli angoli dei box (come segni di taglio) */
.ticks{position:absolute;inset:-7px;pointer-events:none;--tk:rgba(255,255,255,.75);
  background:
    linear-gradient(var(--tk),var(--tk)) left 0 top 6px/13px 1px no-repeat,
    linear-gradient(var(--tk),var(--tk)) left 6px top 0/1px 13px no-repeat,
    linear-gradient(var(--tk),var(--tk)) right 0 top 6px/13px 1px no-repeat,
    linear-gradient(var(--tk),var(--tk)) right 6px top 0/1px 13px no-repeat,
    linear-gradient(var(--tk),var(--tk)) left 0 bottom 6px/13px 1px no-repeat,
    linear-gradient(var(--tk),var(--tk)) left 6px bottom 0/1px 13px no-repeat,
    linear-gradient(var(--tk),var(--tk)) right 0 bottom 6px/13px 1px no-repeat,
    linear-gradient(var(--tk),var(--tk)) right 6px bottom 0/1px 13px no-repeat}

/* ============================================================
   HUD — mirino da videocamera
   ============================================================ */
.hud{position:fixed;inset:0;z-index:40;pointer-events:none}
.reg{position:absolute;width:6px;height:6px;background:var(--warm);box-shadow:0 0 10px rgba(255,255,255,.8)}
/* in alto i crocini li fanno già i box del menu */
.reg--tl,.reg--tr{display:none}
.reg--bl{bottom:18px;left:18px}.reg--br{bottom:18px;right:18px}
.hud__tc,.hud__sec{position:absolute;bottom:14px;font:500 11px/1 var(--ff-mono);letter-spacing:.2em;
  text-transform:uppercase;color:var(--label)}
.hud__tc{left:38px}
.hud__tc::before{content:"";display:inline-block;width:7px;height:7px;margin-right:10px;border-radius:50%;vertical-align:1px;
  background:#ff3355;box-shadow:0 0 8px #ff3355;animation:lm-blink 1.2s steps(1,end) infinite}
.hud__sec{right:38px}

/* ============================================================
   VETRO LIQUIDO — sfocatura, riflessi, bordo luminoso
   ============================================================ */
.glass{position:relative;isolation:isolate;
  background:
    linear-gradient(135deg,rgba(255,255,255,.13),rgba(255,255,255,.03) 38%,rgba(255,255,255,.015) 62%,rgba(255,255,255,.07)),
    rgba(12,12,20,.58);
  -webkit-backdrop-filter:blur(22px) saturate(170%);backdrop-filter:blur(22px) saturate(170%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.4),
    inset 0 -1px 0 rgba(255,255,255,.06),
    inset 0 0 30px rgba(255,255,255,.04),
    0 30px 70px -24px rgba(0,0,0,.7)}
/* riflesso che segue il puntatore (cosmic.js aggiorna --mx/--my) */
.glass::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:radial-gradient(520px circle at var(--mx,25%) var(--my,0%),rgba(255,255,255,.14),transparent 45%)}
/* bagliore che attraversa il vetro ogni tanto */
.glass::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.13) 46%,rgba(255,255,255,.03) 50%,transparent 57%);
  background-size:260% 100%;background-repeat:no-repeat;animation:lm-glint 9s ease-in-out infinite}
/* ============================================================
   CURSORE — stella luminosa con scia (cosmic.js). Il cursore di sistema
   sparisce solo quando lo script è partito (classe .has-star su <html>)
   ============================================================ */
.star-cursor{position:fixed;inset:0;width:100%;height:100%;z-index:9999;pointer-events:none}
.has-star,.has-star *{cursor:none !important}

/* bordo che rifrange: luce in alto a sinistra e in basso a destra */
.rim{position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(135deg,rgba(255,255,255,.6),rgba(255,255,255,.08) 32%,rgba(255,255,255,.02) 62%,rgba(255,255,255,.4));
  -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)}

/* ============================================================
   SFUMATURE FLUIDE — tre macchie di colore che si muovono
   ognuna per conto suo dentro la forma (come nel video)
   ============================================================ */
.fluid{
  background:
    radial-gradient(60% 140% at 15% 50%,var(--c1),transparent 70%),
    radial-gradient(55% 140% at 85% 50%,var(--c2),transparent 70%),
    radial-gradient(80% 160% at 50% 50%,var(--c3),transparent 75%),
    var(--c0);
  background-size:180% 180%,200% 200%,160% 160%,100% 100%;
  animation:lm-fluid 9s ease-in-out infinite alternate}
.fluid--fire{--c0:#ff9a50;--c1:#ff6a3d;--c2:#ffe2b8;--c3:#ffb35c}
.fluid--electric{--c0:#3b2bf0;--c1:#2a1fe0;--c2:#7558ff;--c3:#5a3bff}
.fluid--frost{--c0:#d8f8ee;--c1:#f3fff9;--c2:#8fdcc8;--c3:#bdf2df}
.fluid--cold{--c0:#1f3bd1;--c1:#0d1a6b;--c2:#2f63f0;--c3:#1530a8}
.fluid--lime{--c0:#8ff27a;--c1:#b6ff8a;--c2:#52d4a0;--c3:#7cf26a}
.fluid--coral{--c0:#ff5a64;--c1:#ff3355;--c2:#ff8a74;--c3:#ff6d6a}
.fluid--cosmic{--c0:#7b5cff;--c1:#ffd9c2;--c2:#ff3f73;--c3:#3b30ff}
.fluid--dev{--c0:#6a7dff;--c1:#7cf26a;--c2:#f2fff7;--c3:#3a2bff}
.fluid--qstage{--c0:#4a35ff;--c1:#ff7a8a;--c2:#ffd0b0;--c3:#1d17a8}
.fluid--electric-lite{--c0:#9b7dff;--c1:#e4dcff;--c2:#7558ff;--c3:#c9b8ff}

.grad-text{-webkit-background-clip:text;background-clip:text;color:transparent}
.grad-text.fluid{-webkit-background-clip:text;background-clip:text}

.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;min-height:56px;padding:0 30px;border-radius:999px;
  color:var(--ink);text-decoration:none;font:700 16px/1 var(--ff-body);
  box-shadow:0 0 32px rgba(255,120,60,.5),inset 0 1px 0 rgba(255,255,255,.5);
  transition:transform .4s var(--ease-liquid),box-shadow .3s}
.btn:hover{color:var(--ink);transform:translateY(-2px) scale(1.03);box-shadow:0 0 52px rgba(255,120,60,.75),inset 0 1px 0 rgba(255,255,255,.5)}
.btn .grain{opacity:.35}
.link-mono{display:inline-flex;align-items:center;min-height:44px;font:500 12px/1 var(--ff-mono);
  letter-spacing:.22em;text-transform:uppercase;color:var(--warm)}

/* ============================================================
   MENU FLOATING
   ============================================================ */
/* due box di vetro separati: logo a sinistra, voci a destra */
.fnav{position:fixed;top:14px;left:0;right:0;z-index:50;display:flex;justify-content:space-between;align-items:flex-start;
  gap:12px;padding:0 28px;pointer-events:none}
.fnav__logo,.fnav__menu,.fnav__toggle{pointer-events:auto}
.fnav__logo{display:inline-flex;align-items:baseline;height:56px;padding:6px 22px 6px 16px;border-radius:999px;
  text-decoration:none;color:var(--warm);white-space:nowrap}
/* Doggo piccolo e bianco, legato alla scritta */
.fnav__dog{align-self:center;width:auto;height:26px;margin-right:9px;
  filter:invert(1) drop-shadow(0 0 6px rgba(255,255,255,.45));transition:transform .5s var(--ease-liquid)}
.fnav__logo:hover .fnav__dog{transform:rotate(-8deg) scale(1.08)}
.fnav__logo:hover{color:var(--warm)}
.fnav__logo b{font:700 15px/44px var(--ff-display);letter-spacing:-.01em}
.fnav__logo span{font:500 11px/44px var(--ff-mono);letter-spacing:.08em;color:var(--hot)}
.fnav__menu{display:flex;align-items:center;gap:12px;padding:6px 6px 6px 10px;border-radius:999px}
.fnav__links{position:relative;display:flex;align-items:center}
.fnav__links a{position:relative;z-index:1;display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:999px;
  text-decoration:none;font:500 11px/1 var(--ff-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--chip);
  transition:color .3s}
.fnav__links a:hover,.fnav__links a[aria-current="true"]{color:#fff}
/* indicatore "liquido": scivola sotto la voce attiva con un piccolo rimbalzo */
.fnav__ind{position:absolute;left:0;top:50%;width:0;height:36px;margin-top:-18px;border-radius:999px;opacity:0;
  --c0:#3a2bd0;--c1:#2a1fe0;--c2:#5a3bff;--c3:#4630ef;
  box-shadow:0 0 18px rgba(110,80,255,.55),inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .65s var(--ease-liquid),width .65s var(--ease-liquid),opacity .3s}
.fnav__cta{display:inline-flex;align-items:center;min-height:44px;padding:0 20px;border-radius:999px;background:var(--warm);
  color:var(--ink);text-decoration:none;font:700 14px/1 var(--ff-body);box-shadow:0 0 22px rgba(255,255,255,.3);
  transition:box-shadow .3s,transform .4s var(--ease-liquid)}
.fnav__cta:hover{color:var(--ink);transform:scale(1.04);box-shadow:0 0 40px rgba(255,255,255,.55)}
.fnav__toggle{display:none;align-items:center;justify-content:center;width:56px;height:56px;padding:0;border:0;border-radius:50%;
  color:#fff;cursor:pointer}
.fnav__toggle svg path{transition:d .3s}
.fnav.is-open .fnav__toggle svg path{d:path("M5 5l10 10M5 15L15 5")}

/* ============================================================
   HERO
   ============================================================ */
/* hero: testo a sinistra, pianeta grande a destra (lo tagliano il bordo destro e quello in alto, mai quello sotto) */
.hero{--D:min(122vh,1280px);position:relative;overflow-x:clip;min-height:100vh;min-height:100svh;
  display:flex;align-items:center;padding:110px var(--pad) 90px}
@supports (height:100svh){.hero{--D:min(122svh,1280px)}}
.hero__planet{position:absolute;inset:0;pointer-events:none}
.hero__text{position:relative;width:100%;max-width:var(--maxw);margin:0 auto;display:flex;flex-direction:column;
  align-items:flex-start;gap:24px}
/* scritte bianche con la grana dentro: la texture in overlay su un bianco appena lavanda (vale anche per "Parliamone.") */
.hero-title,.hero-roles{color:transparent;
  background:url(assets/tex/grain.png) 0 0/320px 320px,linear-gradient(180deg,#f3efff 0%,#d2c8f7 100%);
  background-blend-mode:overlay,normal;-webkit-background-clip:text;background-clip:text}
.hero-title{margin:0;font:800 clamp(44px,6.4vw,104px)/.95 var(--ff-display);letter-spacing:-.02em;text-transform:uppercase;
  filter:drop-shadow(0 0 14px rgba(255,255,255,.4)) drop-shadow(0 0 50px rgba(120,100,255,.45));
  animation:lm-focus-glow 1.8s var(--ease) .4s both,lm-grain-text .9s steps(1,end) infinite}
.hero-title span{display:block}
.hero-roles{margin:0;font:500 clamp(18px,2vw,24px)/1.3 var(--ff-display)}
.hero-roles.in-fade{animation:lm-fade 1.2s var(--ease) both,lm-grain-text .9s steps(1,end) infinite;animation-delay:var(--d,0s),0s}
.hero-roles .s1{color:#ff7a55}
.hero-roles .s2{color:#9b7dff}
.hero-sub{margin:0;max-width:34ch;font:400 18px/1.6 var(--ff-body);color:var(--text)}
.hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:6px}
.in-fade{animation:lm-fade 1.2s var(--ease) both;animation-delay:var(--d,0s)}

/* segnaposto dei pianeti: vuoti, li disegna space.js (le trasformazioni CSS vengono seguite) */
.planet{position:relative;aspect-ratio:1;border-radius:50%}
.planet--hero{position:absolute;width:var(--D);left:calc(100% - var(--D) * .6);bottom:max(28px,4vh);animation:lm-planet-in 2.4s var(--ease) both,lm-bob 9s ease-in-out 2.4s infinite alternate}
.planet--refs{position:absolute;width:var(--D);left:calc(var(--D) * -.4);top:calc(50% - var(--D) / 2);
  animation:lm-bob 11s ease-in-out -3s infinite alternate}
.planet--contact{width:min(70vw,380px);animation:lm-bob 10s ease-in-out -5s infinite alternate}


/* ============================================================
   CHI SONO — pianeta con gli anelli grande e intero a sinistra (come le Referenze),
   foto e testo nella colonna di destra. Gli anelli escono di circa 1,05 diametri per lato:
   la loro parte destra passa dietro la foto.
   ============================================================ */
.about{--D:min(26vw,400px);position:relative;overflow-x:clip;padding:130px var(--pad);
  min-height:min(100vh,1000px);display:flex;align-items:center}
.about-planet{position:absolute;inset:0;pointer-events:none}
.planet--about{position:absolute;width:var(--D);left:calc(27% - var(--D) / 2);top:calc(50% - var(--D) / 2);
  animation:lm-bob 9s ease-in-out -2s infinite alternate}
.about-grid{position:relative;width:100%;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  column-gap:72px;row-gap:44px}
.about-photo,.about-text{grid-column:2}
.about-photo{position:relative;min-width:0;max-width:680px}
.ring-glow{position:absolute;inset:-12px;overflow:hidden;border-radius:40px;filter:blur(30px);opacity:.75}
.ring-spin{position:absolute;left:50%;top:50%;width:1000px;height:1000px;margin:-500px 0 0 -500px;
  background:conic-gradient(from 0deg,#ffb340,#ff5a1e,#ff3f73,#7b5cff,#3b30ff,#2fd1a0,#ffb340);
  animation:lm-spin 9s linear infinite;will-change:transform}
.photo-frame{position:relative;overflow:hidden;border-radius:30px;padding:3px}
.photo-frame img{position:relative;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;border-radius:27px}
.photo-frame .grain{inset:3px;border-radius:27px;opacity:.6}
.about-text{min-width:0;display:flex;flex-direction:column;gap:24px}
.about-text .h2{font-size:clamp(36px,5vw,64px);line-height:1.05}
.about-text .body{font-size:19px}

/* ============================================================
   DISCIPLINE — card di vetro
   ============================================================ */
.disc{overflow-x:clip}
.disc-inner,.projects-inner{position:relative;display:flex;flex-direction:column;gap:56px}
.cards{display:flex;flex-wrap:wrap;gap:24px}
.card{flex:1 1 320px;min-width:0;display:flex;flex-direction:column;gap:22px;padding:36px 32px;border-radius:30px;
  transition:transform .6s var(--ease-liquid)}
.card:hover{transform:translateY(-6px)}
.card--graphic{--n0:#4a35ff;--n1:#e4dcff;--n2:#8f6dff;--n3:#2c22e6;--dot:linear-gradient(90deg,#4a35ff,#8f6dff);--dot-glow:rgba(110,80,255,.8)}
.card--content{--n0:#ff5a1e;--n1:#fff0d6;--n2:#ffb340;--n3:#ff2e4d;--dot:linear-gradient(90deg,#ff5a1e,#ffb340);--dot-glow:rgba(255,110,40,.8);--delay:-3s}
.card--video{--n0:#2fd1a0;--n1:#e8fff0;--n2:#7cf26a;--n3:#2f6bff;--dot:linear-gradient(90deg,#7cf26a,#2f6bff);--dot-glow:rgba(90,200,140,.8);--delay:-6s}
.num{position:relative;height:140px}
/* numeri: stessa sfumatura fluida, ritagliata sulle cifre, con la grana come livello di sfondo */
.num__glow,.num__txt{font:800 140px/1 var(--ff-display);letter-spacing:-.04em;color:transparent;
  -webkit-background-clip:text;background-clip:text}
.num__glow{position:absolute;left:0;top:0;filter:blur(22px);opacity:.8;
  background:
    radial-gradient(60% 140% at 15% 50%,var(--n1),transparent 70%),
    radial-gradient(55% 140% at 85% 50%,var(--n2),transparent 70%),
    radial-gradient(80% 160% at 50% 50%,var(--n3),transparent 75%),var(--n0);
  background-size:180% 180%,200% 200%,160% 160%,100% 100%;-webkit-background-clip:text;background-clip:text;
  animation:lm-fluid 9s ease-in-out infinite alternate;animation-delay:var(--delay,0s)}
.num__txt{position:relative;
  background:
    url(assets/tex/grain.png),
    radial-gradient(60% 140% at 15% 50%,var(--n1),transparent 70%),
    radial-gradient(55% 140% at 85% 50%,var(--n2),transparent 70%),
    radial-gradient(80% 160% at 50% 50%,var(--n3),transparent 75%),var(--n0);
  background-size:320px 320px,180% 180%,200% 200%,160% 160%,100% 100%;
  background-blend-mode:overlay,normal,normal,normal,normal;-webkit-background-clip:text;background-clip:text;
  animation:lm-fluid-g 9s ease-in-out infinite alternate;animation-delay:var(--delay,0s)}
.card-kicker{display:flex;align-items:center;gap:12px;padding-top:20px;border-top:1px solid rgba(255,255,255,.12)}
.card-kicker i{width:36px;height:8px;border-radius:999px;background:var(--dot);box-shadow:0 0 14px var(--dot-glow)}
.card-kicker span{font:500 12px/1 var(--ff-mono);letter-spacing:.32em;text-transform:uppercase;color:#cfccd9}
.card h3{margin:0;font:700 30px/1.1 var(--ff-display);color:#fff}
.card p{margin:0;font:400 16px/1.65 var(--ff-body);color:var(--text-glass)}
.card p strong{color:#fff}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto}

/* ============================================================
   REFERENZE — pianeta grande a sinistra (specchio dell'hero), contenuti a destra
   ============================================================ */
.refs{--D:min(104vh,1040px);overflow-x:clip;min-height:min(100vh,1000px);display:flex;align-items:center}
.refs-planet{position:absolute;inset:0;pointer-events:none}
.refs-grid{position:relative;width:100%;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  column-gap:72px;row-gap:48px}
.refs-text,.pills{grid-column:2}
.refs-text{min-width:0;display:flex;flex-direction:column;gap:22px}
.pills{min-width:0;margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:18px 14px}
.pill{position:relative;overflow:hidden;display:flex;align-items:center;height:54px;padding:0 var(--tail,26px) 0 26px;
  border-radius:999px;color:var(--ink);font:500 13px/1 var(--ff-mono);letter-spacing:.18em;text-transform:uppercase;
  box-shadow:0 0 28px color-mix(in srgb,var(--c3) 45%,transparent),inset 0 1px 0 rgba(255,255,255,.45);
  transition:transform .5s var(--ease-liquid),box-shadow .4s}
.pill:hover{transform:translateY(-3px) scale(1.04);box-shadow:0 0 48px color-mix(in srgb,var(--c3) 65%,transparent),inset 0 1px 0 rgba(255,255,255,.45)}
.pill.fluid--electric,.pill.fluid--cold{color:#fff}

/* ============================================================
   ALTRI PROGETTI — card di vetro
   ============================================================ */
.projects-inner{gap:48px}
.proj-grid{display:flex;flex-wrap:wrap;gap:24px}
.proj{flex:1 1 380px;min-width:0;display:flex;flex-direction:column;gap:18px;padding:18px 18px 30px;border-radius:34px;
  text-decoration:none;color:var(--warm);transition:transform .6s var(--ease-liquid)}
.proj:hover{color:var(--warm);transform:translateY(-6px)}
.screen{position:relative;overflow:hidden;height:230px;border-radius:24px;box-shadow:0 0 40px color-mix(in srgb,var(--c3) 40%,transparent);
  transition:box-shadow .5s}
.proj:hover .screen{box-shadow:0 0 70px color-mix(in srgb,var(--c3) 60%,transparent)}
.screen .plus{position:absolute;left:24px;top:24px;animation:lm-spin 26s linear infinite}
.screen .glyph{position:absolute;right:26px;bottom:18px;font:500 64px/1 var(--ff-mono);color:var(--ink)}
.screen .play{position:absolute;right:30px;bottom:26px}
.proj-body{display:flex;flex-direction:column;gap:12px;margin:0 12px;padding-top:18px;border-top:1px solid rgba(255,255,255,.12)}
.proj-tag{font:500 12px/1 var(--ff-mono);letter-spacing:.32em;text-transform:uppercase;color:#cfccd9}
.proj-name{font:700 clamp(21px,6vw,30px)/1.1 var(--ff-display);color:#fff;overflow-wrap:anywhere}
.o--dev{color:#7cf26a}
.o--qstage{color:#b89bff}
.proj-desc{font:400 17px/1.6 var(--ff-body);color:var(--text-glass)}
.proj-go{font:500 12px/1 var(--ff-mono);letter-spacing:.22em;text-transform:uppercase;color:var(--warm)}

/* ============================================================
   CONTATTI — il secondo pianeta, con Doggo che dorme
   ============================================================ */
.contact{position:relative;overflow-x:clip;padding:150px var(--pad) 70px}
.contact-inner{display:flex;flex-direction:column;align-items:center;gap:30px;text-align:center}
.talk{position:relative}
.talk__smear,.talk__h{font:800 clamp(44px,7.6vw,116px)/1 var(--ff-display);letter-spacing:-.03em}
.talk__smear{position:absolute;inset:0;color:#7b5cff;filter:blur(26px);transform:scaleX(1.2);
  animation:lm-smear 4.5s ease-in-out infinite alternate}
/* lettere con la grana dentro (overlay su un bianco appena lavanda) + grana anche sull'alone attorno */
.talk__h{position:relative;margin:0;color:transparent;
  background:url(assets/tex/grain.png) 0 0/320px 320px,linear-gradient(180deg,#f3efff 0%,#d2c8f7 100%);
  background-blend-mode:overlay,normal;-webkit-background-clip:text;background-clip:text;
  filter:drop-shadow(0 0 14px rgba(255,255,255,.4)) drop-shadow(0 0 50px rgba(120,100,255,.45));
  animation:lm-grain-text .9s steps(1,end) infinite}
.talk .grain{inset:-60px -80px}
.contact-note{margin:0;max-width:46ch;font:400 17px/1.6 var(--ff-body);color:var(--text)}
.contact-planet{margin-bottom:30px}
/* astronave di Doggo: immagine generata, in JPG leggero + maschera di trasparenza (ship-alpha.png),
   composte in un canvas da cosmic.js (una maschera CSS con url() sparisce se il file si apre dal disco).
   Oblò e motori sono misurati sull'immagine e posizionati in % della sua larghezza/altezza */
.ship-spot{margin-top:60px}
.ship{position:relative;display:block;width:min(86vw,600px);padding:0;border:0;background:none;cursor:pointer;border-radius:30px;
  animation:lm-ship 7s ease-in-out infinite alternate}
.ship__body{display:block;filter:drop-shadow(0 0 22px rgba(120,100,255,.35)) drop-shadow(0 18px 30px rgba(0,0,0,.6));transition:filter .4s}
.ship:hover .ship__body{filter:drop-shadow(0 0 30px rgba(255,140,90,.5)) drop-shadow(0 18px 30px rgba(0,0,0,.6))}
.ship__img{display:block;width:100%;height:auto}
.ship:focus-visible{outline-offset:10px}
/* oblò: Doggo dorme sul cuscino, dietro un vetro con riflesso e ombra interna */
.ship__window{position:absolute;left:26.7%;top:28.1%;width:19.7%;height:31.2%;border-radius:50%;overflow:hidden;
  box-shadow:inset 0 0 24px rgba(0,0,0,.55),inset 0 0 6px rgba(255,170,90,.5)}
.ship__dog{position:absolute;left:4%;top:40.5%;width:76%;height:auto;transform-origin:50% 100%;
  filter:drop-shadow(0 0 1px rgba(255,190,120,.7));animation:lm-breath 3.2s ease-in-out infinite}
.ship__glass{position:absolute;inset:0;border-radius:50%;
  background:
    radial-gradient(ellipse 60% 45% at 30% 22%,rgba(255,255,255,.32),rgba(255,255,255,0) 60%),
    radial-gradient(ellipse 80% 80% at 70% 85%,rgba(255,150,80,.18),rgba(255,150,80,0) 70%)}
/* motori: un bagliore che tremola sopra quello dell'immagine */
.ship__engine{position:absolute;width:15%;aspect-ratio:1;margin:-7.5% 0 0 -7.5%;border-radius:50%;mix-blend-mode:screen;pointer-events:none;
  background:radial-gradient(closest-side,rgba(205,195,255,.9),rgba(110,90,255,.55) 40%,rgba(60,90,255,0) 100%);
  animation:lm-engine .18s steps(2,end) infinite alternate}
.ship__engine--a{left:94%;top:33.4%}
.ship__engine--b{left:94.3%;top:61.4%;animation-delay:-.09s}
.ship__zzz{position:absolute;left:44%;top:20%;font:700 18px/1 var(--ff-display);color:#ffd2a0;
  text-shadow:0 0 10px rgba(255,170,90,.8);pointer-events:none}
.ship__zzz i{position:absolute;font-style:normal;opacity:0;animation:lm-zzz 3.6s ease-out infinite}
.ship__zzz i:nth-child(2){animation-delay:1.2s;font-size:.8em}
.ship__zzz i:nth-child(3){animation-delay:2.4s;font-size:.65em}
.thx{margin:24px 0 0;font:700 26px/1.2 var(--ff-display);color:#fff}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{position:relative;padding:40px var(--pad) 56px}
.footer-inner{display:flex;flex-direction:column;align-items:center;gap:36px;text-align:center}
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.chip{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:999px;border:1px solid var(--line-2);
  background:rgba(255,255,255,.04);text-decoration:none;font:500 12px/1 var(--ff-mono);letter-spacing:.14em;color:var(--chip);
  transition:border-color .25s,color .25s}
.chip:hover{border-color:rgba(255,255,255,.5);color:#fff}
.colophon{width:100%;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.colophon span{font:400 12px/1.5 var(--ff-mono);letter-spacing:.08em;color:var(--label)}
.colophon span + span{font-weight:500;letter-spacing:.32em;text-transform:uppercase}

/* ============================================================
   SENZA WEBGL — pianeti statici in CSS
   ============================================================ */
.no-gl .space{background:radial-gradient(60% 50% at 20% 10%,rgba(106,77,255,.18),transparent),var(--space)}
.no-gl .planet{background:radial-gradient(circle at 34% 30%,#ffd2b0,#ff7a55 18%,#ff3f73 36%,#7a5cff 62%,#1a14b8 88%);
  box-shadow:0 0 0 2px rgba(120,100,255,.9),0 0 60px 6px rgba(120,100,255,.5),0 0 200px 30px rgba(120,100,255,.3)}
.no-gl .planet--about{background:radial-gradient(circle at 34% 30%,#ffe2b8,#ffb340 30%,#ff7a55 55%,#ff3f73 80%,#4a35ff 100%);
  box-shadow:0 0 0 2px rgba(255,160,90,.8),0 0 50px rgba(255,160,90,.4)}
.no-gl .planet--refs{background:radial-gradient(circle at 34% 30%,#fff0d6,#ffb340 20%,#ff5a1e 42%,#b3123a 70%,#4a0b1e 92%);
  box-shadow:0 0 0 2px rgba(255,90,30,.9),0 0 60px 6px rgba(255,90,30,.5),0 0 200px 30px rgba(255,90,30,.3)}
.no-gl .planet--contact{background:radial-gradient(circle at 34% 30%,#e8fff0,#7cf26a 22%,#2fd1a0 44%,#2f6bff 70%,#0b1f5c 92%);
  box-shadow:0 0 0 2px rgba(80,140,255,.9),0 0 60px 6px rgba(80,140,255,.5),0 0 200px 30px rgba(80,140,255,.3)}

/* ============================================================
   REVEAL — i blocchi entrano "a fuoco" quando compaiono
   ============================================================ */
.js .reveal{opacity:0;filter:blur(14px);transform:translateY(32px);
  transition:opacity 1.1s var(--ease),filter 1.1s var(--ease),transform 1.1s var(--ease);transition-delay:var(--rd,0s)}
.js .reveal.in{opacity:1;filter:blur(0);transform:none}
.is-off,.is-off *{animation-play-state:paused !important}

/* ============================================================
   KEYFRAMES
   ============================================================ */
@keyframes lm-grain{0%{background-position:0 0}17%{background-position:-60px 40px}33%{background-position:80px -30px}
  50%{background-position:-110px -90px}67%{background-position:40px 120px}83%{background-position:-20px -140px}100%{background-position:0 0}}
@keyframes lm-grain-text{0%{background-position:0 0,0 0}25%{background-position:-60px 40px,0 0}
  50%{background-position:80px -30px,0 0}75%{background-position:-110px -90px,0 0}100%{background-position:0 0,0 0}}
@keyframes lm-fluid{
  0%{background-position:0% 50%,100% 30%,50% 0%,0 0}
  33%{background-position:60% 15%,25% 85%,0% 65%,0 0}
  66%{background-position:100% 75%,0% 35%,85% 100%,0 0}
  100%{background-position:30% 100%,75% 0%,100% 40%,0 0}}
@keyframes lm-fluid-g{
  0%{background-position:0 0,0% 50%,100% 30%,50% 0%,0 0}
  33%{background-position:-60px 40px,60% 15%,25% 85%,0% 65%,0 0}
  66%{background-position:80px -30px,100% 75%,0% 35%,85% 100%,0 0}
  100%{background-position:-110px -90px,30% 100%,75% 0%,100% 40%,0 0}}
@keyframes lm-glint{0%,55%{background-position:130% 0}85%,100%{background-position:-130% 0}}
@keyframes lm-blink{0%{opacity:1}50%{opacity:.2}}
@keyframes lm-spin{to{transform:rotate(360deg)}}
@keyframes lm-bob{from{transform:translateY(0)}to{transform:translateY(-18px)}}
@keyframes lm-planet-in{from{transform:translateY(120px) scale(.55)}to{transform:none}}
@keyframes lm-smear{from{transform:scaleX(1.08);opacity:.55}to{transform:scaleX(1.38);opacity:1}}
@keyframes lm-ship{from{transform:translateY(0) rotate(-1.5deg)}to{transform:translateY(-16px) rotate(1deg)}}
@keyframes lm-engine{from{opacity:.65;transform:scale(.92)}to{opacity:1;transform:scale(1.06)}}
@keyframes lm-breath{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.04)}}
@keyframes lm-zzz{0%{opacity:0;transform:translate(0,0) scale(.6)}20%{opacity:1}100%{opacity:0;transform:translate(26px,-46px) scale(1.2)}}
@keyframes lm-focus-glow{
  from{filter:blur(18px) drop-shadow(0 0 14px rgba(255,255,255,.4)) drop-shadow(0 0 50px rgba(120,100,255,.45));opacity:0;letter-spacing:.12em}
  to{filter:blur(0) drop-shadow(0 0 14px rgba(255,255,255,.4)) drop-shadow(0 0 50px rgba(120,100,255,.45));opacity:1;letter-spacing:-.02em}}
@keyframes lm-fade{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}

/* ============================================================
   EASTER EGG: gioco "Doggo vs Gatti" — overlay e canvas
   ============================================================ */
.easter-overlay{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:24px;
  background:rgba(5,5,8,.9);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.easter-overlay[hidden]{display:none!important}
.easter-stage{max-width:560px;width:100%;text-align:center;
  padding:clamp(20px,3vw,40px) clamp(20px,3vw,40px) clamp(16px,2.5vw,32px);border-radius:28px}
.easter-screen{position:relative;overflow:hidden;border-radius:16px;
  box-shadow:0 0 0 1px rgba(255,255,255,.12),0 0 40px rgba(120,100,255,.35)}
.easter-screen .grain{opacity:.5}
.easter-close{position:absolute;top:12px;right:14px;width:44px;height:44px;border:0;border-radius:50%;background:none;
  color:var(--warm);font:400 28px/1 var(--ff-body);cursor:pointer;transition:transform .2s,background .2s}
.easter-close:hover{background:rgba(255,255,255,.08);transform:rotate(90deg)}
.easter-title{margin:0 0 6px;font:800 clamp(26px,4vw,40px)/1 var(--ff-display);text-transform:uppercase;color:#fff}
.easter-title .grad-text{filter:drop-shadow(0 0 14px rgba(255,140,90,.45))}
.easter-title .cr{font:500 .45em/1 var(--ff-mono);letter-spacing:.2em;color:var(--label);vertical-align:middle}
.easter-sub{margin:0 0 14px;font:500 12px/1.4 var(--ff-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--label)}
.easter-sub kbd{font:inherit;padding:2px 6px;border-radius:6px;border:1px solid var(--line-2);color:var(--warm)}
.easter-canvas{display:block;width:100%;max-width:100%;height:auto;background:#07070d}
.easter-hud{display:flex;justify-content:space-between;align-items:center;margin-top:12px;
  font:500 13px/1 var(--ff-mono);letter-spacing:.1em;color:var(--warm)}
.easter-score b,.easter-status{color:var(--hot)}
.easter-mobile-msg{display:none;margin:14px 0 0;font:400 16px/1.5 var(--ff-body);color:var(--text)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1000px){
  /* menu: box del logo + bottone rotondo, le voci si aprono in un pannello di vetro */
  .fnav{padding:0 12px}
  .fnav__toggle{display:inline-flex}
  .fnav__menu{position:absolute;top:calc(100% + 10px);left:12px;right:12px;flex-direction:column;align-items:stretch;gap:10px;
    padding:12px;border-radius:28px;
    background:linear-gradient(135deg,rgba(255,255,255,.1),rgba(255,255,255,.02) 50%),rgba(14,14,22,.86);
    opacity:0;visibility:hidden;transform:translateY(-10px) scale(.97);transform-origin:top right;
    transition:opacity .3s,transform .5s var(--ease-liquid),visibility .3s}
  .fnav.is-open .fnav__menu{opacity:1;visibility:visible;transform:none}
  .fnav__links{flex-direction:column;align-items:stretch}
  .fnav__links a{min-height:50px;padding:0 18px;font-size:13px}
  .fnav__links a[aria-current="true"]{background:rgba(74,53,255,.4)}
  .fnav__ind{display:none}
  .fnav__cta{justify-content:center;min-height:52px}
}
@media (max-width:1100px){
  .planet--hero{left:calc(100% - var(--D) * .5)}
}
@media (max-width:900px){
  /* su telefono il pianeta sta in alto a destra e il testo scende sotto */
  .hero{--D:min(112vw,600px);flex-direction:column;align-items:stretch;padding-top:calc(var(--D) + 110px)}
  .planet--hero{top:96px;bottom:auto;left:calc(100% - var(--D) * .78)}
  /* Referenze su telefono: pianeta in alto a sinistra, contenuti sotto */
  .section.refs{--D:min(104vw,560px);display:block;min-height:0;padding-top:calc(var(--D) + 40px)}
  .planet--refs{top:40px;left:calc(var(--D) * -.3)}
  .refs-grid{grid-template-columns:minmax(0,1fr)}
  .refs-text,.pills{grid-column:1}
  /* Chi sono su telefono: pianeta con gli anelli in alto al centro, contenuti sotto */
  section.about{--D:min(36vw,220px);display:block;min-height:0;padding-top:calc(var(--D) + 110px)}
  .planet--about{top:60px;left:calc(50% - var(--D) / 2)}
  .about-grid{grid-template-columns:minmax(0,1fr);row-gap:40px}
  .about-photo,.about-text{grid-column:1}
}
@media (max-width:760px){
  .easter-canvas,.easter-hud,.easter-sub{display:none}
  .easter-mobile-msg{display:block}
}
@media (max-width:700px){
  .hud__tc,.hud__sec{display:none}
  .reg--tl,.reg--tr{display:none}
  .section,.about{padding-top:100px;padding-bottom:100px}
  .num{height:112px}
  .num__glow,.num__txt{font-size:112px}
  .card{padding:28px 24px}
  .contact{padding-top:110px}
  .ship-spot{margin-top:40px}
  .disc .sec-head .h2{white-space:normal}
}

/* ============================================================
   RIDUCI MOVIMENTO — tutto fermo, contenuti subito visibili
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important;scroll-behavior:auto !important}
  .js .reveal{opacity:1;filter:none;transform:none}
}