/* home.css — layout della home */
html,body{height:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--body);overflow:hidden;position:relative;transition:background .3s}
#particles-js{position:fixed;top:0;left:0;right:0;bottom:0;z-index:0}
#particles-js canvas{display:block}
.atmos{position:fixed;top:0;left:0;right:0;bottom:0;z-index:1;pointer-events:none;
  background:radial-gradient(42% 38% at 56% 18%, rgba(40,148,255,.10), transparent 64%),
             radial-gradient(120% 95% at 50% 50%, transparent 62%, rgba(210,215,224,.5) 100%)}
:root[data-theme="dark"] .atmos{
  background:radial-gradient(40% 34% at 56% 20%, rgba(195,11,11,.16), transparent 62%),
             radial-gradient(120% 90% at 50% 50%, transparent 55%, rgba(0,0,0,.72) 100%)}
.stage{position:relative;z-index:2;min-height:100vh;height:100%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;padding:32px}
.logoWrap{position:relative;filter:drop-shadow(0 10px 26px rgba(40,148,255,.22));animation:float 6s var(--ease) infinite}
.logoWrap img{width:170px;max-width:60vw;height:auto;display:block}
.logoWrap:before{content:"";position:absolute;left:50%;top:34%;width:58%;padding-bottom:58%;
  margin-left:-29%;margin-top:-29%;border-radius:50%;
  background:radial-gradient(circle,rgba(40,148,255,.28),transparent 70%);
  filter:blur(16px);z-index:-1;animation:pulse 4.5s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes pulse{0%,100%{opacity:.4;transform:scale(1)}50%{opacity:.75;transform:scale(1.12)}}
.role{font-family:var(--tech);font-size:12px;letter-spacing:.4em;text-transform:uppercase;margin-top:28px;color:var(--ink)}
.claim{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);margin-top:10px}
.claim b{color:var(--blue);font-weight:600}
.mail{display:inline-block;margin-top:24px;font-family:var(--tech);font-size:clamp(10px,3.2vw,12px);
  letter-spacing:.14em;color:var(--muted);text-decoration:none;position:relative;transition:color .3s}
.mail:after{content:"";position:absolute;left:0;bottom:-4px;width:100%;height:1px;background:var(--blue);
  transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.mail:hover{color:var(--ink)} .mail:hover:after{transform:scaleX(1)}
.social{margin-top:22px}
.li{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:7px;color:var(--blue);
  text-decoration:none;background:transparent;box-shadow:none;
  border:1px solid color-mix(in srgb,var(--blue) 32%,transparent);
  transition:transform .28s var(--ease),border-color .28s,color .28s,box-shadow .28s}
.li:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--blue) 75%,transparent);color:var(--ink);
  box-shadow:0 0 16px rgba(40,148,255,.35)}
.li svg{width:15px;height:15px;display:block}
.foot{position:fixed;bottom:18px;left:0;right:0;z-index:2;text-align:center;transition:bottom .3s var(--ease)}
body.ck-open .foot{bottom:112px}
.foot .legal{font-family:var(--tech);font-size:9px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:7px}
.foot .legal a{color:var(--muted);text-decoration:none;margin:0 6px}
.foot .legal a:hover{color:var(--blue)}
.foot .legal .sep{opacity:.4}
.foot .brandline{font-family:var(--tech);font-size:9px;letter-spacing:.26em;text-transform:uppercase;color:var(--muted)}
.foot .brandline b{color:var(--blue)}
.in{opacity:0;transform:translateY(12px);animation:rise .9s var(--ease) forwards}
.logoWrap.in{animation:rise 1.1s var(--ease) forwards}
.d1{animation-delay:.15s}.d2{animation-delay:.5s}.d3{animation-delay:.66s}.d4{animation-delay:.8s}.d5{animation-delay:.94s}
@keyframes rise{to{opacity:1;transform:none}}
@media(max-width:520px){.foot .legal a{display:inline-block;margin:2px 5px}}
@media(prefers-reduced-motion:reduce){.logoWrap,.logoWrap:before{animation:none}.in,.logoWrap.in{opacity:1;transform:none;animation:none}}

