/* ---------- transizioni dalla mappa al filmato ---------- */
.mt{position:fixed;inset:0;z-index:85;overflow:hidden;transition:opacity .26s linear}
.mt[hidden]{display:none!important}
.mt.bye{opacity:0}
.mt-vid{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;opacity:0;background:#02070d}
.mt-bg{position:absolute;inset:-6%;width:112%;height:112%;max-width:none;object-fit:cover;filter:blur(26px) brightness(.5);opacity:0;transition:opacity .8s;pointer-events:none}
.mt.fit .mt-vid{object-fit:contain;background:transparent}
.mt.fit.live .mt-bg{opacity:1}
.mt-stage{position:absolute;inset:0;z-index:1}
.mt-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.mt-bars::before,.mt-bars::after{content:"";position:absolute;left:0;right:0;height:0;background:#000;transition:height 1.1s var(--ease);z-index:3}
.mt-bars::before{top:0}.mt-bars::after{bottom:0}
.mt.live .mt-bars::before,.mt.live .mt-bars::after{height:7.5vh}
.mt-title{position:absolute;left:0;right:0;bottom:calc(7.5vh + 9vh);margin:0;padding:0 20px;text-align:center;color:#fff;z-index:4;pointer-events:none;text-shadow:0 4px 34px rgba(0,0,0,.55)}
.mt-title small{display:block;font:500 .74rem var(--f-mono);letter-spacing:.34em;text-transform:uppercase;color:#f0cf8c;margin-bottom:12px;opacity:0;transform:translateY(10px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.mt-title span{display:inline-block;max-width:100%;overflow-wrap:break-word;text-wrap:balance;font-family:var(--f-display);font-size:clamp(2.2rem,min(10vw,8vh),7rem);line-height:.95;opacity:0;letter-spacing:.06em;filter:blur(14px);transform:scale(1.04);transition:opacity 1.6s var(--ease),letter-spacing 2.4s var(--ease),filter 1.6s var(--ease),transform 2.4s var(--ease)}
.mt.title .mt-title small{opacity:1;transform:none}
.mt.title .mt-title span{opacity:1;letter-spacing:.01em;filter:none;transform:none}
.mt-credit{position:absolute;left:16px;bottom:calc(7.5vh + 14px);margin:0;z-index:4;font:500 .75rem var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.72);opacity:0;transition:opacity .8s}
.mt.live .mt-credit{opacity:1}
.mt-skip{position:absolute;right:16px;bottom:calc(7.5vh + 12px);z-index:5;font:500 .82rem var(--f-body);color:#fff;background:rgba(3,10,18,.5);border:1px solid rgba(255,255,255,.35);border-radius:999px;padding:10px 18px;cursor:pointer;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);opacity:0;animation:mt-in .6s 1.2s forwards}
.mt.closing .mt-skip,.mt.closing .mt-credit,.mt.closing .mt-title{opacity:0!important;transition:opacity .25s}
@keyframes mt-in{to{opacity:1}}
html.mt-open,html.mt-open body{overflow:hidden}

/* ---- persiane ---- */
.ps{position:absolute;inset:0;perspective:1100px;perspective-origin:50% 50%;overflow:hidden}
.ps-win{position:absolute;inset:-1.5%;transform-style:preserve-3d}
.ps-panel{position:absolute;top:0;bottom:0;width:49.8%;transform-style:preserve-3d;backface-visibility:hidden}
.ps-l{left:0;transform-origin:0 50%}.ps-r{right:0;transform-origin:100% 50%}
.ps-slats{position:absolute;left:7%;right:7%;top:5.5%;bottom:5.5%;display:flex;flex-direction:column;transform-style:preserve-3d}
.ps-slat{display:block;flex:1;margin:-.42vh 0;transform-origin:50% 50%;border-radius:2px;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 2px,rgba(0,0,0,.045) 2px 6px,rgba(255,255,255,0) 6px 11px),
    linear-gradient(to bottom,#a9c1a3 0%,#7c9a7b 22%,#61805f 62%,#3e5442 92%,#2c3b2f 100%);
  box-shadow:0 3px 4px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.18)}
.ps-stile,.ps-rail{position:absolute;display:block;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 3px,rgba(0,0,0,.05) 3px 8px),linear-gradient(to right,#4c6750,#6d8b6c 40%,#5b7a5b 70%,#3c5340);
  box-shadow:0 0 12px rgba(0,0,0,.45),inset 0 0 0 1px rgba(0,0,0,.25)}
.ps-stile{top:0;bottom:0;width:7.4%}.ps-stile.a{left:0}.ps-stile.b{right:0}
.ps-rail{left:0;right:0;height:5.6%;background:repeating-linear-gradient(90deg,rgba(255,255,255,.03) 0 3px,rgba(0,0,0,.05) 3px 8px),linear-gradient(to bottom,#6d8b6c,#55735a 60%,#3c5340)}
.ps-rail.t{top:0}.ps-rail.b{bottom:0}.ps-rail.m{top:49%;height:3.2%}
.ps-handle{position:absolute;left:1.6%;top:47%;width:2.4%;height:9%;border-radius:6px;background:linear-gradient(90deg,#7a5a24,#e2c27a 45%,#9c7633);box-shadow:0 4px 10px rgba(0,0,0,.5)}
.ps-glow{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;opacity:0;
  background:radial-gradient(ellipse 70% 60% at 50% 45%,rgba(255,236,196,.55),rgba(255,214,150,.18) 45%,rgba(0,0,0,0) 75%)}
.ps-dust{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;mix-blend-mode:screen}
.ps-dark{position:absolute;inset:0;background:#030507;opacity:0;pointer-events:none}

/* ---- cartolina ---- */
.pc{position:absolute;inset:0;overflow:hidden}
.pc-shade{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 45%,rgba(4,14,24,.55),rgba(2,6,12,.95));opacity:0}
.pc-card{position:absolute;left:0;top:0;transform-style:preserve-3d;will-change:transform}
.pc-face{position:absolute;inset:0;border-radius:6px;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;
  background:radial-gradient(ellipse at 20% 15%,rgba(255,255,255,.55),rgba(255,255,255,0) 55%),radial-gradient(ellipse at 85% 90%,rgba(160,120,60,.18),rgba(0,0,0,0) 60%),
    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='.9' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .38 0 0 0 0 .28 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),#f3ead6;
  box-shadow:0 30px 70px rgba(0,0,0,.55),0 4px 12px rgba(0,0,0,.35)}
.pc-back{transform:rotateY(180deg);color:#3a3226}
.pc-front{padding:4.5%}
.pc-pic{position:absolute;left:4.5%;right:4.5%;top:6.75%;bottom:6.75%;overflow:hidden;border-radius:2px;background:#222;box-shadow:inset 0 0 0 1px rgba(0,0,0,.2)}
.pc-pic canvas{position:absolute;inset:0;width:100%;height:100%}
.pc-live{opacity:0}
.pc-cap{position:absolute;left:5%;bottom:6%;margin:0;color:#fff;font:400 calc(var(--cw) * .036)/1.05 "Caveat",cursive;text-shadow:0 2px 14px rgba(0,0,0,.65);transform:rotate(-4deg);transform-origin:left bottom}
.pc-cap b{display:block;font-family:var(--f-display);font-weight:400;font-size:calc(var(--cw) * .07);letter-spacing:.02em}
.pc-head{position:absolute;left:0;right:0;top:5%;margin:0;text-align:center;font:600 calc(var(--cw) * .019) var(--f-mono);letter-spacing:.3em;color:#7a6a4f}
.pc-head span{font-weight:400}
.pc-div{position:absolute;left:54%;top:18%;bottom:10%;width:1px;background:#a8987a}
.pc-msg{position:absolute;left:6%;top:24%;width:44%}
.pc-hand{font:500 calc(var(--cw) * .043)/1.2 "Caveat",cursive;color:#2c3e57;margin:0}
.pc-hand b{font-weight:700}
.pc-sign{margin-top:10%;text-align:right;font-size:calc(var(--cw) * .036)}
.pc-to{position:absolute;left:58%;right:6%;top:16%;bottom:10%}
.pc-to i{display:block;height:1px;background:#a8987a;margin-top:calc(var(--cw) * .058)}
.pc-to i:first-of-type{margin-top:calc(var(--cw) * .25)}
.pc-addr{position:absolute;left:4%;top:calc(var(--cw) * .215);font-size:calc(var(--cw) * .036);line-height:1.62}
.pc-stamp{position:absolute;right:0;top:0;width:calc(var(--cw) * .12);height:calc(var(--cw) * .15);padding:calc(var(--cw) * .008);background:#fbf7ee;
  -webkit-mask:radial-gradient(circle at 50% 50%,#000 62%,transparent 64%) -4px -4px/8px 8px,linear-gradient(#000,#000) 4px 4px/calc(100% - 8px) calc(100% - 8px) no-repeat;
  mask:radial-gradient(circle at 50% 50%,#000 62%,transparent 64%) -4px -4px/8px 8px,linear-gradient(#000,#000) 4px 4px/calc(100% - 8px) calc(100% - 8px) no-repeat;box-sizing:border-box}
.pc-stamp canvas{display:block;width:100%;height:82%;filter:sepia(.35) saturate(1.2)}
.pc-stamp span{display:block;text-align:center;font:600 calc(var(--cw) * .013) var(--f-mono);letter-spacing:.2em;color:#7c2f22;margin-top:4%}
.pc-pm{position:absolute;right:1%;top:5%;width:calc(var(--cw) * .47);color:rgba(28,40,66,.82);opacity:0;transform-origin:70% 50%;mix-blend-mode:multiply}
.pc-pm svg{display:block;width:100%;height:auto}

/* ---- maioliche ---- */
.mj{position:absolute;inset:0;perspective:1500px;background:#ddd3c0}
.mj-t{position:absolute}
.mj-in{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform}
.mj-f,.mj-b{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:calc(var(--g,0) * 3px);box-shadow:0 calc(var(--g,0) * 4px) calc(var(--g,0) * 10px) rgba(0,0,0,.28)}
.mj-b{transform:rotateY(180deg);background-size:100% 100%}
.mj-f::after,.mj-b::after{content:"";position:absolute;inset:0;border-radius:inherit;opacity:var(--g,0);background:linear-gradient(135deg,rgba(255,255,255,.42),rgba(255,255,255,0) 38%,rgba(255,255,255,0) 70%,rgba(255,255,255,.12));box-shadow:inset 0 0 0 1px rgba(255,255,255,.25),inset 0 -2px 4px rgba(0,0,0,.12)}

/* ---- granito ---- */
.gr{position:absolute;inset:0;perspective:900px;perspective-origin:50% 45%;overflow:hidden;background:transparent}
.gr-s{position:absolute;inset:0;transform-style:preserve-3d;filter:drop-shadow(0 12px 14px rgba(0,0,0,.5));will-change:transform}
.gr.lite .gr-s{filter:none}
.gr-c{position:absolute;inset:0;background-repeat:no-repeat}
.gr-cr{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.gr-cr polygon{fill:none;stroke:#1a1310;stroke-width:2.4;stroke-linejoin:round;filter:drop-shadow(0 1px 0 rgba(255,235,220,.45))}
.gr-top{position:absolute;inset:0;background-size:100% 100%;pointer-events:none}

/* ---- messaggio in bottiglia ---- */
.bt{position:absolute;inset:0;overflow:hidden}
.bt-shade{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 58%,rgba(14,62,84,.6),rgba(2,10,20,.96));opacity:0}
.bt-bottle{position:absolute;left:0;top:0;will-change:transform;filter:drop-shadow(0 16px 22px rgba(0,0,0,.45))}
.bt-bottle svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.bt-roll{position:absolute;left:13%;top:34%;width:55%;height:32%;border-radius:999px;background:linear-gradient(to bottom,#f6ead0,#e2cc9c 55%,#b8975f);box-shadow:inset 0 0 0 1px rgba(90,60,20,.25)}
.bt-roll::after{content:"";position:absolute;left:46%;top:-6%;bottom:-6%;width:5%;background:#8b3a2a;border-radius:2px}
.bt-cork{transform-box:fill-box;transform-origin:center}
.bt-rings{position:absolute;left:0;top:0}
.bt-rings i{position:absolute;left:0;top:0;width:260px;height:46px;margin:-23px 0 0 -130px;border:1.5px solid rgba(200,240,255,.4);border-radius:50%;animation:bt-ring 2.6s infinite ease-out;opacity:0}
.bt-rings i:nth-child(2){animation-delay:.85s}.bt-rings i:nth-child(3){animation-delay:1.7s}
@keyframes bt-ring{from{transform:scale(.35);opacity:.85}to{transform:scale(1.7);opacity:0}}
.bt-scroll{position:absolute;left:0;top:0;will-change:transform}
.bt-paper{position:absolute;top:0;bottom:0;left:3%;right:3%;border-radius:3px;box-shadow:0 30px 70px rgba(0,0,0,.55);
  background:radial-gradient(ellipse at 30% 20%,rgba(255,255,255,.45),rgba(255,255,255,0) 55%),radial-gradient(ellipse at 80% 85%,rgba(150,105,50,.22),rgba(0,0,0,0) 60%),
    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='3'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .36 0 0 0 0 .24 0 0 0 .1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),#efe2c3}
.bt-pic{position:absolute;left:6%;right:6%;top:7%;height:72%;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(80,60,30,.3)}
.bt-pic canvas{position:absolute;inset:0;width:100%;height:100%}
.bt-live{opacity:0}
.bt-cap{position:absolute;left:0;right:0;bottom:4%;margin:0;text-align:center;font:600 calc(var(--sw) * .052)/1 "Caveat",cursive;color:#3b2c1c}
.bt-cap span{display:block;font-size:.55em;font-weight:500;opacity:.75;margin-top:2px}
.bt-rl,.bt-rr{position:absolute;top:-4%;bottom:-4%;width:5.5%;border-radius:999px;background:linear-gradient(to right,#5e3f22,#c89a60 38%,#9a6d3c 66%,#4a3019);box-shadow:0 10px 24px rgba(0,0,0,.5)}
.bt-rl{left:0}.bt-rr{right:0}

/* ---- diario di viaggio ---- */
.dg{position:absolute;inset:0;overflow:hidden}
.dg-shade{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 45%,rgba(18,14,10,.5),rgba(4,4,6,.95));opacity:0}
.dg-book{position:absolute;left:0;top:0;transform-style:preserve-3d;will-change:transform}
.dg-page,.dg-face{box-sizing:border-box;padding:calc(var(--pw) * .1) calc(var(--pw) * .1);color:#2c3e57;
  background:repeating-linear-gradient(to bottom,rgba(0,0,0,0) 0,rgba(0,0,0,0) calc(var(--pw) * .078 - 1px),rgba(70,110,150,.22) calc(var(--pw) * .078 - 1px),rgba(70,110,150,.22) calc(var(--pw) * .078)),#f7f1e2}
.dg-page{position:absolute;top:0;width:50%;height:100%}
.dg-left{left:0;border-radius:8px 0 0 8px;box-shadow:inset -26px 0 30px -18px rgba(60,40,20,.45),0 30px 60px rgba(0,0,0,.5)}
.dg-right{left:50%;border-radius:0 8px 8px 0;box-shadow:inset 26px 0 30px -18px rgba(60,40,20,.45),0 30px 60px rgba(0,0,0,.5)}
.dg-leaf{position:absolute;left:50%;top:0;width:50%;height:100%;transform-origin:0 50%;transform-style:preserve-3d}
.dg-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:0 8px 8px 0}
.dg-back{transform:rotateY(180deg);border-radius:8px 0 0 8px}
.dg-h{font:700 calc(var(--pw) * .1)/1 "Caveat",cursive;margin:0 0 calc(var(--pw) * .04)}
.dg-t{font:500 calc(var(--pw) * .066)/1.18 "Caveat",cursive;margin:0 0 calc(var(--pw) * .03)}
.dg-small{font-size:calc(var(--pw) * .05);opacity:.75;position:absolute;bottom:calc(var(--pw) * .1);left:calc(var(--pw) * .1)}
.dg-c{text-align:center}
.dg-title{font-family:var(--f-display);font-size:calc(var(--pw) * .15);line-height:1;text-align:center;margin:28% 0 6%;color:#1f2f45}
.dg-doodle{display:block;width:62%;margin:calc(var(--pw) * .05) auto}
.dg-ticket{margin-top:22%;transform:rotate(-5deg);border:2px dashed #c25236;border-radius:6px;padding:calc(var(--pw) * .05);background:#fff8ec;font-family:var(--f-mono);color:#7c3a28;text-align:center;box-shadow:0 6px 16px rgba(0,0,0,.12)}
.dg-ticket span{display:block;font-size:calc(var(--pw) * .032);letter-spacing:.2em;margin-bottom:6%}
.dg-ticket b{display:block;font:400 calc(var(--pw) * .085)/1.1 var(--f-display);color:#2c3e57}
.dg-ticket i{display:block;font-style:normal;font-size:calc(var(--pw) * .06)}
.dg-ticket em{display:block;font-style:normal;font-size:calc(var(--pw) * .032);margin-top:6%}
.dg-cover .dg-front{border-radius:4px 12px 12px 4px;padding:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4%;
  background:radial-gradient(ellipse at 30% 25%,rgba(255,220,180,.18),rgba(0,0,0,0) 55%),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='1.1' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 .1 0 0 0 0 .05 0 0 0 0 .02 0 0 0 .35 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),#6d3e22;
  outline:2px dashed rgba(236,200,150,.45);outline-offset:calc(var(--pw) * -.05);box-shadow:0 30px 60px rgba(0,0,0,.55),inset 0 0 40px rgba(0,0,0,.35)}
.dg-cover .dg-front span{font-family:var(--f-display);font-size:calc(var(--pw) * .12);color:#e4c486;text-shadow:0 1px 0 rgba(0,0,0,.5);text-align:center;line-height:1.05;padding:0 12%}
.dg-cover .dg-front em{font:500 calc(var(--pw) * .03) var(--f-mono);letter-spacing:.25em;text-transform:uppercase;color:rgba(228,196,134,.8);font-style:normal}
.dg-band{position:absolute;right:13%;top:0;bottom:0;width:4.5%;background:linear-gradient(to right,#1d120b,#3a2416 50%,#1d120b)}
.dg-inside{background:repeating-linear-gradient(45deg,#2e4a6b 0 6px,#264160 6px 12px)!important;border-radius:12px 4px 4px 12px}
.dg-pola{position:absolute;left:calc(var(--pw) * .07);top:calc(var(--pw) * .155);width:calc(var(--pw) * .86);box-sizing:border-box;padding:calc(var(--pw) * .04) calc(var(--pw) * .04) 0;height:calc(var(--pw) * .98);background:#fbfaf6;box-shadow:0 10px 24px rgba(0,0,0,.28);opacity:0;transform-origin:50% 44%}
.dg-pic{position:relative;width:calc(var(--pw) * .78);height:calc(var(--pw) * .78);background:#111;overflow:hidden}
.dg-pic canvas{position:absolute;inset:0;width:100%;height:100%}
.dg-live{opacity:0}
.dg-pola p{margin:calc(var(--pw) * .025) 0 0;text-align:center;font:600 calc(var(--pw) * .07) "Caveat",cursive;color:#2c3e57}
.dg-tape{position:absolute;left:50%;top:calc(var(--pw) * -.03);width:calc(var(--pw) * .3);height:calc(var(--pw) * .07);margin-left:calc(var(--pw) * -.15);background:rgba(232,214,170,.75);transform:rotate(-4deg);box-shadow:0 1px 2px rgba(0,0,0,.1)}

/* ---- carta nautica ---- */
.nc{position:absolute;inset:0;overflow:hidden}
.nc-f{position:absolute;inset:0;background-size:100% 100%;backface-visibility:visible;will-change:transform}

/* ---- l'onda ---- */
.mode-onda .mt-stage{background:linear-gradient(to bottom,#0a2332 0%,#16506a 55%,#0b3446 100%)}
.mt.live.mode-onda .mt-stage{background:none}
.on-map{will-change:transform}
.mt-credit{right:96px;line-height:1.5}