/* ============ Stile ed effetti comuni a tutto il sito (stesso linguaggio del Merch) ============ */
:root{--fx-display:"Anton","Poppins",Impact,sans-serif}

/* ---- logo con gradiente come nel merch ---- */
.logo,.sp-logo,.auth-logo{background:linear-gradient(135deg,color-mix(in srgb,var(--lane) 55%,#fff) 0%,var(--lane) 45%,#3b82f6 100%)!important}

/* ---- titoli: stesso carattere streetwear del merch ---- */
.sh h2,.hcol .sh h2{font-family:var(--fx-display)!important;font-weight:400!important;text-transform:uppercase!important;letter-spacing:.015em!important;font-size:clamp(1.55rem,3.2vw,2.2rem)!important;line-height:1!important}
.hcol .sh h2{font-size:clamp(1.4rem,2.6vw,1.8rem)!important}
.area-t{font-family:var(--fx-display)!important;font-weight:400!important;text-transform:uppercase!important;letter-spacing:.015em!important;font-size:clamp(2rem,6vw,3rem)!important}

/* ---- hero della home ---- */
.hero{--mx:0;--my:0;isolation:isolate}
.hero::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.16;mix-blend-mode:overlay;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
.hero svg{transition:transform .8s cubic-bezier(.2,.9,.3,1);transform:translate(calc(var(--mx)*-18px),calc(var(--my)*-10px)) scale(1.04)}
.hero-txt{z-index:1;transition:transform .8s cubic-bezier(.2,.9,.3,1);transform:translate(calc(var(--mx)*10px),calc(var(--my)*6px))}
.hl{font-family:var(--fx-display)!important;font-weight:400!important;text-transform:uppercase!important;letter-spacing:.01em!important;font-size:clamp(2.6rem,6.6vw,5.2rem)!important;line-height:.92!important}
.hero .hl span{background:linear-gradient(100deg,#5fd0f5 0%,#9fe6ff 45%,#5aa2ff 100%);-webkit-background-clip:text;background-clip:text;color:transparent!important;filter:drop-shadow(0 0 22px rgba(95,208,245,.35))}

/* ---- icone rapide della home ---- */
.quick i{background:linear-gradient(140deg,color-mix(in srgb,var(--lane) 70%,#fff) 0%,var(--lane) 50%,color-mix(in srgb,var(--lane) 70%,#3b82f6) 100%)!important}
.quick i::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);transform:translateX(-120%);transition:transform .6s}
.quick a:hover i::after,.quick a:focus-visible i::after{transform:translateX(120%)}

/* ---- card: luce che segue il cursore e bordo che si accende ---- */
.item,.poll,.rep,.rcard,.auth-card,.mx-ord{position:relative}
.item::after,.poll::after,.rep::after,.rcard::after,.mx-ord::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
 background:radial-gradient(420px circle at var(--hx,50%) var(--hy,0%),color-mix(in srgb,var(--lane) 14%,transparent),transparent 45%);opacity:0;transition:opacity .3s}
.item:hover::after,.poll:hover::after,.rep:hover::after,.rcard:hover::after,.mx-ord:hover::after{opacity:1}
.item>*,.poll>*,.rep>*,.rcard>*{position:relative;z-index:1}
.date{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--lane) 22%,transparent)}

/* ---- pulsanti: riflesso al passaggio ---- */
button.btn,.mx-add,.mx-fab,#menu #accLink{isolation:isolate}
button.btn::before,.mx-add::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);transform:translateX(-120%);transition:transform .6s}
button.btn:hover::before,.mx-add:hover::before{transform:translateX(120%)}

/* ---- ingresso delle pagine e dei contenuti ---- */
@media (prefers-reduced-motion:no-preference){
 .page.fx-enter>.sh,.page.fx-enter>.note,.page.fx-enter .hero-txt,.page.fx-enter .area-t,.page.fx-enter .area-s{animation:fxUp .6s cubic-bezier(.2,.9,.3,1) backwards}
 .page.fx-enter .area-s{animation-delay:60ms}
 .page.fx-enter .fx-i{animation:fxUp .6s cubic-bezier(.2,.9,.3,1) backwards;animation-delay:calc(var(--i,0) * 55ms + 80ms)}
 .page.fx-enter .quick a{animation:fxPop .55s cubic-bezier(.2,1.4,.4,1) backwards;animation-delay:calc(var(--i,0) * 50ms + 200ms)}
 @keyframes fxUp{from{opacity:0;transform:translateY(18px)}}
 @keyframes fxPop{from{opacity:0;transform:scale(.6)}}
}

/* ---- piè di pagina con la strada ---- */
footer{position:relative;border-top:0!important}
footer::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:repeating-linear-gradient(90deg,var(--lane) 0 26px,transparent 26px 46px);opacity:.5}