/* ===== mobile ===== */
html{-webkit-text-size-adjust:100%}
@media(max-width:600px){
  .stage{padding:20px}
  .logoWrap img{width:150px}
  .role{font-size:11px;letter-spacing:.32em;margin-top:22px}
  .claim{font-size:9px;letter-spacing:.24em}
  .mail{margin-top:20px}
  .li{width:36px;height:36px}
  .li svg{width:17px;height:17px}
  .foot{bottom:calc(14px + env(safe-area-inset-bottom,0px))}
  body.ck-open .foot{opacity:0;pointer-events:none}
}
@media(max-height:660px) and (orientation:landscape){
  body{overflow:auto}
  .stage{min-height:auto;padding:64px 20px 30px}
  .logoWrap img{width:110px}
  .role{margin-top:14px}.claim{margin-top:6px}.mail{margin-top:14px}.social{margin-top:14px}
  .foot{position:static;margin-top:22px}
}

/* ===== tablet ===== */
@media(min-width:601px) and (max-width:1024px){
  .stage{padding:40px}
  .logoWrap img{width:210px}
  .role{font-size:13px;letter-spacing:.42em;margin-top:32px}
  .claim{font-size:11px;letter-spacing:.3em}
  .mail{font-size:13px;margin-top:26px}
  .li{width:38px;height:38px}
  .li svg{width:18px;height:18px}
  .foot .legal{font-size:10px}
  .foot .brandline{font-size:10px}
}
/* tablet in orizzontale: schermo basso */
@media(min-width:601px) and (max-width:1024px) and (orientation:landscape) and (max-height:820px){
  .logoWrap img{width:170px}
  .role{margin-top:24px}
  .mail{margin-top:20px}
  .social{margin-top:18px}
}

/* menu principale nella home */
.mainnav{font-family:var(--tech);font-size:10px;letter-spacing:.2em;text-transform:uppercase;margin-bottom:12px}
.mainnav a{color:var(--ink);text-decoration:none;margin:0 8px;padding-bottom:3px;border-bottom:1px solid transparent;transition:border-color .3s,color .3s}
.mainnav a:hover{color:var(--blue);border-bottom-color:var(--blue)}
.mainnav .sep{color:var(--muted);opacity:.5}
@media(max-width:600px){.mainnav{font-size:9px}.mainnav a{margin:0 6px}}

/* menu sotto l'icona LinkedIn */
.stage .mainnav{margin-top:18px;margin-bottom:0}
.stage .mainnav a{color:var(--blue);opacity:.85}
.stage .mainnav a:hover{opacity:1;color:var(--blue);border-bottom-color:var(--blue)}
.stage .mainnav .sep{color:var(--blue);opacity:.4}

