/* Vintage Begonia — Signature differentiator: "Chalk-Paint Before to After"  (Kai)
   Self-contained, mounted into <section id="signature">. Every rule scoped under #signature.
   A soft before/after reveal: drag the handle (or use the arrow keys) to wipe a worn piece into
   its powder-blue chalk-painted finish. The two faces are CSS-drawn placeholders (a real photo
   pair swaps into --before-img / --after-img later). Airy, pastel, hands-on. Distinct from the
   Gardener's Cottage (Victorian) build next door. Local palette vars scoped to #signature. */

#signature{
  --vb-powder:#C1D9E6; --vb-cream:#E6E5D5; --vb-greige:#C3BAA9; --vb-bluegrey:#9BACB0;
  --vb-taupe:#7F7B6E; --vb-wood:#4A4236; --vb-paper:#FBFAF5; --vb-ink:#3A3630;
  --vb-pos:50;
}

#signature .ba{
  max-width:60rem; margin-inline:auto; padding:clamp(1.4rem, 4vw, 2.6rem);
  border-radius:16px; color:var(--vb-ink);
  background:linear-gradient(170deg, var(--vb-paper), var(--vb-cream));
  box-shadow:0 12px 34px rgba(58,54,48,.14), inset 0 0 0 1px rgba(58,54,48,.06);
  text-align:center;
}
#signature .ba__eyebrow{
  font-size:.72rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--vb-bluegrey); margin:0 0 .4rem;
}
#signature .ba__title{
  margin:0 0 .3rem; font-family:Georgia,"Times New Roman",serif; font-weight:700;
  font-size:clamp(1.6rem, 1.1rem + 2.2vw, 2.5rem); color:var(--vb-wood);
}
#signature .ba__sub{ margin:0 auto 1.3rem; max-width:32rem; color:var(--vb-taupe); font-size:.98rem; }

#signature .ba__stage{
  position:relative; overflow:hidden; border-radius:12px; aspect-ratio:4/3; max-height:26rem;
  margin-inline:auto; box-shadow:inset 0 0 0 1px rgba(58,54,48,.1);
  --clip: calc(100% - var(--vb-pos) * 1%);
}
#signature .ba__face{ position:absolute; inset:0; display:flex; align-items:flex-end; padding:1.1rem; }
#signature .ba__face-label{
  font-size:.66rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  padding:.28rem .66rem; border-radius:999px; background:rgba(251,250,245,.82); color:var(--vb-ink);
}
/* BEFORE — worn, unfinished (base layer). Swap a real photo via --before-img. */
#signature .ba__before{
  background:
    var(--before-img, none),
    repeating-linear-gradient(92deg, rgba(74,66,54,.10) 0 3px, transparent 3px 15px),
    linear-gradient(160deg, var(--vb-greige), #9c927f);
  background-size:cover; background-position:center;
}
/* AFTER — powder-blue chalk-paint finish (clipped overlay). Swap a real photo via --after-img. */
#signature .ba__after{
  clip-path:inset(0 var(--clip) 0 0);
  justify-content:flex-end;
  background:
    var(--after-img, none),
    radial-gradient(120% 90% at 30% 20%, rgba(255,255,255,.4), transparent 55%),
    linear-gradient(160deg, var(--vb-powder), #a9c7d8);
  background-size:cover; background-position:center;
}
/* the chalk-drawn "piece" motif so the before/after reads without a photo */
#signature .ba__piece{
  position:absolute; inset:14% 16%; border-radius:6px; border:2px solid rgba(58,54,48,.22);
  box-shadow:inset 0 0 0 6px rgba(255,255,255,.06);
}
#signature .ba__piece::before, #signature .ba__piece::after{
  content:""; position:absolute; left:8%; right:8%; height:1px; background:rgba(58,54,48,.2);
}
#signature .ba__piece::before{ top:38%; } #signature .ba__piece::after{ top:66%; }

/* divider handle */
#signature .ba__handle{
  position:absolute; top:0; bottom:0; left:calc(var(--vb-pos) * 1%); width:2px;
  background:var(--vb-paper); box-shadow:0 0 0 1px rgba(58,54,48,.2); pointer-events:none; transform:translateX(-1px);
}
#signature .ba__handle::after{
  content:"\2194"; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:2.2rem; height:2.2rem; border-radius:50%; background:var(--vb-paper); color:var(--vb-taupe);
  display:flex; align-items:center; justify-content:center; font-size:1rem; box-shadow:0 3px 10px rgba(58,54,48,.25);
}
/* the accessible control that actually drives the reveal */
#signature .ba__range{
  position:absolute; inset:0; width:100%; height:100%; margin:0; cursor:ew-resize; opacity:0;
}
#signature .ba__range:focus-visible ~ .ba__handle::after{ outline:3px solid var(--vb-bluegrey); outline-offset:2px; }
#signature .ba__note{ margin:1rem 0 0; font-size:.8rem; color:var(--vb-taupe); }

@media (min-width:720px){ #signature .ba__stage{ aspect-ratio:16/9; } }