/* Logo in barra: circuiti che escono dal marchio e afferrano DROP e HACK */
.nav .brand{--lc-s:4px}
.nav .brand .lc{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.nav .brand .lc--back{z-index:0}
.nav .brand .lc--front{z-index:2;filter:drop-shadow(0 0 2px rgba(var(--neon-violet-rgb),.7)) drop-shadow(0 0 5px rgba(var(--neon-blue-rgb),.45))}

/* scritta: si allontana di poco, resta ferma finche i circuiti la tengono */
@media (hover:hover){
.nav .brand:hover .brand__word:nth-of-type(1){transform:translateX(calc(var(--lc-s) * -1))}
.nav .brand:hover .brand__word:nth-of-type(3){transform:translateX(var(--lc-s))}
}
.nav .brand.is-grab .brand__word:nth-of-type(1){transform:translateX(calc(var(--lc-s) * -1))}
.nav .brand.is-grab .brand__word:nth-of-type(3){transform:translateX(var(--lc-s))}
.nav .brand:hover .brand__word,.nav .brand.is-grab .brand__word{transition-delay:0s}

/* piste */
.nav .brand .lc__t,.nav .brand .lc__b{fill:none;stroke-linejoin:round;stroke-linecap:butt;stroke-dasharray:100 200;stroke-dashoffset:101}
.nav .brand .lc__t{stroke-width:1.4;transition:stroke-dashoffset .34s cubic-bezier(.5,0,.75,0) calc(var(--i,0) * .04s)}
.nav .brand.is-grab .lc__t{stroke-dashoffset:0;transition:stroke-dashoffset .72s cubic-bezier(.65,0,.35,1) calc(var(--i,0) * .07s)}

/* staffa che afferra la scritta */
.nav .brand .lc__b{stroke:#f3e9ff;stroke-width:2.4;stroke-linejoin:miter;transition:stroke-dashoffset .12s linear}
.nav .brand.is-grab .lc__b{stroke-dashoffset:0;transition:stroke-dashoffset .24s ease-out .62s}
.nav .brand .lc__k{transform:translateX(0)}
.nav .brand.is-grab .lc__k{animation:lcClamp .4s cubic-bezier(.3,1.5,.5,1) .66s both}
@keyframes lcClamp{from{transform:translateX(var(--kx,4px))}to{transform:translateX(0)}}

/* impulso di luce lungo le piste mentre la scritta e tenuta */
.nav .brand .lc__p{fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:round;stroke-dasharray:4 96;stroke-dashoffset:0;opacity:0;transition:opacity .15s}
.nav .brand.is-grab .lc__p{opacity:.95;transition:opacity .3s .86s;animation:lcRun 1.5s ease-in-out calc(.86s + var(--i,0) * .37s) infinite alternate}
@keyframes lcRun{from{stroke-dashoffset:0}to{stroke-dashoffset:-96}}

/* nodi: porte sul logo e contatti sulla staffa */
.nav .brand .lc__n{fill:#fff;opacity:0;transition:opacity .12s}
.nav .brand.is-grab .lc__n{opacity:1;transition:opacity .2s var(--nd,0s)}

@media (prefers-reduced-motion:reduce){.nav .brand .lc{display:none}}

/* glitch del logo: fasce dello stesso file e due sagome colorate, solo durante lo scatto */
.nav .brand .lgl{position:absolute;left:50%;top:50%;width:var(--gw,60px);height:var(--gw,60px);transform:translate(-50%,-50%);pointer-events:none;opacity:0;filter:drop-shadow(0 0 10px rgba(10,107,255,.5))}
.nav .brand.is-glitch .lgl{opacity:1}
.nav .brand.is-glitch .brand__img{opacity:0}
.nav .brand .lgl i{position:absolute;inset:0;display:block;background:var(--lg-src) center/100% 100% no-repeat;will-change:transform}
.nav .brand .lgl .lgl__g{background:var(--c);-webkit-mask:var(--lg-src) center/100% 100% no-repeat;mask:var(--lg-src) center/100% 100% no-repeat;mix-blend-mode:screen;opacity:0}
@media (prefers-reduced-motion:reduce){.nav .brand .lgl{display:none}}
