/* LA CARTA DEL MONDO IN HOME
   Generata dalla prova in D:\tnm-lavoro\sito-nuovo\mappa (modello3.html + genera3.pl).
   I pezzi (.pezzo) si sollevano al passaggio del mouse e portano alle pagine. */
.carta-mondo{font-family:'IM Fell English',Georgia,serif;color:#3a2810;display:flex;justify-content:center}
.carta{position:relative;width:min(100%,1200px);aspect-ratio:1200/1160;border-radius:4px;overflow:hidden;
  background:#1d2a36 url(../images/carta/sfondo-mappe.jpg) center / cover no-repeat;
  box-shadow:0 30px 60px rgba(0,0,0,.75), 0 0 0 1px rgba(255,230,180,.25), inset 0 0 140px rgba(0,0,0,.55)}
.carta > svg.sfondo, .carta > svg.grana{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.carta > svg.grana{mix-blend-mode:overlay;opacity:.25}
.cornice{position:absolute;inset:1.6%;border:1px solid rgba(241,228,196,.45);outline:3px double rgba(241,228,196,.35);outline-offset:4px;pointer-events:none}
.titolo{position:absolute;left:3.5%;top:2.6%;font-family:Cinzel,serif;font-size:clamp(11px,1.5vw,20px);letter-spacing:.18em;color:#f1e4c4;text-shadow:0 1px 3px #000,0 0 10px rgba(0,0,0,.8);opacity:.95;pointer-events:none}
.titolo small{display:block;font-family:'IM Fell English',serif;font-style:italic;letter-spacing:.04em;font-size:.8em;text-transform:none;opacity:.8}

.pezzo{position:absolute;display:block;text-decoration:none;color:inherit;transform-style:preserve-3d;
  transition:transform .45s cubic-bezier(.2,.8,.3,1.1), filter .45s;
  filter:drop-shadow(0 3px 3px rgba(0,0,0,.6)) drop-shadow(0 0 4px rgba(255,235,190,.45));will-change:transform;cursor:pointer}
.pezzo svg{width:100%;height:100%;display:block;overflow:visible}
.pezzo:hover{transform:perspective(1100px) rotateX(var(--rx,10deg)) rotateY(var(--ry,-8deg)) translateZ(46px) scale(1.035);
  filter:drop-shadow(0 28px 22px rgba(50,28,0,.5)) drop-shadow(0 0 6px rgba(255,235,180,.55));z-index:5}
.pezzo .nome{position:absolute;left:50%;bottom:-6%;transform:translateX(-50%);white-space:nowrap;
  font-family:Cinzel,serif;font-size:clamp(10px,1.4vw,19px);letter-spacing:.14em;color:#f1e4c4;text-shadow:0 1px 3px #000,0 0 10px rgba(0,0,0,.9);text-align:center;pointer-events:none;transition:all .35s}
.pezzo .nome i{display:block;font-family:'IM Fell English',serif;font-style:italic;letter-spacing:.03em;font-size:.78em;opacity:.75}
.pezzo .nome b{display:block;font-family:'IM Fell English',serif;font-weight:normal;font-size:.8em;letter-spacing:.05em;color:#ffd98a;opacity:0;max-height:0;overflow:hidden;transition:all .35s}
.pezzo:hover .nome b{opacity:1;max-height:2em}
.pezzo.sx .nome{left:50%;bottom:auto;top:101%}
.pezzo.dx .nome{left:32%;bottom:auto;top:92%}

.terra{fill:url(#tratteggio);stroke:none}
.costa{fill:none;stroke:#4a3315;stroke-width:calc(1.3 * var(--sw,1));stroke-linejoin:round}
.costa2{fill:none;stroke:#f1e4c4;stroke-width:calc(5 * var(--sw,1));opacity:.35;stroke-linejoin:round}
.alone{fill:none;stroke:#f1e4c4;stroke-width:calc(11 * var(--sw,1));opacity:.15;stroke-linejoin:round}
.tratteggio-taglio line{stroke:#4a3315;stroke-width:calc(1.2 * var(--sw,1));stroke-dasharray:calc(3 * var(--sw,1)) calc(2.5 * var(--sw,1));opacity:.7}
.pergamena{opacity:.95}

.sole{left:28%;top:-4%;width:24%;height:24%}
.sole .astro{-webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 48%, #000 50%, transparent 76%);mask-image:radial-gradient(ellipse 50% 50% at 50% 48%, #000 50%, transparent 76%);filter:none}
.luna{left:27%;top:66%;width:20%;height:27%}
.sole .nome{bottom:6%}  .luna .nome{bottom:2%}
.astro{width:100%;height:100%;object-fit:contain;display:block;filter:drop-shadow(0 6px 10px rgba(0,0,0,.6))}
.barca{left:40%;top:33%;width:16%;height:9.9%;animation:rotta 34s ease-in-out infinite;z-index:3}
.barca img{width:100%;height:100%;object-fit:contain;display:block;animation:verso 34s ease-in-out infinite;filter:drop-shadow(0 4px 6px rgba(0,0,0,.7)) drop-shadow(0 0 10px rgba(255,235,190,.35))}
.barca:hover,.barca:hover img{animation-play-state:paused}
.barca .nome{bottom:-38%;left:50%}
.barca:hover .scafo{animation-play-state:paused}
.barca img.scafo{animation:verso 34s ease-in-out infinite, beccheggio 3.2s ease-in-out infinite;transform-origin:50% 70%}
@keyframes rotta{0%{translate:0 0}48%,50%{translate:0.3vw 30vw}98%,100%{translate:0 0}}
@keyframes verso{0%,48%{scale:1 1}50%,98%{scale:-1 1}100%{scale:1 1}}
@keyframes beccheggio{0%,100%{transform:rotate(-4deg) translateY(0)}50%{transform:rotate(4deg) translateY(-2px)}}
@media (max-width:700px){.pezzo:hover{transform:translateZ(0) scale(1.03)}}