/* Hero 3D — visual a destra del titolo (solo desktop). Puro CSS/SVG, nessuna dipendenza. */
.eih-h3d{position:absolute;right:0;width:clamp(230px,22vw,330px);aspect-ratio:1;pointer-events:none;z-index:2;perspective:1000px;display:none;opacity:0;transform:scale(.86);filter:blur(10px);transition:opacity .9s ease,transform 1s cubic-bezier(.16,1,.3,1),filter .9s ease}
.eih-h3d.in{opacity:1;transform:none;filter:none}
.eih-h3d *{box-sizing:border-box}
@media(min-width:1024px){.eih-h3d{display:block}}

.eih-h3d .h3d-glow{position:absolute;left:50%;top:50%;width:82%;height:82%;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--h3d-accent,var(--gold)) 26%,transparent),transparent 70%);filter:blur(16px);opacity:.42}
.eih-h3d .h3d-shadow{position:absolute;left:50%;bottom:3%;width:50%;height:6%;transform:translateX(-50%);border-radius:50%;background:rgba(58,50,36,.20);filter:blur(10px);opacity:.24}

/* ---- card scene ---- */
.h3d-card{position:absolute;left:50%;top:50%;width:56%;height:70%;transform:translate(-50%,-50%) rotateY(-15deg) rotateX(6deg);transform-style:preserve-3d;border-radius:22px;background:linear-gradient(155deg,color-mix(in srgb,var(--surface) 86%,var(--h3d-accent,var(--gold)) 8%),var(--bg-elevated));border:1px solid var(--border-bright);box-shadow:0 26px 50px -18px rgba(20,30,48,.5),inset 0 1px 0 rgba(255,255,255,.4);display:grid;place-items:center;animation:h3dCard 9s ease-in-out infinite}
.h3d-card svg{width:44%;height:44%;color:var(--h3d-accent,var(--gold));stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 5px 12px color-mix(in srgb,var(--h3d-accent,var(--gold)) 45%,transparent))}
@keyframes h3dCard{0%,100%{transform:translate(-50%,-50%) rotateY(-15deg) rotateX(6deg) translateY(-3%)}50%{transform:translate(-50%,-50%) rotateY(15deg) rotateX(-5deg) translateY(3%)}}
.h3d-ring{position:absolute;left:50%;top:50%;width:88%;height:88%;border:1.5px dashed color-mix(in srgb,var(--h3d-accent,var(--gold)) 52%,transparent);border-radius:50%;transform:translate(-50%,-50%) rotateX(72deg);animation:h3dRing 17s linear infinite}
.h3d-ring::after{content:"";position:absolute;top:-5px;left:50%;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:var(--h3d-accent,var(--gold));box-shadow:0 0 12px var(--h3d-accent,var(--gold))}
@keyframes h3dRing{to{transform:translate(-50%,-50%) rotateX(72deg) rotateZ(360deg)}}

