/* FX · effetti visivi leggeri. Tutto disattivato con prefers-reduced-motion. */
.fx-cv{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
@media (prefers-reduced-motion:no-preference){
@view-transition{navigation:auto}
.fx-on main{animation:fxIn .7s cubic-bezier(.2,.7,.2,1) both}
@keyframes fxIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.fx-rv{opacity:0;transform:translate3d(0,34px,0) scale(.985);transition:opacity .9s cubic-bezier(.2,.7,.2,1) var(--fx-d,0ms),transform .9s cubic-bezier(.2,.7,.2,1) var(--fx-d,0ms)}
.fx-rv.fx-in{opacity:1;transform:none}
.fx-fig{overflow:hidden;--fx-y:0px}
.fx-fig img{transform:translate3d(0,var(--fx-y),0) scale(1.1);will-change:transform}
.fx-kb img{animation:fxKb 26s ease-in-out infinite alternate}
.fx-kb2 img{animation:fxKb2 30s ease-in-out infinite alternate}
@keyframes fxKb{from{transform:translate3d(0,var(--fx-y),0) scale(1.06)}to{transform:translate3d(-2%,calc(var(--fx-y) - 1%),0) scale(1.18)}}
@keyframes fxKb2{from{transform:translate3d(-2%,var(--fx-y),0) scale(1.18)}to{transform:translate3d(1%,calc(var(--fx-y) + 1%),0) scale(1.06)}}
.btn,.btn--ghost,button[type=submit]{position:relative;overflow:hidden;transition:transform .25s cubic-bezier(.3,1.6,.5,1),box-shadow .3s}
.btn:hover,button[type=submit]:hover{transform:translateY(-2px) scale(1.03)}
.btn:active,button[type=submit]:active{transform:scale(.96)}
.btn::after,button[type=submit]::after{content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);transition:left .7s}
.btn:hover::after,button[type=submit]:hover::after{left:130%}
/* pagina: sipario */
.fx-page{position:fixed;inset:0;z-index:99998;pointer-events:none;transform:translateX(101%);background:linear-gradient(90deg,rgba(0,0,0,.35),var(--fx-pg,#071a33) 12%);transition:transform .42s cubic-bezier(.65,0,.35,1);border-radius:60% 0 0 60%/50% 0 0 50%}
.fx-page.go{transform:translateX(0);pointer-events:auto;border-radius:0}
/* acqua: riflesso sotto i blocchi immagine */
.dhero,.pglob{position:relative;overflow:hidden}
.dhero::after,.pglob::after{content:"";position:absolute;left:0;right:0;bottom:0;height:46px;pointer-events:none;background:repeating-linear-gradient(90deg,rgba(150,190,230,.0) 0 40px,rgba(150,190,230,.10) 40px 80px);mask-image:linear-gradient(0deg,#000,transparent);-webkit-mask-image:linear-gradient(0deg,#000,transparent);animation:fxWater 9s linear infinite}
@keyframes fxWater{to{background-position:160px 0}}
/* granchio che cammina sul footer */
.fx-walkwrap{position:relative}
.fx-walk{position:absolute;left:0;top:-30px;width:100%;height:36px;pointer-events:none;overflow:hidden}
.fx-crab{position:absolute;left:-60px;bottom:0;width:46px;color:var(--gold,#c9a45c);opacity:.85;animation:fxWalk 46s linear infinite}
@keyframes fxWalk{0%{left:-60px;transform:scaleX(1)}49%{left:calc(100% + 10px);transform:scaleX(1)}50%{left:calc(100% + 10px);transform:scaleX(-1)}99%{left:-60px;transform:scaleX(-1)}100%{left:-60px;transform:scaleX(1)}}
.fx-crab .leg{transform-box:fill-box;transform-origin:50% 0;animation:fxLeg .35s ease-in-out infinite alternate}
.fx-crab .l1{animation-delay:.1s}.fx-crab .l2{animation-delay:.2s}
@keyframes fxLeg{to{transform:rotate(14deg)}}
.fx-crab .arm{transform-box:fill-box;transform-origin:50% 100%;animation:fxArm 2.4s ease-in-out infinite}
.fx-crab .ar{animation-delay:1.1s}
@keyframes fxArm{0%,70%,100%{transform:rotate(0)}85%{transform:rotate(-14deg)}}
/* cursore lux */
.fx-ring,.fx-dot{position:fixed;left:-14px;top:-14px;z-index:99999;pointer-events:none;border-radius:50%;opacity:0}
.fx-ring{width:28px;height:28px;border:1px solid rgba(212,175,95,.7);transition:opacity .3s,width .25s,height .25s,margin .25s,background .25s}
.fx-ring.on{opacity:1}.fx-ring.hov{width:52px;height:52px;margin:-12px 0 0 -12px;background:rgba(212,175,95,.12)}
.fx-dot{width:6px;height:6px;left:-3px;top:-3px;background:#d4af5f;opacity:1}
@media (hover:hover) and (pointer:fine){.fx-lux a,.fx-lux button{cursor:pointer}}
/* scintille mouse (blue) */
.fx-spark{position:fixed;z-index:99999;pointer-events:none;width:10px;height:10px;margin:-5px;background:hsl(var(--h,190) 100% 78%);clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);animation:fxSp .9s ease-out forwards}
@keyframes fxSp{to{transform:translateY(24px) rotate(120deg) scale(.1);opacity:0}}
/* alba (blue) */
.fx-blue::before{content:"";position:fixed;inset:0;z-index:1;pointer-events:none;background:radial-gradient(70% 50% at 20% 0%,rgba(255,170,120,.16),transparent 70%),radial-gradient(60% 50% at 85% 5%,rgba(120,220,255,.14),transparent 70%);animation:fxDawn 18s ease-in-out infinite alternate}
@keyframes fxDawn{to{filter:hue-rotate(40deg);opacity:.75}}
/* mascotte */
.fx-mascot{position:fixed;bottom:6px;left:0;z-index:50;width:var(--w,110px);height:auto;padding:0;border:0;background:none;cursor:pointer;transform:translate3d(var(--mx,10px),0,0) rotate(var(--lean,0deg));transition:transform .45s cubic-bezier(.3,1.4,.5,1);-webkit-tap-highlight-color:transparent}
.fx-mascot svg{display:block;width:100%;height:auto;filter:drop-shadow(0 8px 10px rgba(0,20,60,.45));animation:fxBob 3s ease-in-out infinite}
@keyframes fxBob{50%{transform:translateY(-5px)}}
.fx-mascot .ml{transform-box:fill-box;transform-origin:50% 0}
.fx-mascot.walk .ml{animation:fxLeg .25s ease-in-out infinite alternate}
.fx-mascot .m-arm{transform-box:fill-box;transform-origin:50% 100%}
.fx-mascot.wave .al{animation:fxWave .5s ease-in-out infinite alternate}
@keyframes fxWave{from{transform:rotate(-8deg)}to{transform:rotate(22deg)}}
.fx-mascot .pup{transition:transform .08s}
.fx-mascot.hop svg{animation:fxHop .7s cubic-bezier(.3,1.5,.5,1)}
@keyframes fxHop{0%{transform:scale(1,1)}25%{transform:translateY(-46px) scale(.92,1.1)}60%{transform:translateY(0) scale(1.12,.88)}100%{transform:none}}
.fx-pop{position:fixed;z-index:99997;pointer-events:none;width:12px;height:12px;margin:-6px;border-radius:50%;border:2px solid hsl(var(--h,190) 100% 80%);background:rgba(255,255,255,.2);animation:fxPop 1.1s ease-out forwards}
@keyframes fxPop{to{transform:translate(var(--dx),var(--dy)) scale(1.8);opacity:0}}
/* titoli giocosi (blue) */
.fx-blue h1 em,.fx-blue h2 em{background:linear-gradient(90deg,#7fe3ff,#ffc58a,#ff9ad0,#7fe3ff);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:fxShim 8s linear infinite}
@keyframes fxShim{to{background-position:250% 0}}
.fx-blue .btn:hover{transform:translateY(-3px) rotate(-1.5deg) scale(1.05)}
}
@media (max-width:760px){.fx-mascot{--w:84px}.fx-crab{width:34px}}
@media (prefers-reduced-motion:reduce){.fx-mascot svg{animation:none}.fx-page,.fx-ring,.fx-dot,.fx-spark{display:none}}