/* fx-before-after: drag (or arrow-key) a divider across two photos of the same job.
   Real pairs only — never a fabricated "before". The frame has a fixed aspect ratio, so nothing shifts. */
[data-fx~="before-after"]{--pos:50%;position:relative;overflow:hidden;aspect-ratio:var(--ba-ratio,3/2);border-radius:var(--r,6px);touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:ew-resize;background:#222}
[data-fx~="before-after"] img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
[data-fx~="before-after"] .ba-after{clip-path:inset(0 0 0 var(--pos))}
[data-fx~="before-after"] .ba-line{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.15);pointer-events:none}
[data-fx~="before-after"] .ba-knob{position:absolute;top:50%;left:var(--pos);width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;background:#fff;color:#1d2430;display:grid;place-items:center;box-shadow:0 8px 24px -8px rgba(0,0,0,.5);pointer-events:none;transition:transform .2s}
[data-fx~="before-after"].ba-drag .ba-knob{transform:scale(1.08)}
[data-fx~="before-after"] .ba-knob svg{width:22px;height:22px}
[data-fx~="before-after"] .ba-tag{position:absolute;top:12px;padding:6px 10px;border-radius:4px;background:rgba(17,20,26,.72);color:#fff;font:600 13px/1 system-ui,sans-serif;pointer-events:none}
[data-fx~="before-after"] .ba-tag.b{left:12px}[data-fx~="before-after"] .ba-tag.a{right:12px}
[data-fx~="before-after"] input[type=range]{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:ew-resize;pointer-events:none}
[data-fx~="before-after"]:has(input:focus-visible){outline:3px solid var(--a,#d9622b);outline-offset:3px}
@media (prefers-reduced-motion:no-preference){[data-fx~="before-after"].ba-hint .ba-after,[data-fx~="before-after"].ba-hint .ba-line,[data-fx~="before-after"].ba-hint .ba-knob{transition:clip-path .9s cubic-bezier(.2,.7,.1,1),left .9s cubic-bezier(.2,.7,.1,1)}}