/* Scorrimento orizzontale a sezioni + timeline numerata a destra.
   Si attiva solo con JavaScript (html[data-hdeck]); senza JS le pagine restano verticali. */

/* ---------- timeline (Home e pagine a sezioni) ---------- */
.hdt{position:fixed;z-index:9000;right:clamp(6px,1.3vw,20px);top:calc(var(--hd-hh,0px) + (100svh - var(--hd-hh,0px) - var(--fsf-h,0px)) / 2);transform:translateY(-50%);margin:0;padding:0;font-family:'JetBrains Mono',ui-monospace,monospace}
.hdt ol{list-style:none;margin:0;padding:0;display:grid;justify-items:end}
.hdt li{display:grid;justify-items:center;margin:0;padding:0}
.hdt li+li::before{content:"";display:block;width:2px;height:12px;background:rgba(11,11,26,.28)}
.hdt .hdb{appearance:none;position:relative;display:grid;place-items:center;width:38px;height:38px;margin:0;padding:0;border:2px solid rgba(11,11,26,.5);border-radius:0;background:rgba(247,246,251,.94);color:#0b0b1a;font:500 .78rem/1 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.02em;cursor:pointer;box-shadow:none;min-height:0;transition:background .25s,color .25s,border-color .25s,transform .25s;clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px))}
.hdt .hdb:hover{border-color:#004aad;color:#004aad;background:#fff}
.hdt .hdb[aria-current="true"]{border-color:transparent;color:#fff;background:linear-gradient(135deg,#004aad,#cb6ce6);transform:scale(1.1)}
.hdt .hdb:focus-visible{outline:3px solid #004aad;outline-offset:2px}
.hdt .hdb::after{content:attr(aria-label);position:absolute;right:calc(100% + 12px);top:50%;transform:translate(6px,-50%);white-space:nowrap;background:#0b0b1a;color:#fff;padding:7px 12px;font:500 .74rem/1 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.1em;text-transform:uppercase;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;clip-path:none}
.hdt .hdb:hover::after,.hdt .hdb:focus-visible::after{opacity:1;transform:translate(0,-50%)}
@media (hover:none){.hdt .hdb::after{display:none}}
@media (max-width:700px){
  .hdt{right:4px}
  .hdt .hdb{width:30px;height:30px;font-size:.68rem;border-width:1.5px}
  .hdt li+li::before{height:8px}
}
html[data-theme="dark"] .hdt li+li::before{background:rgba(255,255,255,.3)}
html[data-theme="dark"] .hdt .hdb{border-color:rgba(255,255,255,.55);background:rgba(15,15,35,.92);color:#fff}
html[data-theme="dark"] .hdt .hdb:hover{border-color:#8fb4ff;color:#8fb4ff;background:#0b0b1a}
html[data-theme="dark"] .hdt .hdb[aria-current="true"]{border-color:transparent;color:#fff;background:linear-gradient(135deg,#004aad,#cb6ce6)}
html[data-theme="dark"] .hdt .hdb::after{background:#fff;color:#0b0b1a}

/* ---------- pagine a sezioni: la pagina e' una fila orizzontale di schermate ---------- */
html[data-hdeck],html[data-hdeck] body{height:100%;overflow:hidden}
html[data-hdeck]{--hd-h:calc(100svh - var(--hd-hh,84px) - var(--fsf-h,72px))}
html[data-hdeck] #app main.hd-track{display:flex;flex-wrap:nowrap;align-items:stretch;height:var(--hd-h);max-width:none;margin:0;padding:0;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior:contain;scrollbar-width:none;scroll-behavior:auto}
html[data-hdeck] #app main.hd-track::-webkit-scrollbar{display:none}
html[data-hdeck] #app main.hd-track>.hd-slide{flex:0 0 100%;width:100%;min-width:0;max-width:none;height:100%;min-height:0;margin:0;box-sizing:border-box;overflow-x:hidden;overflow-y:auto;scroll-snap-align:start;scroll-snap-stop:always;display:flex;flex-direction:column;border:0!important;padding-top:clamp(14px,3vh,36px);padding-bottom:clamp(14px,3vh,36px);padding-right:clamp(52px,5vw,76px);padding-left:clamp(12px,3vw,44px);scrollbar-width:thin;scrollbar-color:#9a9ab8 transparent;min-block-size:0}
html[data-hdeck] #app main.hd-track>.hd-slide>:first-child{margin-top:auto;margin-bottom:auto;width:100%;flex:none}
html[data-hdeck] #app main.hd-track>.hd-slide>.wrap,html[data-hdeck] #app main.hd-track>.hd-slide>.inner{margin-left:auto;margin-right:auto}
html[data-hdeck] #app main.hd-track>#sito{min-height:0}
@media (max-width:700px){
  html[data-hdeck] #app main.hd-track>.hd-slide{padding-right:42px;padding-left:10px}
}
@media (prefers-reduced-motion:reduce){html[data-hdeck] #app main.hd-track{scroll-behavior:auto}}

/* Home: spazio per la timeline a destra */
@media (min-width:701px){html #app.fs:not(.fsv) .scene{padding-right:76px}}
@media (max-width:700px){html #app.fs:not(.fsv) .scene{padding-right:44px}}