/* Image Compare Slider - by Rehmat (Animated Creativity) - MIT License */
.cmp {
  --pos: 50%;               /* where the divider starts */
  --cmp-line: #ffffff;      /* divider and knob colour  */
  --cmp-knob: 46px;         /* knob size                */
  position: relative; display: block; overflow: hidden; line-height: 0;
  user-select: none; -webkit-user-select: none; touch-action: pan-y; cursor: ew-resize;
  border-radius: 16px;
}
.cmp img { display: block; width: 100%; height: auto; pointer-events: none; -webkit-user-drag: none; }
.cmp img:nth-of-type(2) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; clip-path: inset(0 0 0 var(--pos)); }

.cmp-handle {
  position: absolute; top: 0; bottom: 0; left: var(--pos); width: var(--cmp-knob); margin-left: calc(var(--cmp-knob) / -2);
  padding: 0; border: 0; background: none; cursor: ew-resize; display: grid; place-items: center; color: var(--cmp-line);
  -webkit-tap-highlight-color: transparent;
}
.cmp-handle::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; background: currentColor; box-shadow: 0 0 12px rgba(0,0,0,.45); }
.cmp-handle::after {
  content: ""; position: relative; width: var(--cmp-knob); height: var(--cmp-knob); border-radius: 50%;
  background: currentColor url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111827' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l-5 6 5 6M15 6l5 6-5 6'/%3E%3C/svg%3E") center / 56% no-repeat;
  box-shadow: 0 6px 20px rgba(0,0,0,.4); transition: transform .2s;
}
.cmp-handle:hover::after, .cmp.is-dragging .cmp-handle::after { transform: scale(1.1); }
.cmp-handle:focus-visible { outline: none; }
.cmp-handle:focus-visible::after { box-shadow: 0 0 0 4px rgba(34,211,238,.8), 0 6px 20px rgba(0,0,0,.4); }

.cmp-label {
  position: absolute; bottom: 14px; padding: .45em .9em; border-radius: 99px; line-height: 1.2;
  font: 600 13px/1.2 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; letter-spacing: .04em;
  color: #fff; background: rgba(0,0,0,.55); backdrop-filter: blur(6px); pointer-events: none; transition: opacity .25s;
}
.cmp-label--before { left: 14px; }
.cmp-label--after { right: 14px; }
.cmp.hide-before .cmp-label--before, .cmp.hide-after .cmp-label--after { opacity: 0; }

/* top / bottom version: add data-compare-vertical */
.cmp--vertical { cursor: ns-resize; touch-action: pan-x; }
.cmp--vertical img:nth-of-type(2) { clip-path: inset(var(--pos) 0 0 0); }
.cmp--vertical .cmp-handle { top: var(--pos); bottom: auto; left: 0; right: 0; width: auto; height: var(--cmp-knob); margin: calc(var(--cmp-knob) / -2) 0 0; cursor: ns-resize; }
.cmp--vertical .cmp-handle::before { top: 50%; bottom: auto; left: 0; right: 0; width: auto; height: 2px; margin: -1px 0 0; }
.cmp--vertical .cmp-handle::after { transform: rotate(90deg); }
.cmp--vertical .cmp-handle:hover::after, .cmp--vertical.is-dragging .cmp-handle::after { transform: rotate(90deg) scale(1.1); }
.cmp--vertical .cmp-label--before { top: 14px; bottom: auto; left: 14px; }
.cmp--vertical .cmp-label--after { bottom: 14px; left: 14px; right: auto; }