/* ---- globe scene (Terra) ---- */
.h3d-globe{position:absolute;left:50%;top:50%;width:66%;height:66%;transform:translate(-50%,-50%) rotate(-12deg);border-radius:50%;overflow:hidden;box-shadow:0 0 0 1px color-mix(in srgb,var(--h3d-accent,var(--blue)) 30%,transparent),0 0 30px 4px color-mix(in srgb,var(--h3d-accent,var(--blue)) 30%,transparent),inset -14px -16px 38px rgba(0,0,0,.55)}
.h3d-globe .g-ocean{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 36% 30%,#3a86c4,#1f5e96 40%,#123f6c 66%,#0a2547)}
.h3d-globe .g-strip{position:absolute;top:0;bottom:0;left:0;width:400%;background:url("/assets/earth-blue-marble.jpg") repeat-x;background-size:50% 100%;animation:h3dSpin 34s linear infinite}
.h3d-globe .g-shade{position:absolute;inset:0;border-radius:50%;background:radial-gradient(ellipse 32% 26% at 31% 26%,rgba(255,255,255,.45),rgba(255,255,255,0) 70%),linear-gradient(108deg,transparent 40%,rgba(3,10,22,.55) 82%),radial-gradient(circle at 50% 50%,transparent 50%,rgba(3,10,22,.42) 74%,rgba(2,7,16,.82) 100%)}
.h3d-globe .g-atmo{position:absolute;inset:-1px;border-radius:50%;box-shadow:inset 0 0 14px color-mix(in srgb,#bcdcff 70%,transparent)}
.h3d-orbit{position:absolute;left:50%;top:50%;width:98%;height:98%;transform:translate(-50%,-50%);animation:h3dRing2 13s linear infinite}
.h3d-orbit .g-arc{position:absolute;inset:0;border-radius:50%;border:1.5px dashed color-mix(in srgb,var(--h3d-accent,var(--blue)) 45%,transparent);border-bottom-color:transparent;border-left-color:transparent}
.h3d-plane{position:absolute;top:50%;left:50%;width:11%;height:11%;margin:-5.5% 0 0 -5.5%;transform:translateX(440%) rotate(48deg);color:var(--coral)}
.h3d-plane svg{width:100%;height:100%;stroke:none;fill:currentColor;filter:drop-shadow(0 0 8px color-mix(in srgb,var(--coral) 60%,transparent))}
.h3d-pin{position:absolute;width:9px;height:9px;border-radius:50%;background:var(--gold);box-shadow:0 0 10px var(--gold)}
.h3d-pin.s{top:30%;left:14%}.h3d-pin.e{top:64%;right:16%}
@keyframes h3dSpin{to{transform:translateX(-50%)}}
@keyframes h3dRing2{to{transform:translate(-50%,-50%) rotateZ(360deg)}}

/* ---- mapsq scene (mappa quadrata + lente) ---- */
.h3d-mapsq{position:absolute;left:50%;top:50%;width:88%;height:88%;transform:translate(-50%,-50%);border-radius:18px;overflow:hidden;-webkit-mask-image:linear-gradient(to right,transparent,#000 18%,#000 82%,transparent),linear-gradient(to bottom,transparent,#000 18%,#000 82%,transparent);mask-image:linear-gradient(to right,transparent,#000 18%,#000 82%,transparent),linear-gradient(to bottom,transparent,#000 18%,#000 82%,transparent);-webkit-mask-composite:source-in;mask-composite:intersect}
.h3d-mapsq .m-tex{position:absolute;inset:-6%;background:url("/assets/earth-blue-marble.jpg") no-repeat;background-size:340% auto;background-position:53% 27%;animation:h3dMapZoom 22s ease-in-out infinite}
.h3d-mapsq .m-grid{position:absolute;inset:0;background:linear-gradient(color-mix(in srgb,var(--h3d-accent,var(--green)) 16%,transparent) 1px,transparent 1px) 0 0/100% 18%,linear-gradient(90deg,color-mix(in srgb,var(--h3d-accent,var(--green)) 16%,transparent) 1px,transparent 1px) 0 0/18% 100%;opacity:.5}
.h3d-mapsq .m-pin{position:absolute;width:8px;height:8px;border-radius:50% 50% 50% 0;background:var(--coral);transform:rotate(-45deg);box-shadow:0 0 9px color-mix(in srgb,var(--coral) 70%,transparent)}
.h3d-mapsq .m-pin.a{top:38%;left:46%}.h3d-mapsq .m-pin.b{top:54%;left:58%}.h3d-mapsq .m-pin.c{top:30%;left:60%}
.h3d-lens{position:absolute;top:18%;right:8%;width:40%;height:40%;border-radius:50%;overflow:hidden;box-shadow:0 14px 30px -8px rgba(20,30,48,.55),0 0 0 5px color-mix(in srgb,var(--surface) 90%,transparent),0 0 0 7px var(--border-bright),inset 0 0 0 1px rgba(255,255,255,.5);animation:h3dLensBob 6s ease-in-out infinite}
.h3d-lens .m-tex{position:absolute;inset:-30%;background:url("/assets/earth-blue-marble.jpg") no-repeat;background-size:760% auto;background-position:54% 26%}
.h3d-lens .l-glass{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 32% 26%,rgba(255,255,255,.55),rgba(255,255,255,0) 46%),radial-gradient(circle at 70% 78%,rgba(7,18,34,.32),transparent 50%)}
.h3d-lens .l-handle{position:absolute;right:-13%;bottom:-13%;width:34%;height:11%;border-radius:6px;background:linear-gradient(90deg,color-mix(in srgb,var(--taupe) 70%,#000),var(--taupe));transform:rotate(45deg);transform-origin:left center;box-shadow:0 3px 8px rgba(20,30,48,.4)}
@keyframes h3dMapZoom{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
@keyframes h3dLensBob{0%,100%{transform:translateY(-4%)}50%{transform:translateY(4%)}}

@media(prefers-reduced-motion:reduce){
  .eih-h3d{transform:none;filter:none;transition:opacity .3s ease}
  .h3d-card,.h3d-ring,.h3d-orbit,.h3d-globe .g-strip,.h3d-mapsq .m-tex,.h3d-lens{animation:none}
  .h3d-card{transform:translate(-50%,-50%) rotateY(-12deg) rotateX(5deg)}
  .h3d-mapsq .m-tex{transform:scale(1.06)}
}