/* md-ba · cursore prima/dopo condiviso (19/10/2026). Stessa grafica dello slider della landing VR
   (/p/progetto-immersivo-vr.html): divisorio e pomello oro, etichette, auto-demo al primo ingresso in vista.
   Markup: <div class="ba" data-ba data-ba-ratio="3/2"><div class="ba-layer"><img …dopo…></div>
           <div class="ba-layer ba-before"><img …prima…></div><div class="ba-handle"></div>
           <div class="ba-knob">⇔</div><span class="ba-cap before">…</span><span class="ba-cap after">…</span></div> */
@property --pos { syntax:'<percentage>'; inherits:true; initial-value:50%; }
.ba { position:relative; aspect-ratio:3/2; overflow:hidden; border-radius:4px; user-select:none; touch-action:none; box-shadow:0 8px 40px rgba(0,0,0,.16); cursor:ew-resize; background:#e9e6df; --pos:50%; outline:none; }
.ba:focus-visible { box-shadow:0 0 0 3px #C5A760, 0 8px 40px rgba(0,0,0,.16); }
.ba.ba-anim { transition:--pos .9s cubic-bezier(.45,0,.2,1); }
.ba-layer { position:absolute; inset:0; }
.ba-layer img { display:block; width:100%; height:100%; object-fit:cover; -webkit-user-drag:none; user-select:none; pointer-events:none; }
.ba-before { clip-path: inset(0 calc(100% - var(--pos,50%)) 0 0); }
.ba-handle { position:absolute; top:0; bottom:0; left:var(--pos,50%); width:3px; background:#C5A760; transform:translateX(-1.5px); z-index:3; pointer-events:none; }
.ba-knob { position:absolute; top:50%; left:var(--pos,50%); transform:translate(-50%,-50%); z-index:4; width:64px; height:64px; border-radius:50%; background:#C5A760; color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 18px rgba(0,0,0,.34); pointer-events:none; font-size:30px; line-height:1; }
.ba-knob::before { content:''; position:absolute; inset:-7px; border-radius:50%; border:2px solid #C5A760; opacity:.55; animation:ba-ring 2.4s ease-out infinite; }
.ba.ba-touched .ba-knob::before { animation:none; opacity:0; }
@keyframes ba-ring { 0%{transform:scale(.9);opacity:.6} 70%{transform:scale(1.35);opacity:0} 100%{opacity:0} }
.ba-cap { position:absolute; top:14px; z-index:3; font-family:'Poppins',Helvetica,Arial,sans-serif; font-size:13px; font-weight:600; letter-spacing:.3px; padding:7px 14px; border-radius:20px; pointer-events:none; max-width:46%; line-height:1.2; box-shadow:0 4px 14px rgba(0,0,0,.25); }
.ba-cap.before { left:12px; background:rgba(26,26,26,.72); color:#fff; }
.ba-cap.after { right:12px; background:#C5A760; color:#fff; }
.ba-sm .ba-knob { width:46px; height:46px; font-size:22px; }
.ba-sm .ba-cap { font-size:11px; padding:5px 11px; top:10px; }
.ba-hint { text-align:center; font-size:12px; color:#999; margin-top:12px; letter-spacing:.3px; }
.ba-hint strong { color:#C5A760; font-weight:600; }
@media (prefers-reduced-motion:reduce){ .ba.ba-anim { transition:none; } .ba-knob::before { animation:none; } }