/* MDS Before/After Slider CSS */
.mds-before-after{position:relative;user-select:none;border-radius:var(--mds-ba-radius,8px);overflow:hidden;box-shadow:0 8px 32px rgba(0,0,0,.2)}
.mds-ba-inner{position:relative;width:100%;height:0;overflow:hidden}
.mds-ba-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.mds-ba-placeholder{display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.05);color:rgba(255,255,255,.4);font-size:14px}
.mds-ba-before-wrap{position:absolute;top:0;left:0;height:100%;overflow:hidden;z-index:2}
.mds-ba-vertical .mds-ba-before-wrap{width:100%;height:50%}
.mds-ba-before{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Handle */
.mds-ba-handle{position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);z-index:10;display:flex;flex-direction:column;align-items:center;cursor:col-resize}
.mds-ba-vertical .mds-ba-handle{top:50%;left:0;right:0;bottom:auto;transform:translateY(-50%);flex-direction:row;cursor:row-resize}
.mds-ba-handle-line{flex:1;width:2px;background:var(--mds-ba-handle,#FF6B00);box-shadow:0 0 8px var(--mds-ba-handle,#FF6B00)}
.mds-ba-vertical .mds-ba-handle-line{height:2px;width:auto;flex:1}
.mds-ba-handle-btn{width:44px;height:44px;border-radius:50%;background:var(--mds-ba-handle,#FF6B00);display:flex;align-items:center;justify-content:center;gap:4px;box-shadow:0 2px 12px rgba(0,0,0,.3),0 0 0 3px rgba(255,255,255,.2);transition:transform .2s,box-shadow .2s;flex-shrink:0}
.mds-ba-handle:active .mds-ba-handle-btn,.mds-before-after.dragging .mds-ba-handle-btn{transform:scale(1.12);box-shadow:0 4px 20px rgba(0,0,0,.4),0 0 0 4px rgba(255,255,255,.3)}
.mds-ba-handle-dot{width:12px;height:12px;border-radius:50%;background:#fff}
.mds-ba-arrow{font-size:20px;color:#fff;font-weight:300;line-height:1}
/* Labels */
.mds-ba-label{position:absolute;z-index:5;font-family:'Rajdhani','Space Grotesk',sans-serif;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:5px 12px;border-radius:3px;backdrop-filter:blur(8px)}
.mds-ba-label-before{top:16px;left:16px;background:rgba(0,0,0,.5);color:#fff}
.mds-ba-label-after{top:16px;right:16px;background:rgba(0,0,0,.5);color:rgba(255,255,255,.7)}
/* Intro animation */
.mds-ba-intro .mds-ba-before-wrap{animation:baIntro 1.2s 0.5s cubic-bezier(.4,0,.2,1) both}
@keyframes baIntro{0%{width:80%}50%{width:20%}100%{width:50%}}
.mds-ba-vertical.mds-ba-intro .mds-ba-before-wrap{animation:baIntroV 1.2s .5s cubic-bezier(.4,0,.2,1) both}
@keyframes baIntroV{0%{height:80%}50%{height:20%}100%{height:50%}}