/* ---------- attrezzi del mestiere sullo sfondo (squadra, righello, matita, compasso, goniometro) ---------- */
.tools{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;color:var(--a)}
.tl{position:absolute;fill:none;stroke:currentColor;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round;opacity:.06}
html[data-theme="light"] .tools{color:var(--b)}
html[data-theme="light"] .tl{opacity:.08}
.tl *{vector-effect:non-scaling-stroke}
.sq{width:clamp(140px,17vw,300px);left:2.5%;top:20%;animation:tf1 21s ease-in-out infinite alternate}
.rl{width:clamp(300px,36vw,620px);right:-5%;top:14%;transform:rotate(-26deg);animation:tf2 26s ease-in-out infinite alternate}
.pn{width:clamp(220px,26vw,440px);left:5%;bottom:9%;transform:rotate(-8deg);animation:tf4 17s ease-in-out infinite alternate}
.pn .pen{animation:pen 7s ease-in-out infinite alternate}
.pn .trail{stroke-dasharray:6 8;animation:trail 3.5s linear infinite}
.cp{height:clamp(190px,calc(30vh / var(--z,1)),360px);width:auto;right:9%;bottom:7%;animation:tf5 19s ease-in-out infinite alternate}
.cp .cl{transform-origin:100px 30px;animation:cl 8s ease-in-out infinite alternate}
.cp .cr{transform-origin:100px 30px;animation:cr 8s ease-in-out infinite alternate}
.cp .arc{stroke-dasharray:4 7;opacity:.7;animation:trail 6s linear infinite}
.pt{width:clamp(140px,15vw,250px);left:46%;top:64%;animation:tf3 24s ease-in-out infinite alternate}
@keyframes tf1{from{transform:translate(0,0) rotate(-10deg)}to{transform:translate(70px,-80px) rotate(12deg)}}
@keyframes tf2{from{transform:rotate(-30deg) translate(0,0)}to{transform:rotate(-18deg) translate(-90px,60px)}}
@keyframes tf3{from{transform:translate(0,0) rotate(-12deg)}to{transform:translate(-70px,50px) rotate(14deg)}}
@keyframes tf4{from{transform:rotate(-12deg) translate(0,0)}to{transform:rotate(-3deg) translate(50px,-40px)}}
@keyframes tf5{from{transform:translate(0,0) rotate(-5deg)}to{transform:translate(-40px,-50px) rotate(5deg)}}
@keyframes pen{from{transform:translateX(-30px)}to{transform:translateX(34px)}}
@keyframes trail{from{stroke-dashoffset:0}to{stroke-dashoffset:-28}}
@keyframes cl{from{transform:rotate(12deg)}to{transform:rotate(-6deg)}}
@keyframes cr{from{transform:rotate(-12deg)}to{transform:rotate(6deg)}}
@media(max-width:760px){.pt,.rl{display:none}.tl{opacity:.05}}

/* nella hero gli attrezzi stanno sopra l'immagine di fondo ma sotto i testi */
.hero{position:relative}
.tools.in-hero{position:absolute;z-index:1}
.hero>.wrap{position:relative;z-index:2}
.tools.in-hero .tl{opacity:.085}