/* Before/after homepage comparison sliders (/free-website-redesign).
   Custom CSS rather than Tailwind utilities so the geometry can be tuned
   without an npm run build:css, and deliberately dependency-free (no GSAP:
   the wow layer only loads it at >=768px and this has to work on phones).

   Layout: the AFTER shot is the base layer and the BEFORE shot sits on top,
   clipped from the left to --pos. So dragging left reveals the new design,
   which is the direction that reads as an improvement. */

.ba {
    position: relative;
    --pos: 50%;
    border-radius: 0.75rem;
    overflow: hidden;
    background: #0f172a;
    /* Drop shadow plus a hairline inset ring, so a light screenshot still
       has an edge against a white band. */
    box-shadow: 0 10px 30px -12px rgb(15 23 42 / 0.35), inset 0 0 0 1px rgb(15 23 42 / 0.08);
    touch-action: pan-y;          /* vertical scrolling still works over it */
    user-select: none;
    -webkit-user-select: none;
    cursor: ew-resize;
}

.ba img {
    display: block;
    width: 100%;
    height: auto;
    pointer-events: none;
}

/* Base layer: the site as it is now. */
.ba-after { display: block; }

/* Top layer: the old design, revealed from the left edge to --pos. */
.ba-before {
    position: absolute;
    inset: 0;
    clip-path: inset(0 calc(100% - var(--pos)) 0 0);
    will-change: clip-path;
}

/* The drag handle. */
.ba-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--pos);
    width: 2px;
    margin-left: -1px;
    background: #fff;
    box-shadow: 0 0 0 1px rgb(15 23 42 / 0.15);
    pointer-events: none;
}

.ba-grip {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 4px 14px rgb(15 23 42 / 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: #224685;
}

.ba-grip svg { width: 0.85rem; height: 0.85rem; }

/* Corner labels. */
.ba-tag {
    position: absolute;
    top: 0.625rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.3rem 0.6rem;
    border-radius: 999px;
    backdrop-filter: blur(4px);
    pointer-events: none;
    white-space: nowrap;
}

.ba-tag-before { left: 0.625rem;  background: rgb(15 23 42 / 0.72); color: #fff; }
.ba-tag-after  { right: 0.625rem; background: rgb(34 70 133 / 0.9);  color: #fff; }

/* Invisible range input over the whole thing: keyboard + screen reader
   control, and the single source of truth for the position. */
.ba-range {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: ew-resize;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
}

.ba-range::-webkit-slider-thumb { -webkit-appearance: none; width: 3rem; height: 100%; }
.ba-range::-moz-range-thumb     { width: 3rem; height: 100%; border: 0; background: transparent; }

/* Visible focus ring for keyboard users, since the input itself is invisible. */
.ba-range:focus-visible { outline: none; }
.ba-range:focus-visible ~ .ba-handle { box-shadow: 0 0 0 3px #fbbf24; }

@media (prefers-reduced-motion: reduce) {
    .ba-before { will-change: auto; }
}