/* "Your photo in. Your post out." (index.html #beforeafter, assets/cx-ba.js): a made-up creator's avatar photo and the
   post made from it, one over the other, split by a line people drag. Follows the site theme.
   --pos (0%..100%, set by the script) is how much of the photo shows, from the left; the plain style is 50%, so without
   script the picture is still a finished half-and-half comparison. */

.cx-ba{position:relative;overflow:clip;isolation:isolate;--cx-ba-r:clamp(14px,1.5vw,20px)}
.cx-ba-bg{position:absolute;inset:0;z-index:-1;pointer-events:none;background:
  radial-gradient(38% 46% at 74% 48%,var(--accent-soft),transparent 70%),
  radial-gradient(30% 40% at 4% 96%,light-dark(oklch(.9 .05 300/.55),oklch(.4 .1 300/.22)),transparent 70%)}
.cx-ba-bg::after{content:"";position:absolute;inset:0;background:var(--grain);opacity:.045;mix-blend-mode:overlay}

/* copy left, the picture right; on narrow screens the picture comes after the creator tabs */
.cx-ba-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);column-gap:clamp(32px,6vw,96px);
  grid-template-areas:". viz" "head viz" "tabs viz" "note viz" "cta viz" ". viz";grid-template-rows:1fr auto auto auto auto 1fr}
.cx-ba-head{grid-area:head}
.cx-ba-tabs{grid-area:tabs}
.cx-ba-fig{grid-area:viz}
.cx-ba-note{grid-area:note}
.cx-ba-cta{grid-area:cta}

.cx-ba h2{font-size:clamp(2.2rem,1.3rem + 3.2vw,4.2rem);line-height:.98;letter-spacing:-.04em;margin:14px 0 18px;max-width:11ch}
.cx-ba h2 em{font-style:normal;padding-inline:.04em;-webkit-box-decoration-break:clone;box-decoration-break:clone;color:light-dark(var(--ink),var(--accent));
  background:linear-gradient(transparent 58%,light-dark(var(--accent),transparent) 58% 92%,transparent 92%)}
.cx-ba .lede{max-width:44ch}

/* creator tabs: a segmented control; the script slides one ink pill under the pressed tab (--x, --w) */
.cx-ba-tabs{position:relative;justify-self:start;display:flex;gap:2px;margin-top:28px;padding:5px;max-width:100%;overflow-x:auto;scrollbar-width:none;
  border-radius:999px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-1)}
.cx-ba-tabs::-webkit-scrollbar{display:none}
.cx-ba-tabs::before{content:"";position:absolute;top:5px;bottom:5px;left:0;width:var(--w,0px);translate:var(--x,0px) 0;border-radius:999px;
  background:var(--ink);opacity:0;transition:translate .5s var(--ease),width .5s var(--ease)}
.cx-ba-tabs.has-pill::before{opacity:1}
.cx-ba-tab{position:relative;z-index:1;flex:none;padding:.72em 1.2em;border-radius:999px;font:600 .94rem/1 var(--f-text);color:var(--ink-2);transition:color .3s}
.cx-ba-tab:hover{color:var(--ink)}
.cx-ba-tab[aria-pressed="true"]{color:var(--bg)}
.cx-ba-tabs:not(.has-pill) .cx-ba-tab[aria-pressed="true"]{background:var(--ink)}
.cx-ba-tab:focus-visible{outline:3px solid var(--accent);outline-offset:-3px}

