@font-face{font-family:Manrope;src:url(assets/manrope.woff2);font-display:swap}@font-face{font-family:Plex;src:url(assets/plex.woff2);font-display:swap}:root{--vk-display:Manrope,sans-serif;--vk-text:Manrope,sans-serif;color:#102c39;background:#e9eee9;font-family:var(--vk-text);font-size:16px}*{box-sizing:border-box}body{margin:0}a{color:inherit}header{position:absolute;z-index:2;top:0;left:0;right:0;padding:24px 4%;display:flex;justify-content:space-between;align-items:center}header a{text-decoration:none}.brand{font-size:28px;font-weight:800;letter-spacing:-.08em}.brand span{color:#168454}h1,h2,h3,p{margin:0}h1,h2{letter-spacing:-.06em;line-height:.95}h1{font-size:clamp(64px,8vw,130px);view-transition-name:vk-title}h2{font-size:clamp(46px,6.3vw,100px)}p{line-height:1.55}.hero{min-height:100svh;padding:140px 4% 35px;display:grid;grid-template-columns:1fr 1fr;gap:5%;align-items:center}.kicker{margin-bottom:24px}.intro{font-size:clamp(18px,1.5vw,23px);max-width:540px;margin:30px 0}.button{display:inline-block;background:#176e4b;color:white;padding:17px 24px;text-decoration:none}.terminal,.old{background:#09271f;color:#a3f6b1;font-family:Plex,monospace}.terminal{border:12px solid #172d30;min-height:370px;box-shadow:12px 12px 0 #bdcbc4}.terminal-top,.bar{padding:16px 20px;border-bottom:1px solid currentColor}.terminal-top span{float:right}.terminal-body{padding:25px;font-size:clamp(12px,1vw,16px)}.terminal-body p{line-height:2}.hero-bottom{grid-column:1/-1;display:flex;justify-content:space-between;align-self:end}.scene{height:240vh;background:#102c39;color:#eef5ee}.sticky{position:sticky;top:0;height:100svh;padding:6vh 4%;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}.scene-copy{display:flex;align-items:end;justify-content:space-between;gap:2rem}.scene-copy h2{font-size:clamp(40px,5vw,76px)}.scene-copy p{max-width:300px}.migration{position:relative;height:48%;max-width:1100px;width:100%;margin:auto;overflow:hidden}.old,.new{position:absolute;inset:0}.old-fields,.modern-fields{padding:18px 24px}.old-fields p,.modern-fields p{display:flex;justify-content:space-between;max-width:500px;margin:9px 0}.old small{padding:0 24px}.new{background:#f6faf6;color:#102c39;opacity:0}.new h3{font-size:clamp(26px,3vw,42px);padding:20px 24px 0}.flying{position:absolute;inset:0;pointer-events:none}.flying span{position:absolute;left:48%;top:25%;background:#a5f5b6;color:#102c39;padding:5px;opacity:0}.flying span:nth-child(2){top:38%}.flying span:nth-child(3){top:51%}.flying span:nth-child(4){top:64%}.scene-caption{text-align:right}.compare,.roles,.bridge,.closing{padding:130px 4%}.section-heading{display:flex;justify-content:space-between;gap:3rem;align-items:end;margin-bottom:60px}.section-heading p{max-width:320px;font-size:19px}.comparison{height:420px;position:relative;overflow:hidden;background:#fff}.compare-new,.compare-old{position:absolute;inset:0;padding:38px;font-family:Plex,monospace}.compare-new h3,.compare-old h3{font-size:clamp(24px,3vw,40px);margin:35px 0}.compare-new p,.compare-old p{margin:12px 0}.compare-new strong{margin-left:30px}.compare-old{background:#09271f;color:#a3f6b1;clip-path:inset(0 50% 0 0)}.comparison input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;z-index:2}.divider{position:absolute;left:50%;top:0;bottom:0;width:3px;background:#176e4b;pointer-events:none}.divider span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#176e4b;color:white;padding:14px;border-radius:50%}.comparison:focus-within{outline:3px solid #176e4b;outline-offset:4px}.hint{margin-top:18px}.roles{background:#d4e3d8}.role{display:grid;grid-template-columns:1fr 2fr 1.3fr;gap:4%;padding:45px 0;border-top:2px solid #779488}.role h3{font-size:30px;letter-spacing:-.04em;margin-bottom:16px}.role p{max-width:430px}.ticket{background:#f5f9f5;padding:25px;align-self:start}.ticket strong,.ticket small{display:block;margin-top:15px}.bridge{background:#123d50;color:#e6f3ec;display:grid;grid-template-columns:1fr 1fr;gap:8%}.bridge>div>p{max-width:430px;margin-top:30px;font-size:20px}.blueprint{border:2px solid #a1d4c6;padding:32px;font-family:Plex,monospace}.node{border:2px solid #a1d4c6;padding:22px}.node p{margin-top:10px}.connection{padding:25px 0}.connection span,.connection b{display:block;font-size:13px}.connection b{font-size:22px}.blue-note{font-size:14px!important}.closing{background:#e9eee9}.closing p{max-width:480px;font-size:22px;margin-bottom:60px}.closing h2{font-size:clamp(55px,9vw,140px)}:focus-visible{outline:3px solid #d7881d;outline-offset:4px}@media(max-width:700px){header{padding:20px}.hero{padding:110px 20px 30px;display:block}.hero h1{font-size:64px}.terminal{margin:50px 0 40px;min-height:300px;border-width:7px}.terminal-body{padding:16px}.hero-bottom{display:flex;font-size:13px}.scene{height:200vh}.sticky{padding:45px 20px}.scene-copy,.section-heading{display:block}.scene-copy p,.section-heading p{margin-top:20px}.migration{height:43%}.old-fields,.modern-fields{padding:12px}.old-fields p,.modern-fields p{font-size:13px}.old small{font-size:10px;padding:0 12px}.new h3{padding:15px 12px 0}.bar{padding:12px;font-size:12px}.scene-caption{font-size:13px}.compare,.roles,.bridge,.closing{padding:85px 20px}.comparison{height:360px}.compare-new,.compare-old{padding:20px;font-size:12px}.compare-new strong{display:block;margin:8px 0}.role{grid-template-columns:1fr;gap:20px}.role h3{font-size:26px}.bridge{display:block}.blueprint{margin-top:50px;padding:18px}.connection b{font-size:16px}}@media(prefers-reduced-motion:reduce){.scene{height:auto}.sticky{position:relative;height:auto;gap:35px}.migration{height:340px}.new{opacity:1!important}.flying{display:none}}
html:not(.vk-js) .scene{height:auto}html:not(.vk-js) .sticky{position:relative;height:auto;gap:35px}html:not(.vk-js) .migration{height:620px;overflow:visible}html:not(.vk-js) .old,html:not(.vk-js) .new{position:relative;height:300px;opacity:1}html:not(.vk-js) .flying{display:none}html:not(.vk-js) .comparison input{display:none}html:not(.vk-js) .divider{display:none}
.compare-new{padding-left:54%}@media(max-width:700px){.compare-new{padding-left:52%;padding-right:8px;overflow-wrap:anywhere}.compare-new h3{font-size:20px}.compare-new p{font-size:11px}}
.terminal-body{margin:0;white-space:pre;overflow:hidden;line-height:1.25;font-size:clamp(6px,.72vw,10px);color:#a3f6b1;text-shadow:0 0 4px #63f396,0 0 12px #2fa95c;padding:20px}.flying span{left:0!important;top:0!important;padding:0;transform-origin:top left;white-space:nowrap;background:#a5f5b6;line-height:1.55}.old-fields b,.modern-fields b{font-weight:600}.new h3[data-to]{width:max-content;max-width:100%}@media(max-width:700px){.terminal-body{font-size:clamp(4px,1.08vw,7px);padding:12px}}
.ticket{min-height:235px;border-top:8px solid #247f59}.ticket h4{font-size:23px;letter-spacing:-.03em;margin:24px 0 12px}.ticket small{line-height:1.5}.ticket strong{color:#176e4b}

.history,.friction,.transition{padding:clamp(90px,12vw,180px) 4%;min-height:100svh}.history{background:#d3e1d7}.history-number{font-family:Plex,monospace;margin-bottom:60px}.history-copy,.friction-copy,.transition>div{max-width:680px;margin:55px 0 70px auto;font-size:clamp(19px,2vw,25px)}.history-copy p,.friction-copy p,.transition p+p{margin-top:1.4em}.history-ledger{border-top:2px solid;display:flex;gap:3rem;flex-wrap:wrap;padding-top:24px;font-family:Plex,monospace}.history-ledger strong{margin-left:auto}.friction{background:#102c39;color:#eff7ef}.transition{background:#c9dccf}.migration{height:58%}.old-fields p,.modern-fields p{margin:4px 0}.old small{font-size:13px}@media(max-width:700px){.history,.friction,.transition{padding:90px 20px}.history-ledger{gap:1rem}.history-ledger strong{margin-left:0;width:100%}.terminal-body{font-size:13px;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.4;text-shadow:none}.terminal-body{max-height:400px;overflow:auto}.terminal-top,.bar,.scene-caption,.hero-bottom,.old-fields p,.modern-fields p,.old small,.compare-new,.compare-old,.compare-new p{font-size:13px}.migration{height:55%}.old-fields p,.modern-fields p{line-height:1.25;margin:3px 0}.new h3{font-size:22px}.sticky{padding:30px 20px}.scene-copy h2{font-size:36px}.scene-copy p{margin-top:10px}.compare-new{overflow-wrap:normal}.ticket small{font-size:14px}}
header a{min-height:44px;display:inline-flex;align-items:center}

.ticket-detail{border-top:1px solid #b4c9ba;margin-top:24px;padding-top:8px}.ticket-detail span,.ticket-detail b{display:block}.ticket-detail span{font-family:Plex,monospace;font-size:13px;text-transform:uppercase;color:#435f52;margin-top:20px}.ticket-detail b{margin-top:5px}.ticket-detail p{margin-top:8px;font-size:15px;line-height:1.5}.bridge-legend{display:grid;grid-template-columns:1fr 1fr;gap:24px;border-top:1px solid #a1d4c6;margin-top:28px;padding-top:24px}.bridge-legend span{font-size:13px}.bridge-legend p{margin-top:12px;line-height:1.5}.role{min-height:75svh;align-items:center}.role .ticket{align-self:center}@media(max-width:700px){.role{min-height:0;padding:60px 0}.ticket-detail p{font-size:15px}.bridge-legend{grid-template-columns:1fr}}
/* Il monitor è la scena, non un oggetto nella scena. */
.hero{position:relative;display:block;min-height:120svh;padding:16vh 5% 6vh;background:#061c15;color:#a3f6b1;font-family:Plex,monospace;overflow:hidden;text-shadow:0 0 7px #3dbd72}
.hero:after,.old:after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(transparent 0 3px,#00170c44 4px);z-index:2}
.hero>div:first-child{position:relative;z-index:3}.hero h1{font-family:Plex,monospace;font-size:clamp(54px,9vw,140px);letter-spacing:-.07em;overflow:hidden;animation:type 2s steps(18,end) both}.hero h1:after{content:'_';animation:blink 1s steps(2) infinite}.hero .intro{max-width:650px}.hero .button{border:1px solid #a3f6b1;background:transparent}.terminal{position:absolute;inset:0;border:0;box-shadow:none;background:radial-gradient(ellipse at center,#143d29,#061c15 80%);opacity:.45;overflow:hidden}.terminal-top{margin-top:7vh}.terminal-body{font-size:clamp(11px,1.2vw,18px);line-height:1.6;padding:5vh 5%}.terminal-story{position:relative;z-index:3;max-width:750px;margin-top:8vh;font-size:clamp(16px,1.5vw,22px)}.terminal-story p{margin:1em 0}.cursor{animation:blink 1s steps(2) infinite}.hero-bottom{position:relative;z-index:3;margin-top:6vh}.hero~*{text-shadow:none}header{color:#a3f6b1;z-index:5}.scene{height:800vh}.sticky{padding:0}.scene-copy,.scene-caption{position:absolute;z-index:4;left:4%;right:4%;pointer-events:none}.scene-copy{top:4%;color:#a3f6b1;mix-blend-mode:difference}.scene-copy h2{font-size:clamp(32px,4vw,64px)}.scene-caption{bottom:3%}.migration{width:100%;max-width:none;height:100%;margin:0}.old,.new{padding:18vh 5% 8vh}.old-fields,.modern-fields{padding:3vh 0}.old-fields p,.modern-fields p{max-width:75%;font-size:clamp(18px,2vw,30px);margin:1vh 0}.old small{padding:0}.new h3{padding:2vh 0;font-size:clamp(30px,5vw,70px)}.flying span{font-size:clamp(18px,2vw,30px);z-index:5}.compare{min-height:100svh;display:flex;flex-direction:column;justify-content:center}.comparison{height:65svh}.roles{padding:0}.roles>.section-heading{padding:10vh 4%;margin:0}.role{min-height:100svh;padding:8vh 5%;grid-template-columns:1fr 1fr;gap:4%}.role>span{grid-column:1/-1;font:18px Plex,monospace}.role .ticket{width:100%;min-height:65vh;padding:5%;font-size:clamp(18px,2vw,27px)}.ticket h4{font-size:clamp(32px,4vw,65px)}.bridge{min-height:140svh;display:block;padding:10vh 5%}.blueprint{margin-top:8vh;min-height:70vh;padding:5%;background-image:linear-gradient(#a1d4c620 1px,transparent 1px),linear-gradient(90deg,#a1d4c620 1px,transparent 1px);background-size:32px 32px}.node{padding:4%;font-size:clamp(20px,3vw,42px)}.connection{padding:4vh 0}.connection b{font-size:clamp(22px,4vw,60px)}
@keyframes type{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}@keyframes blink{50%{opacity:0}}
@media(max-width:700px){.hero{padding:16vh 6% 6vh}.hero h1{font-size:clamp(48px,12vw,70px)}.terminal-body{font-size:9px;white-space:pre;overflow:hidden;max-height:none}.terminal-story{margin-top:6vh}.scene{height:800vh}.old,.new{padding:26vh 5% 8vh}.old-fields p,.modern-fields p{max-width:100%;font-size:15px;margin:1.4vh 0}.scene-copy{top:5%}.scene-copy h2{font-size:32px}.scene-copy p{font-size:14px}.flying span{font-size:15px}.role{display:block;min-height:100svh;padding:8vh 6%}.role>div:not(.ticket){margin:4vh 0}.role .ticket{min-height:55vh;padding:7%}.bridge{padding:10vh 6%}.blueprint{min-height:65vh}.comparison{height:60svh}}
@media(prefers-reduced-motion:reduce){.hero h1,.cursor{animation:none}.new{clip-path:none!important}}
.blueprint{position:relative}.blueprint:before{content:'← 01 / SISTEMA DI ORIGINE                                      02 / VISTE AUTORIZZATE →';display:block;border-bottom:1px solid #a1d4c6;padding-bottom:12px;font-size:clamp(9px,1vw,13px);letter-spacing:.06em}.connection b{transform-origin:left;animation:draw-bridge linear both;animation-timeline:view();animation-range:entry 10% cover 55%}@keyframes draw-bridge{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}
/* Giro 1: il testo della schermata non interferisce con la voce. */
.hero .terminal-body{opacity:.12}.hero .terminal-top{opacity:.35}.role{grid-template-columns: .8fr 2fr}.role .ticket{min-height:76vh;padding:6%;border-top-width:12px}.role .ticket-detail{display:grid;grid-template-columns:1fr 2fr;column-gap:4%;align-items:baseline}.role .ticket-detail p{grid-column:2}.role .ticket-detail span{margin-top:1.5em}
@media(max-width:700px){.role .ticket{min-height:65vh}.role .ticket-detail{display:block}}
/* Giro 2: il campo in volo resta leggibile sopra entrambe le epoche. */
.flying span{padding:.15em .35em;box-shadow:0 0 20px #81ed9c88;white-space:nowrap}.scene-copy{mix-blend-mode:normal;color:#a3f6b1;text-shadow:0 1px 4px #061c15;background:#061c15d9;padding:1rem}.scene-caption{left:auto;right:4%;bottom:3%;width:max-content;max-width:92%;color:#a3f6b1;background:#061c15d9;padding:.45rem .7rem;text-shadow:0 1px 4px #061c15}.blueprint:before{white-space:normal;line-height:1.6}
@media(max-width:700px){.scene-copy{padding:.6rem}.scene-copy p{max-width:24ch}.flying span{font-size:14px}.scene-caption{right:5%;bottom:8%;max-width:90%;padding:.4rem .55rem}}
.crossing{background:#d5ded4;color:#102c39;padding:9vh 4%;overflow:hidden}.cross-intro{display:flex;justify-content:space-between;align-items:end;gap:2rem}.cross-intro p{max-width:25rem;font-size:20px}.cross-stage{position:relative;height:500px;margin:4rem auto 1rem;max-width:1400px;overflow:hidden;background:#334c43}.stone{position:absolute;width:100%;height:100%;object-fit:cover;opacity:.65}.arch{position:absolute;left:18%;right:18%;bottom:-25%;height:70%;border:25px solid #e2dcc6;border-bottom:0;border-radius:50% 50% 0 0;box-shadow:0 -5px 0 #34473f}.pier{position:absolute;z-index:1;top:14%;width:22%;min-height:70%;padding:1.5rem;font-size:14px}.pier span,.pier b{display:block;margin-bottom:1rem}.pier p{margin:.8rem 0}.pier-old{left:0;background:#09271f;color:#a3f6b1;font-family:Plex,monospace}.pier-new{right:0;background:#f6faf6;color:#102c39}.traveller{position:absolute;z-index:2;left:22%;top:48%;display:grid;gap:.15rem;padding:.8rem;background:#a3f6b1;color:#102c39;font:14px Plex,monospace;transform:translate(-50%,-50%)}.cross-control{display:block;max-width:900px;margin:auto;font-weight:700}.cross-range{display:block;width:100%;height:44px;accent-color:#176e4b;cursor:grab}.cross-hint{max-width:900px;margin:auto}.monitor-photo{display:block;width:min(38%,480px);height:auto;margin:5rem 0 0 auto}@media(max-width:700px){.cross-intro{display:block}.cross-intro p{margin-top:1.5rem}.cross-stage{height:450px;margin-top:2rem}.pier{width:30%;padding:.7rem;font-size:11px}.arch{left:20%;right:20%;border-width:12px}.traveller{font-size:11px;padding:.4rem}.monitor-photo{width:80%}}@media(prefers-reduced-motion:reduce){.traveller{transition:none}}
.traveller{cursor:grab;touch-action:none}.traveller:active{cursor:grabbing}html:not(.vk-js) .cross-control,html:not(.vk-js) .cross-hint{display:none}
@media(max-width:700px){.pier,.traveller{font-size:13px}.pier{width:32%;overflow-wrap:anywhere}.cross-stage{height:500px}}

/* Il monitor fotografico è il pilone: lo schermo accoglie il terminale. */
.pier-monitor{position:absolute;z-index:1;left:0;top:18%;width:46%;aspect-ratio:3/2;overflow:hidden}
.pier-monitor .monitor-photo{display:block;width:100%;height:100%;margin:0;object-fit:fill}
.monitor-screen{position:absolute;left:38%;top:24%;width:30%;height:39%;padding:3% 2%;display:flex;flex-direction:column;gap:.35em;background:#061c15e8;color:#b6ffd0;font:clamp(9px,1vw,14px)/1.25 Plex,monospace;transform:skew(-2deg);overflow:hidden}
.monitor-screen b{font-size:1em}.monitor-screen span:last-child{margin-top:auto}
.pier-new{top:22%;min-height:45%;width:22%;display:flex;flex-direction:column;justify-content:center}
.traveller{display:flex;align-items:center;gap:.6em}
@media(max-width:700px){.pier-monitor{top:28%;left:-18%;width:80%}.monitor-screen{font-size:9px}.pier-new{top:28%;width:31%;min-height:36%;font-size:13px}.traveller{font-size:13px}}
.pier-monitor .monitor-photo{mask-image:linear-gradient(to right,transparent,#000 8% 85%,transparent),linear-gradient(to bottom,transparent,#000 8% 87%,transparent);mask-composite:intersect}
.monitor-screen{border-radius:4% 2% 3% 3%;background-image:repeating-linear-gradient(transparent 0 3px,#0003 4px)}