/* Il mio universo: stessa grafica del resto del sito (scuro, Familjen Grotesk, accento arancio). */
:root{--bg:#0a0a09;--s:#161614;--ink:#e9e6df;--mut:#7d7b74;--ac:#f0a35a;--line:#2a2a27;--d:'Familjen Grotesk','Helvetica Neue',Arial,sans-serif;--e:'Instrument Serif',Georgia,serif;--g:clamp(18px,3.4vw,56px)}
*,*::before,*::after{box-sizing:border-box;margin:0}
html{background:var(--bg)}
body{background:var(--bg);color:var(--ink);font:400 16px/1.55 var(--d);-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--ac);outline-offset:3px}
.bar{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:18px var(--g);font-size:14px;background:linear-gradient(180deg,rgba(10,10,9,.9),transparent)}
.back{position:relative;padding:4px 0}.back::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .4s}.back:hover::after{transform:scaleX(1)}
.langs{display:flex;gap:14px}.langs button{opacity:.5;font-size:13px;padding:4px 0}.langs button[aria-pressed=true]{opacity:1}
.wrap{padding:0 var(--g)}
.hero{padding:clamp(90px,10vw,130px) 0 clamp(30px,5vw,70px)}
.big{font-weight:700;letter-spacing:-.045em;line-height:.9;font-size:clamp(52px,12vw,200px)}
.mut{color:var(--mut)}
.meta{font-size:12px;color:var(--mut);letter-spacing:.02em}
.w{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(20px,3vw,50px);padding:clamp(60px,9vw,130px) 0;border-top:1px solid var(--line)}
.w .hd{grid-column:1/6;position:sticky;top:90px;align-self:start}
.w .hd h2{font-weight:600;letter-spacing:-.035em;line-height:1;font-size:clamp(32px,4.6vw,72px);margin:14px 0 18px}
.w .hd h2 em{font-family:var(--e);font-weight:400}
.w .hd p{color:var(--mut);max-width:44ch}
.w .hd .ph{margin-top:26px;aspect-ratio:4/3;background:var(--s) center/cover;border-radius:2px;width:100%}
.w .it{grid-column:7/13}
.i{padding:22px 0 26px;border-top:1px solid var(--line)}.i:first-child{border-top:0;padding-top:0}
.i h3{font-weight:600;font-size:clamp(20px,2vw,28px);letter-spacing:-.02em;line-height:1.15;margin:6px 0 8px}
.i p{color:var(--mut);max-width:52ch}
.i .ph{margin-top:16px;aspect-ratio:16/10;background:var(--s) center/cover;width:100%;border-radius:2px}
.i .go{display:inline-block;margin-top:14px;border:1px solid var(--ink);border-radius:99px;padding:8px 18px;font-size:14px;transition:background .3s,color .3s}.i .go:hover{background:var(--ink);color:var(--bg)}
.end{padding:clamp(70px,12vw,170px) 0;border-top:1px solid var(--line)}
.end h2{font-weight:600;letter-spacing:-.035em;line-height:.95;font-size:clamp(34px,6vw,96px);max-width:14ch}
.end p{color:var(--mut);max-width:50ch;margin:22px 0 30px}
.ec{display:flex;flex-wrap:wrap;gap:14px}
.ec a{border:1px solid var(--ink);border-radius:99px;padding:10px 22px;font-size:14px;transition:background .3s,color .3s}.ec a:hover{background:var(--ink);color:var(--bg)}
.foot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:30px 0 40px;border-top:1px solid var(--line);font-size:12px;color:var(--mut)}
.rv{opacity:0;transform:translateY(18px);transition:opacity .8s,transform .8s cubic-bezier(.2,.7,.2,1)}.rv.in{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

#sp{position:fixed;top:0;left:0;right:0;height:3px;z-index:70;pointer-events:none;opacity:0;transition:opacity .4s;--v:0}
#sp.on{opacity:1}
#sp i{display:block;height:100%;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,rgba(233,230,223,.55),var(--ac));will-change:transform}
#sp b{position:absolute;top:-1px;left:0;width:64px;height:5px;transform:translateX(-100%);border-radius:3px;background:linear-gradient(90deg,transparent,#fff);box-shadow:0 0 10px var(--ac),0 0 22px var(--ac);opacity:calc(.3 + var(--v)*.7)}
/* percorso (Radici): linea che si illumina mentre scorri */
.it.tl{position:relative;padding-left:34px;--tp:0}
.it.tl::before{content:"";position:absolute;left:6px;top:8px;bottom:8px;width:2px;background:var(--line)}
.it.tl .tf{position:absolute;left:6px;top:8px;bottom:8px;width:2px;transform-origin:top;transform:scaleY(var(--tp));background:linear-gradient(180deg,rgba(233,230,223,.15),var(--ac))}
.it.tl .tf::after{content:"";position:absolute;left:-2px;bottom:-3px;width:6px;height:26px;border-radius:3px;background:linear-gradient(180deg,transparent,#fff);box-shadow:0 0 10px var(--ac),0 0 24px var(--ac);opacity:calc(var(--tp)*20)}
.it.tl .i{position:relative;opacity:.4;transition:opacity .5s,transform .8s cubic-bezier(.2,.7,.2,1)}
.it.tl .i::before{content:"";position:absolute;left:-34px;top:6px;width:14px;height:14px;box-sizing:border-box;border-radius:50%;background:var(--bg);border:2px solid var(--line);transition:border-color .4s,background .4s,box-shadow .4s}
.it.tl .i{border-top:0;padding:0 0 34px}.it.tl .i:last-child{padding-bottom:0}
.it.tl .i.on{opacity:1}
.it.tl .i.on::before{border-color:var(--ac);background:var(--ac);box-shadow:0 0 0 4px rgba(240,163,90,.18),0 0 14px var(--ac)}

/* layout alternato: Motors a specchio, Foto e video a tutta larghezza con griglia */
.w.r .hd{grid-column:8/13;grid-row:1}.w.r .it{grid-column:1/7;grid-row:1}
.w.r .hd h2{text-align:right}.w.r .hd p{margin-left:auto;text-align:right}
.w.g .hd{grid-column:1/13;position:static;display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(20px,3vw,50px);align-items:end}
.w.g .hd .meta{grid-column:1/13}.w.g .hd h2{grid-column:1/8;font-size:clamp(40px,7vw,120px);margin:0}.w.g .hd p{grid-column:8/13;margin:0}.w.g .hd .ph{grid-column:1/13;aspect-ratio:21/9;margin-top:clamp(10px,2vw,30px)}
.w.g .it{grid-column:1/13;display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(24px,3vw,50px)}
.w.g .i,.w.g .i:first-child{border-top:1px solid var(--line);padding:22px 0 0}
.w.g .i:nth-child(2n){margin-top:clamp(30px,6vw,90px)}
.w.g .i .ph{aspect-ratio:4/5}
@media(max-width:860px){.w .hd,.w .it,.w.r .hd,.w.r .it{grid-column:1/13;grid-row:auto;position:static}.w.r .hd h2,.w.r .hd p{text-align:left;margin-left:0}.w.g .hd{display:block}.w.g .hd h2{margin:12px 0 18px}.w.g .hd .ph{aspect-ratio:4/3}.w.g .it{grid-template-columns:1fr}.w.g .i:nth-child(2n){margin-top:0}}