/* LA MAPPA DI THASSYLON: segnaposto sulla pergamena, scheda che si alza in 3D al click. */
.mappa-thassylon{position:relative;width:min(100%,860px);margin:0 auto;aspect-ratio:1147/1372;
  box-shadow:0 30px 60px rgba(0,0,0,.7);border-radius:3px;overflow:visible;font-family:'IM Fell English',serif}
.mappa-thassylon>img{display:block;width:100%;height:100%;border-radius:3px}
.mappa-thassylon .velo{position:absolute;inset:0;background:rgba(10,8,5,0);transition:background .4s;pointer-events:none;border-radius:3px}
.mappa-thassylon.aperta .velo{background:rgba(10,8,5,.45)}

/* il segnaposto */
.luogo{position:absolute;left:var(--x);top:var(--y);width:0;height:0;z-index:2}
.luogo .segno{position:absolute;left:-14px;top:-14px;width:28px;height:28px;border-radius:50%;cursor:pointer;background:none;border:0;padding:0}
.luogo .segno::before{content:"";position:absolute;inset:7px;border-radius:50%;background:#c9342a;border:2px solid #f4e3b8;box-shadow:0 0 0 2px #6b1d16,0 2px 6px rgba(0,0,0,.6)}
.luogo .segno::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid rgba(201,52,42,.9);animation:pulsa 2.6s ease-out infinite}
.luogo .etichetta{position:absolute;left:16px;top:-13px;white-space:nowrap;font-family:"IM Fell English",serif;font-size:clamp(13px,2vw,20px);letter-spacing:.02em;
  color:#8a2418;text-shadow:0 0 5px rgba(244,227,184,.95),0 0 2px #f4e3b8,0 0 1px #f4e3b8;pointer-events:none;transition:opacity .3s}
.luogo.ignoto .segno::before{background:#5b5b63}
.luogo.ignoto .etichetta{color:#f4e3b8;text-shadow:0 1px 3px #000;font-size:15px}
.luogo.ignoto .segno::after{border-color:rgba(91,91,99,.9)}
.mappa-thassylon.aperta .luogo:not(.aperto){opacity:.45}
.luogo.aperto .segno::after{animation:none;border-color:#f4e3b8}
.luogo.aperto{z-index:5}
@keyframes pulsa{0%{transform:scale(.6);opacity:1}100%{transform:scale(1.9);opacity:0}}

/* la scheda che si alza dalla pergamena */
.luogo .scheda{position:absolute;left:22px;top:-20px;width:min(300px,70vw);
  perspective:900px;pointer-events:none;z-index:6}
.luogo.sinistra .scheda{left:auto;right:22px}
.luogo.sopra .scheda{top:auto;bottom:-20px}
.luogo .scheda .foglio{background:radial-gradient(ellipse at 30% 20%,#f6e9c9 0,#e9d5a8 60%,#d9bf8a 100%);color:#2c1a12;
  border:1px solid #8a6a3b;box-shadow:0 25px 50px rgba(0,0,0,.75),inset 0 0 40px rgba(120,80,30,.35);
  transform-origin:left center;transform:rotateY(-78deg) translateX(-20px);opacity:0;
  transition:transform .55s cubic-bezier(.2,.8,.25,1.1),opacity .35s}
.luogo.sinistra .scheda .foglio{transform-origin:right center;transform:rotateY(78deg) translateX(20px)}
.luogo.aperto .scheda{pointer-events:auto}
.luogo.aperto .scheda .foglio{transform:none;opacity:1}
.scheda .veduta{height:120px;background-image:url("../images/mappe/thassylon.jpg");background-size:300%;background-position:var(--vx) var(--vy);
  border-bottom:1px solid #8a6a3b;filter:sepia(.15) contrast(1.08) brightness(1.05);position:relative}
.scheda .veduta::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 40px rgba(60,35,10,.8)}
.scheda .corpo{padding:12px 16px 14px}
.scheda h3{font-family:Cinzel,serif;font-size:17px;letter-spacing:.06em;margin:0 0 2px;color:#5a1f14}
.scheda h3 small{display:block;font-family:'IM Fell English',serif;font-style:italic;font-size:13px;letter-spacing:0;color:#6d4a2c}
.scheda p{font-size:14px;line-height:1.4;margin:8px 0 10px}
.scheda .approfondisci{display:inline-block;font-family:Cinzel,serif;font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:#f4e3b8;background:#5a1f14;padding:7px 14px;border:1px solid #2c1a12;text-decoration:none;transition:background .2s}
.scheda .approfondisci:hover{background:#8a2e1e;color:#fff}
.scheda .chiudi{position:absolute;right:6px;top:4px;background:none;border:0;color:#f4e3b8;font-size:20px;line-height:1;cursor:pointer;text-shadow:0 1px 3px #000}

/* telefono: la scheda diventa un foglio in basso allo schermo */
@media (max-width:600px){
  .luogo:not(.ignoto) .etichetta{display:none}
  .luogo.aperto{z-index:1001}
  .luogo .scheda,.luogo.sinistra .scheda,.luogo.sopra .scheda{position:fixed;left:0;right:0;bottom:0;top:auto;width:auto;perspective:none;z-index:1000}
  .luogo .scheda .foglio,.luogo.sinistra .scheda .foglio{transform:translateY(110%);transform-origin:center;border-radius:12px 12px 0 0}
  .luogo.aperto .scheda .foglio{transform:none}
  .scheda .veduta{height:100px}
}

/* la citta' che si alza dalla mappa quando passi sul segnaposto */
.luogo .citta{position:absolute;left:-60px;bottom:6px;width:160px;max-width:none;pointer-events:none;z-index:4;
  transform-origin:50% 100%;transform:perspective(600px) rotateX(70deg) translateY(30px) scale(.3);opacity:0;
  filter:blur(10px) brightness(1.6) drop-shadow(0 18px 14px rgba(0,0,0,.65));
  transition:transform 1.1s cubic-bezier(.2,.8,.25,1.05) .2s,opacity .6s .2s,filter 1.2s ease-out .5s}
.luogo:hover .citta,.luogo.aperto .citta{transform:perspective(600px) rotateX(0) translateY(0) scale(1);opacity:1;
  filter:blur(0) brightness(1) drop-shadow(0 18px 14px rgba(0,0,0,.65)) drop-shadow(0 0 12px rgba(255,230,180,.25))}
/* la nebbia da cui emerge: tre sbuffi che si gonfiano e si diradano */
.luogo .nebbia{position:absolute;left:-150px;bottom:-50px;width:340px;height:260px;pointer-events:none;z-index:3;opacity:0;filter:blur(7px)}
.luogo .nebbia,.luogo .nebbia::before,.luogo .nebbia::after{background:radial-gradient(ellipse at 50% 75%,rgba(242,240,234,1) 0,rgba(226,223,216,.85) 35%,transparent 68%);border-radius:50%}
.luogo .nebbia::before,.luogo .nebbia::after{content:"";position:absolute;inset:10% 15%;opacity:.8}
.luogo:hover .nebbia,.luogo.aperto .nebbia{animation:nebbia 3s ease-out forwards}
.luogo:hover .nebbia::before,.luogo.aperto .nebbia::before{animation:sbuffo-sx 3.2s ease-out forwards}
.luogo:hover .nebbia::after,.luogo.aperto .nebbia::after{animation:sbuffo-dx 3.4s ease-out forwards}
@keyframes nebbia{0%{opacity:0;transform:scale(.3) translateY(30px)}15%{opacity:1}55%{opacity:.7}100%{opacity:0;transform:scale(1.5) translateY(-50px)}}
@keyframes sbuffo-sx{0%{transform:translate(0,0) scale(.6)}100%{transform:translate(-60px,-70px) scale(1.4)}}
@keyframes sbuffo-dx{0%{transform:translate(0,0) scale(.6)}100%{transform:translate(60px,-50px) scale(1.3)}}
.luogo:hover{z-index:5}
@media (max-width:600px){.luogo .citta{width:90px;left:-35px}}
.scheda .veduta.foto{height:150px;background-size:cover;background-position:center;filter:sepia(.1) contrast(1.05)}
@media (max-width:600px){.scheda .veduta.foto{height:130px}}