/* Peekaboo Gears — "officina di latta": lamiere rivettate, targhe d'ottone, catene.
   La regola del gioco vale anche per la pagina: quello che guardi (il cursore sopra) si ferma. */
:root{
  --bg:#13111D;--fg:#EDE3CC;--dim:#9A90A8;--faint:#5d566e;
  --brass:#D6AA52;--brass-l:#FADE96;--brass-d:#805E26;--copper:#C9743F;--tin:#3E8C8A;--tin-l:#82C8C4;
  --steel:#2A2538;--plate:#1C1928;--plate-l:#262236;--ice:#AAC4EB;--bad:#E86854;--ok:#7BD389;
  --rivet:radial-gradient(circle at 35% 35%,#b9b2c8 0 1.5px,#5a5370 2.5px,transparent 3.5px);
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--fg);font:16px/1.6 "Noto Sans",system-ui,-apple-system,"Segoe UI","Noto Sans CJK SC","Noto Sans CJK JP","PingFang SC","Hiragino Sans",sans-serif;overflow-x:hidden;
  background-image:radial-gradient(#ffffff09 1px,transparent 1.5px);background-size:28px 28px}
a{color:inherit}
img{max-width:100%;height:auto;display:block}
button{font:inherit;color:inherit}
::selection{background:#d6aa5255}

/* lamiera rivettata: base di pannelli, schede e palco */
.plate{position:relative;background:linear-gradient(160deg,var(--plate-l),var(--plate) 60%);border:1px solid #ffffff12;border-radius:14px;
  box-shadow:inset 0 1px 0 #ffffff14,inset 0 -2px 0 #0006,0 10px 30px #0006}
.plate::before{content:"";position:absolute;inset:7px;pointer-events:none;border-radius:inherit;
  background:var(--rivet) 0 0/10px 10px no-repeat,var(--rivet) 100% 0/10px 10px no-repeat,var(--rivet) 0 100%/10px 10px no-repeat,var(--rivet) 100% 100%/10px 10px no-repeat}

/* angoli del mirino, riusati dove "si guarda" */
.aim{position:absolute;inset:-8px;pointer-events:none;opacity:0;transition:opacity .2s,inset .2s;
  background:linear-gradient(var(--fg),var(--fg)) 0 0/18px 3px,linear-gradient(var(--fg),var(--fg)) 0 0/3px 18px,
  linear-gradient(var(--fg),var(--fg)) 100% 0/18px 3px,linear-gradient(var(--fg),var(--fg)) 100% 0/3px 18px,
  linear-gradient(var(--fg),var(--fg)) 0 100%/18px 3px,linear-gradient(var(--fg),var(--fg)) 0 100%/3px 18px,
  linear-gradient(var(--fg),var(--fg)) 100% 100%/18px 3px,linear-gradient(var(--fg),var(--fg)) 100% 100%/3px 18px;background-repeat:no-repeat}

/* nav: targhetta d'ottone */
nav{position:fixed;z-index:20;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:max(12px,env(safe-area-inset-top)) 4vw 12px;background:linear-gradient(#13111df2,#13111d00)}
.back{text-decoration:none;color:var(--dim);font-size:.85rem;white-space:nowrap}.back:hover{color:var(--fg)}
.links{display:flex;align-items:center;gap:6px;padding:5px 6px 5px 14px;border-radius:99px;background:#1c1928e6;border:1px solid #d6aa5233;box-shadow:inset 0 1px 0 #ffffff10}
.links>a{text-decoration:none;color:var(--dim);font-size:.85rem;padding:4px 10px;border-radius:99px;transition:color .2s,background .2s}.links>a:hover{color:#1a1407;background:var(--brass)}
select{background:#ffffff0c;color:var(--fg);border:1px solid #ffffff22;border-radius:99px;padding:5px 10px;font:inherit;font-size:.82rem;cursor:pointer}
select option{color:#13111D}

/* hero: tutto al centro, il logo ti guarda */
.hero{position:relative;min-height:100vh;min-height:100svh;display:grid;place-items:center;padding:110px 6vw 90px;overflow:hidden;
  background:radial-gradient(ellipse 70% 60% at 50% 42%,#2a2340 0,#13111d00 70%)}
#drift{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hero-in{position:relative;z-index:1;text-align:center;display:flex;flex-direction:column;align-items:center}
.logo{position:relative;width:min(640px,92vw);margin-bottom:6px;filter:drop-shadow(0 18px 40px #000a)}
.logo img{width:100%}
.iris{position:absolute;border-radius:50%;transform:translate(-50%,-50%);
  background:radial-gradient(circle at 33% 30%,#fff 0 9%,transparent 10%),radial-gradient(circle,#0e0c14 0 54%,#306e78 56% 86%,#24565e 100%);
  box-shadow:inset 0 0 0 2px #1d4a51;transition:height .08s}
.iris.blink{height:6%!important}
.tag{font-size:clamp(1.6rem,3.6vw,2.7rem);font-weight:800;letter-spacing:-.01em;line-height:1.2;margin:4px 0 12px;color:var(--brass-l);
  text-shadow:0 2px 0 var(--brass-d),0 0 30px #d6aa5240}
.lead{color:#cfc5d8;font-size:1.06rem;max-width:620px}
.cta{display:flex;gap:14px;align-items:center;justify-content:center;flex-wrap:wrap;margin-top:28px}
.pill{border:1px dashed #82c8c477;color:var(--tin-l);border-radius:99px;padding:6px 14px;font-size:.85rem}
.btn{position:relative;background:linear-gradient(#f0cd7f,var(--brass) 55%,#b98a3a);color:#2a1d06;text-decoration:none;font-weight:800;border-radius:12px;padding:12px 26px;
  box-shadow:inset 0 1px 0 #fff6,inset 0 -3px 0 #0003,0 5px 0 var(--brass-d),0 14px 30px #d6aa5240;transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translateY(2px);box-shadow:inset 0 1px 0 #fff6,inset 0 -3px 0 #0003,0 3px 0 var(--brass-d),0 10px 24px #d6aa5240}
.cue{position:absolute;z-index:1;bottom:26px;left:50%;transform:translateX(-50%);color:var(--dim);font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;display:flex;flex-direction:column;align-items:center;gap:4px}
.cue i{width:2px;height:34px;background:repeating-linear-gradient(var(--brass) 0 5px,transparent 5px 9px);animation:chain 1.2s linear infinite}
@keyframes chain{to{background-position:0 9px}}

/* sezioni: targa numerata e catena sotto il titolo */
.sec{padding:14vh 6vw 6vh;max-width:1200px;margin:0 auto}
.sec>h2{position:relative;display:inline-block;font-size:clamp(2rem,4.6vw,3.1rem);letter-spacing:-.02em;line-height:1.1;padding-bottom:16px}
.sec>h2::before{content:attr(data-no);display:block;width:max-content;margin-bottom:12px;padding:3px 10px;border-radius:6px;font-size:.78rem;letter-spacing:.18em;font-weight:800;color:#2a1d06;
  background:linear-gradient(#f0cd7f,var(--brass));box-shadow:inset 0 -2px 0 #0003,0 2px 0 var(--brass-d)}
.sec>h2::after{content:"";position:absolute;left:0;right:-20px;bottom:0;height:8px;border-radius:4px;
  background:radial-gradient(ellipse 5px 3px at 50% 50%,transparent 60%,var(--faint) 65% 95%,transparent 100%) 0 0/14px 8px repeat-x}
.lead2{color:var(--dim);margin-top:14px;max-width:720px;font-size:1.05rem}

/* gioco: il tavolo dell'officina */
.play{display:grid;grid-template-columns:1fr 300px;gap:22px;margin-top:34px;align-items:start}
.stage{display:flex;flex-direction:column;align-items:center;gap:6px;padding:20px 14px 18px;user-select:none;-webkit-user-select:none}
.ltitle{font-weight:800;font-size:1.08rem;text-align:center}
.tip{min-height:2.8em;max-width:520px;color:var(--dim);font-style:italic;font-size:.88rem;line-height:1.4;text-align:center}.tip.bad{color:var(--bad);font-style:normal;font-weight:800;letter-spacing:.02em}
#board{display:block;border-radius:8px;cursor:grab;touch-action:none;box-shadow:0 0 0 1px #ffffff10,0 0 0 6px #0f0d17,0 0 0 7px #ffffff0d}#board:active{cursor:grabbing}
.win{position:absolute;inset:0;z-index:3;display:grid;place-content:center;justify-items:center;gap:8px;text-align:center;padding:20px;border-radius:14px;background:#13111de0;backdrop-filter:blur(3px);opacity:0;transition:opacity .35s}
.win.on{opacity:1}
.win b{font-size:clamp(2rem,5vw,2.8rem);color:var(--brass-l);text-shadow:0 2px 0 var(--brass-d)}
.win .stars{font-size:2.4rem;letter-spacing:.12em;color:var(--brass);text-shadow:0 0 24px #d6aa5288}
.win p{color:#cfc5d8;max-width:380px}
.wbtn{display:flex;gap:10px;margin-top:8px;flex-wrap:wrap;justify-content:center}
.wbtn button,.small{background:var(--steel);border:1px solid #ffffff1c;border-radius:10px;padding:9px 16px;cursor:pointer;box-shadow:inset 0 1px 0 #ffffff12,0 3px 0 #0b0a10;transition:transform .12s,box-shadow .12s,border-color .2s}
.wbtn button:hover,.small:hover{border-color:var(--brass)}
.wbtn button:active,.small:active{transform:translateY(2px);box-shadow:inset 0 1px 0 #ffffff12,0 1px 0 #0b0a10}
.wbtn .go{background:linear-gradient(#f0cd7f,var(--brass));color:#2a1d06;border-color:var(--brass);font-weight:800;box-shadow:inset 0 -2px 0 #0003,0 3px 0 var(--brass-d)}
.side{display:flex;flex-direction:column;gap:16px;padding:20px 16px}
.hud{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:100%}
.hud div{background:#100e18;border-radius:10px;padding:8px 6px;text-align:center;box-shadow:inset 0 2px 6px #000a}
.hud span{display:block;color:var(--dim);font-size:.72rem;text-transform:uppercase;letter-spacing:.08em}
.hud b{font-size:1.35rem;font-variant-numeric:tabular-nums;color:var(--brass-l)}
.row{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.small{font-size:.84rem;padding:7px 12px}
#solve{width:100%}
.levels{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;width:100%}
.levels button{position:relative;aspect-ratio:1;background:radial-gradient(circle at 40% 35%,#3a3450,#221e30);border:0;border-radius:50%;cursor:pointer;font-weight:800;font-size:1rem;line-height:1;
  box-shadow:inset 0 1px 0 #ffffff1c,0 3px 0 #0b0a10;display:grid;place-content:center;gap:3px;transition:transform .2s}
.levels button:hover{transform:rotate(-12deg)}
.levels i{font-style:normal;font-size:.5rem;color:#9a90a8;letter-spacing:.02em}
.levels .done i{color:var(--brass)}
.levels .cur{background:radial-gradient(circle at 40% 35%,#f0cd7f,var(--brass) 60%,#9a7230);color:#2a1d06;box-shadow:inset 0 1px 0 #fff6,0 3px 0 var(--brass-d),0 0 18px #d6aa5255}
.levels .cur i{color:#5a400f}
.help{color:var(--faint);font-size:.82rem;margin-top:14px}

/* come si gioca: ingranaggi numerati uniti da una catena */
.steps{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);gap:18px;margin-top:40px;position:relative}
.steps::before{content:"";position:absolute;left:8%;right:8%;top:27px;height:8px;
  background:radial-gradient(ellipse 5px 3px at 50% 50%,transparent 60%,var(--faint) 65% 95%,transparent 100%) 0 0/14px 8px repeat-x;animation:links 3s linear infinite}
.steps:hover::before{animation-play-state:paused}
@keyframes links{to{background-position:14px 0}}
.steps li{position:relative;padding:0 4px}
.steps li b{position:relative;display:grid;place-items:center;width:62px;height:62px;margin-bottom:14px;font-size:1.25rem;font-weight:900;color:#2a1d06;
  background:url(../img/sprites/gear_brass.webp) center/100% no-repeat}
.steps li b span{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#f3d79a;box-shadow:inset 0 1px 3px #0005}
.steps li:nth-child(even) b{background-image:url(../img/sprites/gear_steel.webp);color:#13111d}
.steps h3{font-size:1.02rem;margin-bottom:6px}.steps p{color:var(--dim);font-size:.92rem}
.nums{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:44px}
.nums div{padding:16px 18px 18px}
.nums b{display:inline-block;font-size:clamp(1.8rem,4vw,2.8rem);line-height:1;font-variant-numeric:tabular-nums;padding:6px 10px;border-radius:8px;background:#0e0c14;color:var(--brass-l);
  box-shadow:inset 0 2px 8px #000,0 0 0 2px #2e2840;margin-bottom:10px;letter-spacing:.06em}
.nums span{display:block;color:var(--dim);font-size:.9rem}

/* macchine: si muovono finché non le guardi */
.machines{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px;margin-top:34px}
.mach{padding:18px 18px 20px;display:flex;flex-direction:column;gap:4px;cursor:crosshair}
.mach i{position:relative;display:grid;place-items:center;height:110px;margin-bottom:12px;border-radius:10px;background:radial-gradient(circle,#2a2540 0,#100e18 80%);box-shadow:inset 0 2px 8px #000a;overflow:visible}
.mach img{max-height:80px;max-width:72%;width:auto;transition:filter .25s}
.mach b{font-size:1.05rem}.mach span{color:var(--dim);font-size:.9rem}
.mach .state{margin-top:8px;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tin-l)}
.mach .state::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--ok);margin-right:6px;box-shadow:0 0 8px var(--ok)}
.m-heart img{animation:spin 5s linear infinite}
.m-crusher img{animation:press 1.6s ease-in-out infinite}
.m-gate img{max-height:92px;animation:door 2.2s ease-in-out infinite}
.m-bridge img{max-width:82%;transform-origin:0 50%;animation:bridge 2.6s ease-in-out infinite}
.m-belt img{max-width:86%}
.m-eye img{animation:none}.m-eye img.open{position:absolute;opacity:0;transition:opacity .15s}
.m-belt i::after{content:"";position:absolute;left:14%;right:14%;top:50%;height:22px;margin-top:-11px;pointer-events:none;
  background:repeating-linear-gradient(90deg,#c9a24f 0 5px,transparent 5px 16px);border-radius:3px;animation:cleats .6s linear infinite}
@keyframes cleats{to{background-position:16px 0}}
.m-belt:hover i::after,.m-belt:focus-within i::after{animation-play-state:paused;filter:saturate(.3) hue-rotate(180deg)}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes press{0%,100%{transform:translateY(-18px)}45%,55%{transform:translateY(16px)}}
@keyframes door{0%,100%{transform:translateY(-14px)}50%{transform:translateY(14px)}}
@keyframes bridge{0%,100%{transform:rotate(-55deg)}45%,60%{transform:rotate(0)}}
@keyframes eye{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
/* guardata: ferma e fredda (l'occhio al contrario si sveglia) */
.mach:hover img,.mach:focus-within img{animation-play-state:paused;filter:saturate(.35) brightness(.95) sepia(.1) hue-rotate(180deg)}
.mach:hover .aim,.mach:focus-within .aim{opacity:1;inset:-4px}
.mach:hover .state::before{background:var(--ice);box-shadow:0 0 8px var(--ice)}
.m-eye:hover img,.m-eye:focus-within img{filter:none}.m-eye:hover img.open,.m-eye:focus-within img.open{opacity:1;animation:eye 1s ease-in-out infinite}
.m-eye .state::before{background:var(--ice);box-shadow:0 0 8px var(--ice)}
.m-eye:hover .state::before{background:var(--ok);box-shadow:0 0 8px var(--ok)}

/* immagini: un nastro che scorre e si ferma quando lo guardi */
.belt{position:relative;margin-top:34px;overflow:hidden;padding:26px 0 30px;border-radius:16px;
  background:linear-gradient(#0000 calc(100% - 22px),#1c1928 calc(100% - 22px)),repeating-linear-gradient(90deg,#2a2538 0 14px,#1c1928 14px 30px);
  -webkit-mask:linear-gradient(90deg,#0000,#000 6%,#000 94%,#0000);mask:linear-gradient(90deg,#0000,#000 6%,#000 94%,#0000)}
.belt-track{display:flex;gap:26px;width:max-content;animation:roll 60s linear infinite;padding:0 13px}
.belt:hover .belt-track,.belt:focus-within .belt-track,.belt.held .belt-track{animation-play-state:paused}
.belt:hover .belt-track img{filter:none}
@keyframes roll{to{transform:translateX(-50%)}}
.phone{width:210px;flex:0 0 auto;border-radius:24px;border:4px solid #2e2840;overflow:hidden;background:#000;box-shadow:0 20px 40px #000a}
.phone figcaption{background:#0f0d16;color:var(--dim);font-size:.8rem;padding:9px 12px;min-height:3.2em}
.sub{margin-top:44px;font-size:1.3rem}
.video{margin:24px auto 0;border-radius:28px;overflow:hidden;border:4px solid #2e2840;background:#000;width:min(300px,78vw);box-shadow:0 30px 80px #000a}
.video video{width:100%;display:block}

footer{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;padding:26px 5vw max(26px,env(safe-area-inset-bottom));margin-top:10vh;color:var(--dim);font-size:.85rem;border-top:1px solid #ffffff12}
footer .social{display:flex;gap:16px;margin-left:auto}footer .social a{display:flex;color:var(--dim);transition:color .2s}footer .social a:hover,footer .social a:focus-visible{color:var(--fg)}footer .social svg{width:20px;height:20px;fill:currentColor}

@media(max-width:900px){
  .links>a{display:none}.links{padding:4px}
  .play{grid-template-columns:1fr}
  .side{display:grid;grid-template-columns:1fr 1fr;grid-template-areas:"hud row" "lv lv";gap:12px;align-items:center}
  .hud{grid-area:hud}.row{grid-area:row}.levels{grid-area:lv;grid-template-columns:repeat(8,1fr)}
  .steps{grid-template-columns:1fr 1fr}.steps::before{display:none}
  .nums{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .steps{grid-template-columns:1fr}
  .stage{padding:14px 6px 16px}
  .side{grid-template-columns:1fr;grid-template-areas:"hud" "row" "lv"}
  .levels{grid-template-columns:repeat(4,1fr);max-width:260px;justify-self:center}
  .phone{width:170px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .mach img,.steps::before,.cue i{animation:none!important}
  .belt{overflow-x:auto}.belt-track{animation:none}
}
.m-eye i::after{content:"";position:absolute;left:50%;top:50%;width:22px;height:22px;margin:-11px 0 0 -11px;pointer-events:none;opacity:0;
  background:url(../img/sprites/pupil.webp) center/contain no-repeat;transition:opacity .15s}
.m-eye:hover i::after,.m-eye:focus-within i::after{opacity:1;animation:peek 2s ease-in-out infinite}
@keyframes peek{0%,100%{transform:translateX(-7px)}50%{transform:translateX(7px)}}