/* ===== pulsanti: gabbia 3D rotante attorno al testo ===== */
.stage .mainnav{display:flex;justify-content:center;flex-wrap:wrap;gap:26px;margin-top:16px}
.stage .mainnav a.poly{position:relative;display:inline-grid;place-items:center;
  width:210px;height:88px;color:var(--cage,#cf3a3a);text-decoration:none;border:0;opacity:1}
.stage .mainnav a.poly span{grid-area:1/1;position:relative;z-index:3;font-family:var(--tech);
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);transition:color .35s}
.stage .mainnav a.poly span:after{content:"";position:absolute;left:0;bottom:-6px;width:100%;height:1px;
  background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.stage .mainnav a.poly:hover span:after{transform:scaleX(1)}
.cage{position:absolute;inset:0;pointer-events:none;display:block}
.cage.back{z-index:0}
.cage.front{z-index:1}
.stage .mainnav a.poly:hover span{color:var(--ink)}
@media(max-width:600px){
  .stage .mainnav{margin-top:8px;gap:2px}
  .stage .mainnav a.poly{width:182px;height:78px}
  .stage .mainnav a.poly span{font-size:9px;letter-spacing:.12em}
}
@media(min-width:601px) and (max-width:1024px){.stage .mainnav{gap:18px}.stage .mainnav a.poly{width:198px;height:83px}}

/* riga con il nome sotto il claim */
.who{font-size:10px;letter-spacing:.26em;text-transform:uppercase;font-weight:600;color:var(--cage,#cf3a3a);margin-top:6px;opacity:1}
@media(max-width:600px){.who{font-size:9px;letter-spacing:.2em}}

/* ===== disco di accrescimento dietro il logo ===== */
.logoWrap{isolation:isolate}
.logoWrap .hole{position:absolute;left:50%;top:34%;width:560px;height:560px;
  margin-left:-280px;margin-top:-280px;z-index:0;pointer-events:none;display:block}
.logoWrap img{position:relative;z-index:1}
@media(max-width:600px){.logoWrap .hole{width:380px;height:380px;margin-left:-190px;margin-top:-190px}}
@media(min-width:601px) and (max-width:1024px){.logoWrap .hole{width:490px;height:490px;margin-left:-245px;margin-top:-245px}}

/* ===== composizione delle scritte dai bordi dello schermo ===== */
.ltr{display:inline-block;will-change:transform,opacity}
.role,.claim,.who,.mail,.foot .legal,.foot .brandline{overflow:visible}

/* piè di pagina: compare in dissolvenza dopo le lettere */
.foot.in{opacity:0;transform:none;animation:footFade 1.2s ease 4.2s forwards}
@keyframes footFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.foot.in{opacity:1;animation:none}}

/* LinkedIn: compare insieme al piè di pagina */
.social.in{opacity:0;transform:none;animation:footFade 1.2s ease 4.2s forwards}
@media(prefers-reduced-motion:reduce){.social.in{opacity:1;animation:none}}

/* orizzonte del buco nero: in tema chiaro serve un alone scuro per dare profondita' */
.logoWrap::after{content:'';position:absolute;left:50%;top:34%;width:560px;height:300px;
  margin-left:-280px;margin-top:-150px;border-radius:50%;z-index:0;pointer-events:none;
  transform:rotate(-18deg);
  background:radial-gradient(ellipse 50% 50% at 50% 50%,rgba(10,14,20,.45) 0%,rgba(10,14,20,.22) 42%,rgba(10,14,20,.08) 66%,transparent 80%);
  filter:blur(10px)}
:root[data-theme="dark"] .logoWrap::after{
  background:radial-gradient(ellipse 50% 50% at 50% 50%,rgba(0,0,0,.75) 0%,rgba(0,0,0,.42) 44%,rgba(0,0,0,.16) 68%,transparent 82%)}
@media(max-width:600px){.logoWrap::after{width:370px;height:198px;margin-left:-185px;margin-top:-99px}}

/* animazione autonoma delle lettere: risucchio nel buco nero e ricostruzione */
.ltr{animation:flyIn 3.1s cubic-bezier(.4,0,.2,1) both}
@keyframes flyIn{
  0%  { transform:translate(var(--fx,0),var(--fy,0)) rotate(var(--fr,0deg)) scale(.5);  opacity:0 }
  18% { opacity:.9 }
  46% { transform:translate(var(--cx,0),var(--cy,0)) rotate(var(--sr,0deg)) scale(.22); opacity:.75;
        animation-timing-function:cubic-bezier(.55,0,.85,.35) }
  62% { transform:translate(calc(var(--cx,0)*.92),calc(var(--cy,0)*.92)) rotate(calc(var(--sr,0deg)*1.15)) scale(.12); opacity:.35 }
  100%{ transform:none; opacity:1 }
}
@media(prefers-reduced-motion:reduce){ .ltr{animation:none} }

/* tema chiaro: comparsa classica, senza composizione delle lettere */
:root[data-theme="light"] .foot.in,
:root[data-theme="light"] .social.in{animation:rise .9s var(--ease) forwards;animation-delay:.94s}