/* ---------- the picture ---------- */
.cx-ba-fig{position:relative;justify-self:center;align-self:center;width:100%;max-width:clamp(340px,(100svh - 270px) * .8,540px);margin:0;display:grid;gap:16px}
/* a gallery mat round the picture: the two labels sit on it, over their own side */
.cx-ba-mat{padding:12px;border-radius:calc(var(--cx-ba-r) + 12px);background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-2)}
.cx-ba-labels{display:flex;justify-content:space-between;gap:12px;padding:2px 6px 12px}
.cx-ba-lab{display:inline-flex;align-items:center;gap:8px;font:600 .7rem/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);transition:opacity .4s}
.cx-ba-lab::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--muted)}
.cx-ba-lab.is-post::before{background:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.cx-ba.is-photo .cx-ba-lab.is-post,.cx-ba.is-post .cx-ba-lab.is-photo{opacity:.45}

.cx-ba-stage{--pos:50%;position:relative;aspect-ratio:4/5;touch-action:pan-y;cursor:ew-resize;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.cx-ba-frame{position:absolute;inset:0;overflow:hidden;border-radius:var(--cx-ba-r);background:var(--surface-3);isolation:isolate;
  box-shadow:0 0 0 1px var(--line)}
.cx-ba-layer{position:absolute;inset:0}
.cx-ba-layer img{width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none}
.cx-ba-before{clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.cx-ba-line{position:absolute;z-index:2;top:-6px;bottom:-6px;left:var(--pos);width:0}
.cx-ba-line::before{content:"";position:absolute;top:0;bottom:0;left:-1px;width:2px;border-radius:2px;background:#fff;
  box-shadow:0 0 0 .5px oklch(0 0 0/.12),0 0 22px oklch(0 0 0/.4)}
.cx-ba-stage.is-ease .cx-ba-before{transition:clip-path .55s var(--ease)}
.cx-ba-stage.is-ease .cx-ba-line{transition:left .55s var(--ease)}
.cx-ba-knob{position:absolute;top:50%;left:0;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;display:grid;place-items:center;cursor:ew-resize;
  background:oklch(1 0 0/.94);color:oklch(.2 .03 265);
  box-shadow:0 0 0 1px oklch(0 0 0/.06),0 12px 28px -8px oklch(0 0 0/.55),0 0 0 8px oklch(1 0 0/.2);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:scale .35s var(--ease),box-shadow .35s}
.cx-ba-knob svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.cx-ba-stage:hover .cx-ba-knob{scale:1.07;box-shadow:0 0 0 1px oklch(0 0 0/.06),0 14px 32px -8px oklch(0 0 0/.6),0 0 0 10px oklch(1 0 0/.26)}
.cx-ba-knob:focus-visible{outline:3px solid var(--accent);outline-offset:4px;border-radius:50%}

/* the creator's posts: nine in a row under the picture; a sideways strip on phones */
.cx-ba-thumbs{position:relative;display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:8px;padding:4px}
.cx-ba-thumb{position:relative;aspect-ratio:1;border-radius:12px;overflow:hidden;background:var(--surface-3);opacity:.58;
  transition:opacity .3s,transform .35s var(--ease),box-shadow .3s}
.cx-ba-thumb img{width:100%;height:100%;object-fit:cover}
.cx-ba-thumb:hover{opacity:1;transform:translateY(-2px)}
.cx-ba-thumb[aria-pressed="true"]{opacity:1;box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--ink)}
.cx-ba-thumb:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.cx-ba-cap{font-size:.72rem;color:var(--muted);text-align:center}

/* ---------- the caption that comes with the post ---------- */
.cx-ba-note{margin-top:24px;max-width:470px;padding:18px 20px 16px;border-radius:var(--r-l);background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-1)}
.cx-ba-who{display:flex;align-items:center;gap:10px;min-width:0}
.cx-ba-face{flex:none;width:36px;height:36px;border-radius:50%;object-fit:cover;padding:2px;
  background:linear-gradient(45deg,#feda75,#fa7e1e 28%,#d62976 52%,#962fbf 76%,#4f5bd5)}
.cx-ba-handle{font-size:.94rem;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cx-ba-place{margin-left:auto;display:inline-flex;align-items:center;gap:5px;min-width:0;font-size:.8rem;color:var(--muted);white-space:nowrap}
.cx-ba-place svg{flex:none;width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cx-ba-text{margin-top:12px;font-size:.98rem;line-height:1.55;color:var(--ink-2)}
.cx-ba-text b{color:var(--ink);font-weight:650}
.cx-ba-plat{margin-top:12px;padding-top:12px;border-top:1px dashed var(--line-strong);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

.cx-ba-cta{margin-top:30px}

@media (max-width:900px){
  .cx-ba-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "tabs" "viz" "note" "cta";grid-template-rows:none}
  .cx-ba h2{max-width:none}
  .cx-ba-tabs{margin:24px 0 26px}
  .cx-ba-fig{justify-self:center}
  .cx-ba-note{justify-self:center;width:100%;max-width:540px;margin-top:28px}
  .cx-ba-cta{justify-self:center}
}
@media (max-width:560px){
  .cx-ba-mat{padding:8px}
  .cx-ba-labels{padding:2px 4px 9px}
  .cx-ba-lab{font-size:.62rem;letter-spacing:.08em}
  .cx-ba-knob{width:48px;height:48px;margin:-24px 0 0 -24px}
  .cx-ba-thumbs{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;padding:5px 5px 7px;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
  .cx-ba-thumbs::-webkit-scrollbar{display:none}
  .cx-ba-thumb{flex:none;width:58px;scroll-snap-align:center}
  .cx-ba-tab{padding:.7em .95em;font-size:.9rem}
  .cx-ba-cta .btn-lg{white-space:normal;text-align:center}
}
@media (prefers-reduced-motion:reduce){
  .cx-ba-tabs::before,.cx-ba-thumb,.cx-ba-knob{transition:none}
  .cx-ba-stage.is-ease .cx-ba-before,.cx-ba-stage.is-ease .cx-ba-line{transition:none}
}