/* Palomo Digital - Widget Antes/Depois (v1.1 — otimizado)
 * - contain: isolamento de layout/paint
 * - transform translateX: GPU em vez de reflow
 * - will-change: dica ao navegador
 * - aspect-ratio reservado pela imagem (width/height nativos)
 * - prefers-reduced-motion respeitado
 */

.ba-wrap {
    position: relative;
    width: 100%;
    border-radius: 14px;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
    cursor: ew-resize;
    contain: layout paint;
    outline: none;
}

.ba-wrap:focus-visible {
    box-shadow: 0 0 0 3px rgba(242, 41, 91, 0.4);
}

/* Imagem base (ANTES) — define o aspect ratio do container */
.ba-wrap > .ba-base {
    display: block;
    width: 100%;
    height: auto;
    pointer-events: none;
}

/* Camada DEPOIS — usa clip-path em vez de mudar width
 * (transform/clip-path são compostos pela GPU, sem reflow). */
.ba-before {
    position: absolute;
    inset: 0;
    overflow: hidden;
    clip-path: inset(0 0 0 50%);
    will-change: clip-path;
}

.ba-before .ba-img,
.ba-before img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

/* Linha + handle posicionados pela variável --ba-pos (0-100).
 * Mudar só a variável dispara composite, sem reflow. */
.ba-line {
    position: absolute;
    top: 0;
    left: calc(var(--ba-pos, 50) * 1%);
    width: 2px;
    height: 100%;
    margin-left: -1px;
    background: #fff;
    pointer-events: none;
    will-change: left;
}

.ba-handle {
    position: absolute;
    top: 50%;
    left: calc(var(--ba-pos, 50) * 1%);
    width: 44px;
    height: 44px;
    margin-top: -22px;
    margin-left: -22px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
    will-change: left;
}

/* Camada DEPOIS revela conforme arrasta */
.ba-before {
    clip-path: inset(0 0 0 calc(var(--ba-pos, 50) * 1%));
}

/* Camada ANTES (espelhada) — mostra só o lado esquerdo da divisória.
 * Carrega só o label "Antes", então o label some quando a linha passa por cima. */
.ba-after {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    clip-path: inset(0 calc(100% - var(--ba-pos, 50) * 1%) 0 0);
    will-change: clip-path;
}

.ba-label {
    position: absolute;
    top: 14px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #fff;
    background: rgba(0, 0, 0, 0.55);
    padding: 4px 10px;
    border-radius: 20px;
    pointer-events: none;
    z-index: 2;
}

.ba-label-antes  { left: 14px; }
.ba-label-depois { right: 14px; }

/* Respeita usuários com movimento reduzido */
@media (prefers-reduced-motion: reduce) {
    .ba-before, .ba-after, .ba-line, .ba-handle {
        transition: none !important;
        will-change: auto;
    }
}

/* Mobile: handle um pouco menor */
@media (max-width: 600px) {
    .ba-handle {
        width: 36px;
        height: 36px;
        margin-top: -18px;
        margin-left: -18px;
    }
}