/* Il modello rimane nel campo visivo a destra, sopra ai testi su telefono. */
.mb .ma-motion{position:absolute;z-index:4;top:100px;right:5vw;min-width:94px;min-height:44px;padding:10px 16px;border:1px solid #ffffff38;border-radius:30px;background:#173da52b;color:#fff;font:500 12px var(--f);letter-spacing:.04em;cursor:pointer;transition:background .2s,border-color .2s}
.mb .ma-motion:hover{background:#ffffff15;border-color:#ffffff80}
.mb .ma-motion:focus-visible{outline:2px solid #fff;outline-offset:5px}
.mb .ma-motion[hidden]{display:none}
.mb .ma-thought{position:absolute;z-index:3;left:5vw;bottom:14.5svh;max-width:410px;pointer-events:none;color:#e9f3ff;border-left:1px solid #ffffff4d;padding-left:18px}
.mb .ma-thought span{display:block;font:10px var(--mono);letter-spacing:.16em;color:#bfd4ff;margin-bottom:9px}
.mb .ma-thought p{font:italic 20px/1.35 Georgia,serif;text-wrap:balance;margin:0}
.mb .ma-thought-enter{animation:ma-thought-reveal .65s var(--ex) both}
@keyframes ma-thought-reveal{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.mb .mb-nav button{min-width:44px;min-height:44px;box-sizing:border-box}
@media(max-width:760px){.mb .ma-motion{top:84px;right:22px;min-width:82px;font-size:11px}.mb .mb-slides{height:100%}.mb .mb-copy{top:51svh;bottom:100px;display:block}.mb .mb-s{top:0;bottom:auto}}
@media(max-width:760px) and (max-height:700px){.mb .mb-h{font-size:clamp(38px,11vw,54px)}.mb .mb-p{font-size:14px}.mb .ma-motion{top:70px}}
@media(max-width:760px){.mb .ma-thought{left:22px;right:22px;bottom:100px;max-width:none;border-left:0;padding-left:0}.mb .ma-thought span{display:none}.mb .ma-thought p{font-size:13px}.mb .mb-copy{top:51svh;bottom:130px}.mb .mb-p{font-size:14px}}
@media(max-width:760px) and (max-height:700px){.mb .ma-thought{display:none}.mb .mb-copy{top:50svh;bottom:100px}}
@media(prefers-reduced-motion:reduce){.mb .ma-thought-enter{animation:none}}
@media(prefers-reduced-motion:reduce){.mb .ma-motion{display:none}.mb .mb-s,.mb .mb-l>span,.mb .mb-s h3,.mb .mb-s .mb-p{transition:none}}
/* Un percorso di camera e testo: la tipografia viaggia con la materia. */
.mb{height:680svh}
.mb .mb-pin::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse at var(--ma-scrim-x,21%) 47%,#102d955e,transparent 57%)}
.mb .mb-copy{left:0;right:auto;top:0;bottom:auto;width:min(37vw,510px);display:block;will-change:transform}
.mb .mb-lab{font-size:10px;letter-spacing:.24em;margin-bottom:22px}
.mb .mb-slides{height:auto;transition:min-height .5s var(--ex)}
.mb .mb-s{top:0;bottom:auto}
.mb .mb-h{font-size:clamp(50px,6.7vw,108px);letter-spacing:-.02em;margin-bottom:20px}
.mb .mb-l:nth-child(2){margin-left:clamp(16px,2vw,32px)}
.mb .mb-h .a{color:transparent;-webkit-text-stroke:1.2px #e9f4ff}
.mb .mb-s h3{font-size:clamp(17px,1.45vw,22px);line-height:1.4;margin-bottom:10px}
.mb .mb-p{font-size:clamp(14px,1.05vw,17px);line-height:1.65;max-width:430px}
.mb .ma-thought{position:relative;inset:auto;max-width:none;margin-top:22px;padding-left:15px}
.mb .ma-thought span{font-size:9px;margin-bottom:7px}
.mb .ma-thought p{font-size:18px;line-height:1.35}
.mb .ma-chapter{position:absolute;z-index:3;top:105px;left:5vw;margin:0;font:10px var(--mono);letter-spacing:.15em;color:#d3e7ff}
@media(max-width:760px){.mb{height:620svh}.mb .mb-copy{left:0;right:auto;top:0;bottom:auto;width:calc(100% - 44px)}.mb .mb-h{font-size:clamp(42px,12vw,62px);margin-bottom:15px}.mb .mb-l:nth-child(2){margin-left:16px}.mb .mb-s h3{font-size:16px}.mb .mb-p{font-size:14px;line-height:1.5}.mb .ma-thought{display:block;margin-top:16px;padding-left:12px;border-left:1px solid #ffffff40}.mb .ma-thought span{display:none}.mb .ma-thought p{font-size:13px}.mb .ma-chapter{top:100px;left:22px;font-size:8px;max-width:180px;line-height:1.7}}
@media(max-width:760px) and (max-height:700px){.mb .mb-h{font-size:10.8vw}.mb .mb-p{font-size:13px}.mb .ma-thought{display:none}.mb .ma-chapter{top:86px}}
@media(prefers-reduced-motion:reduce){.mb .mb-copy{will-change:auto}.mb .mb-slides{transition:none}}
/* Gli stessi toni, allineamenti e accenti delle sezioni adiacenti. */
.mb{background:#0b1120}
.mb .mb-pin{background:#0b1120}
.mb .mb-pin::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse at var(--ma-glow-x,73%) 46%,#1e4fe063, #14367724 43%,transparent 72%);opacity:var(--ma-light,1)}
.mb canvas{z-index:1}
.mb .mb-pin::after{z-index:2;background:radial-gradient(ellipse at var(--ma-scrim-x,21%) 47%,#0b1120ad,transparent 60%)}
.mb .mb-h{color:#f0f2f8}
.mb .mb-h .a{color:#5b83ff12;-webkit-text-stroke:1.2px var(--hl)}
.mb .mb-p{color:#b9c7df}
.mb .mb-k{color:#93b0fa;opacity:1;letter-spacing:.2em}
.mb .mb-lab{color:#9eabc1;font-family:var(--mono);font-weight:400;letter-spacing:.16em}
.mb .mb-dot{width:5px;height:5px;background:var(--hl);box-shadow:0 0 16px #5b83ff80}
.mb .ma-chapter{left:var(--gut);color:#8399bd;font-size:9px;letter-spacing:.12em}
.mb .ma-motion{right:var(--gut);background:#101725bb;border-color:#61749960;color:#c8d6ec;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase}
.mb .ma-motion:hover{border-color:var(--hl);background:#172b4bcc}
.mb .ma-thought{border-left-color:#5b83ff66}
.mb .ma-thought span{color:#8298bd}
.mb .ma-thought p{color:#c6d8f5;font-family:var(--f);font-size:15px;font-style:normal;line-height:1.5}
.mb .mb-nav{left:var(--gut);right:var(--gut);bottom:32px}
.mb .mb-nav::before{background:#6e86b139;height:1px}
.mb .mb-nav-fill{height:2px;background:var(--hl);box-shadow:0 0 18px #5b83ff33}
.mb .mb-nav button{padding:13px 0 0;min-height:52px;gap:12px;color:#7e90af;font-family:var(--d);font-size:22px;font-weight:600;letter-spacing:.025em}
.mb .mb-nav button i,.mb .mb-nav button.on i{width:auto;height:auto;margin:0;border-radius:0;background:none;box-shadow:none;color:var(--hl);font:10px var(--mono)}
.mb .mb-nav button.on{color:#f0f2f8}
.mb .mb-nav button:hover{color:#acc8ff}
.mb .ma-next{display:inline-flex;align-items:center;min-height:44px;gap:16px;margin-top:14px;padding:6px 0;color:#9ebcff;font-family:var(--f);font-size:13px;border-bottom:1px solid #61749960;pointer-events:auto}
.mb .ma-next:hover{color:#fff;border-bottom-color:var(--hl)}
.mb .ma-next:focus-visible{outline:2px solid var(--hl);outline-offset:5px}
.mb .ma-next[hidden]{display:none}
@media(min-width:761px) and (max-width:1100px){.mb .mb-copy{width:42vw}.mb .mb-h{font-size:clamp(48px,6.7vw,74px)}.mb .mb-lab{margin-bottom:14px}.mb .ma-thought{margin-top:16px}.mb .ma-thought p{font-size:14px}.mb .ma-next{margin-top:10px}}
@media(max-width:760px){.mb .ma-chapter{left:22px;font-size:8px}.mb .ma-motion{right:22px}.mb .mb-nav{left:22px;right:22px;bottom:24px}.mb .mb-nav button{gap:4px;font-size:clamp(11px,3.4vw,14px);letter-spacing:.01em}.mb .mb-nav button span,.mb .mb-nav button.on span{display:inline;white-space:nowrap}.mb .mb-nav button i{font-size:8px}.mb .ma-thought p{font-size:12px}.mb .ma-next{font-size:12px;margin-top:10px;min-height:44px}}
@media(max-width:760px) and (max-height:700px){.mb .ma-next{margin-top:6px;min-height:44px}}
.mb[data-journey="2"] .mb-pin::after{background:linear-gradient(90deg,#0b1120d9,#0b11208a 29%,transparent 65%)}
@media(max-width:760px){.mb[data-journey="2"] .mb-pin::after{background:linear-gradient(180deg,transparent 35%,#0b1120ad 54%,#0b1120e5 80%)}}

/* GPU surface shares the original canvas clock, camera, pause and reduced-motion state. */
.mb .ma-evolution{z-index:1;pointer-events:none}
.mb .ma-evolution[hidden]{display:none}

.mb[data-journey="3"] .mb-pin::before{opacity:calc(var(--ma-light,1) * .6)}

.mb .ma-video-source{position:absolute;width:1px;height:1px;left:0;top:0;opacity:0;pointer-events:none}

/* Clip the scene without creating a nested scroll area around the controls. */
.mb .mb-pin{overflow:clip}