*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:#3a86ff;color:#111;font-family:'Space Mono',monospace;overflow:hidden;transition:background-color 1s .1s}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0;text-align:left}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid #111;outline-offset:3px}
#stage{position:absolute;left:50%;top:50%;width:1440px;height:900px;transform-origin:center;overflow:hidden;background-color:#3a86ff;background-image:radial-gradient(rgba(255,255,255,.45) 1.6px,transparent 1.6px);background-size:30px 30px}

@keyframes rise{from{transform:translateY(110%)}to{transform:none}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes blink{0%,92%,100%{transform:scaleY(1)}96%{transform:scaleY(.08)}}
@keyframes shake{0%,100%{transform:translateX(0) rotate(0)}20%{transform:translateX(-12px) rotate(-3deg)}40%{transform:translateX(12px) rotate(3deg)}60%{transform:translateX(-9px) rotate(-2deg)}80%{transform:translateX(9px) rotate(2deg)}}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.08,.94)}100%{transform:scale(1)}}
@keyframes step{0%,100%{transform:translateY(0)}50%{transform:translateY(-20px)}}
@keyframes bobw{0%,100%{transform:rotate(-3deg) translateY(0)}50%{transform:rotate(3deg) translateY(-7px)}}

.s{font-family:'Syne',sans-serif;font-weight:800;letter-spacing:-.035em;line-height:.98}
.row{display:flex;gap:10px}
.top{position:absolute;left:80px;top:40px;right:80px;display:flex;justify-content:space-between;align-items:center;z-index:5}
.logo{font-size:24px;background:#fff;border:3px solid #111;border-radius:12px;padding:6px 14px;box-shadow:4px 4px 0 #111;transform:rotate(-2deg)}
.ch{display:inline-flex;align-items:center;min-height:46px;padding:0 18px;border:3px solid #111;border-radius:99px;font-weight:700;font-size:14px;background:#fff;box-shadow:4px 4px 0 #111;white-space:nowrap}
.back{transition:transform .4s cubic-bezier(.16,1,.3,1)}
.back:hover{transform:translateX(-6px) rotate(-2deg)}
.title{position:absolute;left:80px;top:150px;margin:0;font-size:82px;width:800px;z-index:2}
.ln{display:block;overflow:hidden;padding-bottom:8px}
.ln>span{display:block;animation:rise 1.2s cubic-bezier(.16,1,.3,1) both}
.hl{font-style:normal;background:#8338ec;color:#fff;padding:0 .1em;border-radius:.12em;display:inline-block;transform:rotate(-2deg)}
.dot{font-style:normal;color:#fff;-webkit-text-stroke:3px #111}
.lead{position:absolute;left:80px;top:566px;width:520px;margin:0;font-size:16px;line-height:1.6;font-weight:700}
.menu{position:absolute;left:80px;top:690px;display:flex;gap:16px;z-index:3}
.chb{display:inline-flex;align-items:center;gap:12px;min-height:60px;padding:0 24px 0 14px;border:3px solid #111;border-radius:16px;font-weight:700;font-size:17px;box-shadow:6px 6px 0 #111;transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s}
.chb:hover,.chb:focus-visible{transform:translate(-4px,-4px) rotate(-2deg);box-shadow:11px 11px 0 #111}
.chb b{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;border:3px solid #111;background:#ffbe0b;color:#111;font-size:13px}
.hint{position:absolute;left:80px;top:808px;font-size:13px;font-weight:700}
.sh{position:absolute;border:3px solid #111;box-shadow:8px 8px 0 #111}
.win{border:3px solid #111;border-radius:16px;background:#fff;box-shadow:9px 9px 0 #111;overflow:hidden;position:relative}
.tb{display:flex;align-items:center;gap:7px;padding:10px 14px;border-bottom:3px solid #111;font-weight:700;font-size:13px;background:#ffbe0b;color:#111}
.tb i{width:13px;height:13px;border-radius:50%;border:2.5px solid #111;background:#fff;display:block}
.tb span{margin-left:8px}
.txt{font-size:16px;line-height:1.65;margin:0 0 14px}
.stat{flex:1;padding:16px;font-size:46px}
.stat small{display:block;font-family:'Space Mono',monospace;font-weight:700;font-size:12px;letter-spacing:0;margin-top:6px}
.big{display:inline-flex;align-items:center;min-height:54px;padding:0 24px;border:3px solid #111;border-radius:99px;background:#ffbe0b;color:#111;font-weight:700;font-size:16px;box-shadow:5px 5px 0 #111;transition:transform .4s cubic-bezier(.16,1,.3,1)}
.big:hover{transform:translateY(-5px) rotate(-2deg)}

.lang{position:relative}
.lang-menu{position:absolute;right:0;top:calc(100% + 10px);margin:0;padding:8px;list-style:none;background:#fff;border:3px solid #111;border-radius:14px;box-shadow:6px 6px 0 #111;min-width:170px;display:none;z-index:60}
.lang-menu[data-open="1"]{display:block}
.lang-menu li{padding:10px 14px;border-radius:9px;font-weight:700;font-size:14px;cursor:pointer}
.lang-menu li:hover,.lang-menu li[data-active="1"]{background:#ffbe0b}

#walker{position:absolute;left:930px;top:250px;width:360px;height:377px;z-index:6}
.av{position:relative;z-index:2;display:block;width:360px;height:377px;cursor:pointer}
.av .tri{fill:#fb5607;transition:fill .3s}
.av[data-mood="angry"] .tri{fill:#ff006e}
.av[data-mood="angry"]{animation:shake .5s 4}
.av[data-mood="surprised"]{animation:pop .35s}
.av .mi,.av .ms,.av .ma,.av .br{display:none}
.av[data-mood="idle"] .mi{display:inline}
.av[data-mood="surprised"] .ms{display:inline}
.av[data-mood="angry"] .ma,.av[data-mood="angry"] .br{display:inline}
.body{transform-origin:160px 284px}
.eyes{transform-origin:160px 172px;animation:blink 5s infinite}
.feet{opacity:0;transform:translateY(-40px);transition:opacity .25s,transform .5s cubic-bezier(.34,1.56,.64,1)}
.av[data-walk="1"] .feet{opacity:1;transform:none}
.av[data-walk="1"] .ft{animation:step .36s infinite ease-in-out}
.av[data-walk="1"] .ft2{animation-delay:.18s}
.av[data-walk="1"] .body{animation:bobw .36s infinite ease-in-out}
#curse{position:absolute;left:150px;top:-26px;min-width:150px;padding:10px 16px;border:3px solid #111;border-radius:14px;background:#fff;box-shadow:5px 5px 0 #111;font-weight:700;font-size:22px;text-align:center;letter-spacing:.06em;transform:rotate(-4deg);display:none;z-index:3;white-space:nowrap}
#curse[data-show="1"]{display:block}

#finger{position:absolute;right:-30px;top:150px;width:70px;height:101px;z-index:1;opacity:0;transform:translateY(24px) rotate(18deg) scale(.6);transform-origin:bottom left;transition:opacity .15s ease, transform .25s cubic-bezier(.16,1,.3,1);pointer-events:none}
#finger[data-show="1"]{opacity:1;transform:translateY(0) rotate(8deg) scale(1)}
#finger .arm{position:absolute;left:-58px;bottom:14px;width:80px;height:7px;background:#111;border-radius:99px;transform-origin:right center;transform:rotate(-16deg);z-index:0}
#finger .censor{position:absolute;left:20px;right:24px;top:-4px;bottom:40px;border:3px solid #111;border-radius:10px;background:rgba(255,255,255,.15);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);display:flex;align-items:center;justify-content:center;font:700 9px/1 'Space Mono',monospace;letter-spacing:.18em;color:#111;text-shadow:0 0 6px rgba(255,255,255,.9);box-shadow:4px 4px 0 #111;z-index:2}

#drops{position:absolute;inset:0;pointer-events:none;z-index:5}
.drop{position:absolute;width:46px;height:46px}

.ov{position:absolute;inset:0;z-index:20;pointer-events:none;visibility:hidden;transition:clip-path 1.1s cubic-bezier(.77,0,.18,1),transform 1.1s cubic-bezier(.77,0,.18,1),visibility 0s linear 1.1s;background-image:radial-gradient(rgba(17,17,17,.14) 1.5px,transparent 1.5px);background-size:30px 30px}
.ov[data-on="1"]{pointer-events:auto;visibility:visible;transition-delay:0s}
.oa{background-color:#8338ec;clip-path:circle(0px at 1100px 420px)}
.oa[data-on="1"]{clip-path:circle(1800px at 1100px 420px)}
.ol{background-color:#ff006e;transform:translateX(105%) skewX(-8deg)}
.ol[data-on="1"]{transform:none}
.ob{background-color:#fff;clip-path:inset(100% 0 0 0)}
.ob[data-on="1"]{clip-path:inset(0 0 0 0)}
.oc{background-color:#111;background-image:radial-gradient(rgba(255,190,11,.3) 1.5px,transparent 1.5px);clip-path:circle(0px at 1440px 900px)}
.oc[data-on="1"]{clip-path:circle(1900px at 1440px 900px)}
.r{opacity:0;transform:translateY(60px);transition:opacity .6s,transform .6s}
.ov[data-on="1"] .r{opacity:1;transform:none;transition:opacity .9s .6s,transform 1.1s .6s cubic-bezier(.16,1,.3,1)}
.ov[data-on="1"] .r.d2{transition-delay:.75s}
.ov[data-on="1"] .r.d3{transition-delay:.9s}
.ov[data-on="1"] .r.d4{transition-delay:1.05s}

.pt{display:block;width:100%;padding:12px 18px;border:3px solid #111;border-radius:14px;background:#fff;box-shadow:5px 5px 0 #111;font-size:42px;transition:transform .5s cubic-bezier(.16,1,.3,1),background .3s}
.pt[data-act="1"]{background:#ffbe0b;transform:translateX(28px)}
.pt:hover{transform:translateX(14px)}
.pc{position:absolute;inset:0;opacity:0;transform:translateX(100px) rotate(8deg) scale(.9);transition:transform .9s cubic-bezier(.16,1,.3,1),opacity .5s;display:flex;flex-direction:column;pointer-events:none}
.pc[data-act="1"]{opacity:1;transform:none;z-index:3;pointer-events:auto}
.pc[data-act="2"]{transform:translateX(-100px) rotate(-8deg) scale(.9)}
.pv{height:200px;border-bottom:3px solid #111;display:flex;align-items:flex-end;padding:12px;font-size:12px;font-weight:700;position:relative;overflow:hidden}
.pv img,.cv img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pb{padding:26px 28px;display:flex;flex-direction:column;gap:14px;flex:1}
.pb p{margin:0;font-size:15px;line-height:1.6}
.tg{display:flex;gap:8px;flex-wrap:wrap}
.tg span{border:2px solid #111;border-radius:99px;padding:4px 11px;font-size:12px;font-weight:700}
.kind{font-size:12px;font-weight:700;letter-spacing:.12em}

.cv{position:absolute;top:410px;width:220px;height:300px;border:3px solid #111;border-radius:10px;box-shadow:8px 8px 0 #111;padding:18px;display:flex;flex-direction:column;justify-content:space-between;font-size:25px;overflow:hidden;transition:transform .8s cubic-bezier(.16,1,.3,1),left .8s cubic-bezier(.16,1,.3,1);transform-origin:50% 100%}
.cv small{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.06em;font-weight:700}
.bd{position:absolute;inset:0;padding:28px;opacity:0;transform:translateY(40px);transition:transform .8s cubic-bezier(.16,1,.3,1),opacity .5s;pointer-events:none}
.bd[data-act="1"]{opacity:1;transform:none;pointer-events:auto}

@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}
/* ===== touch ===== */
button{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
@media (hover:none){
  .chb:hover,.big:hover,.back:hover,.pt:hover{transform:none}
  .chb:hover{box-shadow:6px 6px 0 #111}
}

/* ===== MOBILE (schermo stretto in verticale) =====
   Qui lo stage non è più 1440x900 scalato: diventa fluido e ogni vista scorre. */
@media (max-width:900px) and (max-aspect-ratio:1/1){
  body{overscroll-behavior:none}
  #stage{position:fixed;left:0;top:0;width:100%;height:100vh;height:100dvh;transform:none!important}
  :root{--av:clamp(130px,calc(100vh - 500px),230px)}
  @supports (height:100dvh){:root{--av:clamp(130px,calc(100dvh - 500px),230px)}}

  /* --- top bar --- */
  .top{left:16px;right:16px;top:calc(14px + env(safe-area-inset-top,0px))}
  .logo{font-size:19px;padding:5px 10px;box-shadow:3px 3px 0 #111}
  .ch{min-height:40px;padding:0 13px;font-size:13px;border-width:2.5px;box-shadow:3px 3px 0 #111}
  .row{gap:8px}

  /* --- home --- */
  .title{left:20px;top:calc(84px + env(safe-area-inset-top,0px));width:calc(100% - 40px);font-size:min(12vw,64px)}
  .menu{left:16px;right:16px;top:auto;bottom:calc(52px + env(safe-area-inset-bottom,0px));display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .chb{min-height:56px;justify-content:center;padding:0 14px;font-size:16px;box-shadow:5px 5px 0 #111}
  .hint{left:16px;right:16px;top:auto;bottom:calc(12px + env(safe-area-inset-bottom,0px));font-size:11px;line-height:1.35}

  #walker{left:calc(50% - var(--av)/2);top:auto;bottom:calc(196px + env(safe-area-inset-bottom,0px));width:var(--av);height:calc(var(--av)*1.047)}
  .av{width:100%;height:100%}
  .av svg{width:100%;height:100%}
  #curse{left:30%;top:-30px;min-width:0;padding:6px 12px;font-size:16px}
  #finger{right:-20px;top:40%;scale:.6}

  .deco>*{display:none}
  .deco>.sh{box-shadow:5px 5px 0 #111;border-width:2.5px}
  .deco>.sh:nth-child(1){display:block;left:auto!important;right:-30px;top:120px!important;width:110px!important;height:110px!important}
  .deco>.sh:nth-child(2){display:block;left:auto!important;right:26px;top:250px!important;width:38px!important;height:38px!important}
  .deco>.sh:nth-child(6){display:block;left:-20px!important;top:auto!important;bottom:230px;width:64px!important;height:64px!important}
  .deco>.sh:nth-child(8){display:block;left:auto!important;right:-26px;top:auto!important;bottom:215px;width:80px!important;height:80px!important}

  /* --- overlay: colonna scrollabile --- */
  .ov{display:flex;flex-direction:column;gap:22px;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:0 16px calc(48px + env(safe-area-inset-bottom,0px))}
  .ov>*{flex-shrink:0}
  .oa{clip-path:circle(0px at 75% 45%)}
  .oa[data-on="1"]{clip-path:circle(170% at 75% 45%)}
  .oc{clip-path:circle(0px at 100% 100%)}
  .oc[data-on="1"]{clip-path:circle(170% at 100% 100%)}
  .ov>.top{position:sticky;top:0;left:auto;right:auto;margin:0 -16px;padding:calc(14px + env(safe-area-inset-top,0px)) 16px 12px;background-color:inherit}

  /* i blocchi con left/top/width inline tornano nel flusso */
  .abs{position:static!important;left:auto!important;top:auto!important;width:auto!important;height:auto!important}
  .win{box-shadow:6px 6px 0 #111}
  .pad{padding:22px 20px 24px!important}
  .txt{font-size:15px}
  .big{min-height:50px;padding:0 20px;font-size:15px;box-shadow:4px 4px 0 #111}

  /* about */
  .h-about{font-size:clamp(30px,9vw,48px)!important;margin-bottom:18px!important}
  .about-side{gap:22px!important}
  .stats{margin-top:6px!important;gap:12px!important}
  .stat{padding:12px 10px;font-size:34px}
  .stat small{font-size:11px}

  /* work */
  #plist{flex-direction:row!important;flex-wrap:wrap;gap:10px!important}
  .pt{width:auto;padding:8px 14px;font-size:22px;box-shadow:4px 4px 0 #111}
  .pt:hover{transform:none}
  .pt[data-act="1"]{transform:translateY(-3px)}
  .whint{display:none}
  #pdeck{position:relative!important;display:grid}
  .pc{position:relative;inset:auto;grid-area:1/1;min-width:0}
  .pv{height:150px}
  .pb{padding:18px 18px 22px}
  .pb>.s{font-size:34px!important}

  /* books */
  .h-books{font-size:clamp(36px,11vw,56px)!important}
  #fan{position:relative!important;height:230px!important}
  .cv{top:auto;bottom:8px;width:118px;height:165px;padding:10px;font-size:15px;box-shadow:5px 5px 0 #111}
  .cv small{font-size:9px}
  #bdeck{position:relative!important;top:auto!important;display:grid}
  .bd{position:relative;inset:auto;grid-area:1/1;min-width:0;padding:20px}
  .bd>.s{font-size:30px!important}

  /* contact */
  .h-contact{font-size:clamp(40px,13vw,64px)!important}
  .oc-sh{display:none}
  .spinner{width:150px!important;height:150px!important;align-self:center}
}