/* ===================================================================
FAIME — Before / After comparison slider (reusable, no dependencies)
Drop into any project page:
1. (in )
2. paste a .ba-block markup section (see projects/_before-after-snippet.html)
3. (before )
Brand vars (--navy / --gold / --gold2) come from each page's :root,
with safe fallbacks below so the slider also works standalone.
=================================================================== */
.ba-block{padding:96px 0;background:var(--navy2,#071428);position:relative;overflow:hidden}
.ba-block::before{content:'';position:absolute;inset:0;background:
radial-gradient(900px 420px at 18% -10%,rgba(201,168,76,.10),transparent 60%),
radial-gradient(760px 380px at 100% 120%,rgba(201,168,76,.06),transparent 55%);
pointer-events:none}
.ba-inner{max-width:1180px;margin:0 auto;padding:0 24px;position:relative;z-index:1}
.ba-head{text-align:center;max-width:720px;margin:0 auto 52px}
.ba-head .eyebrow{font-size:11px;font-weight:700;letter-spacing:4px;text-transform:uppercase;color:var(--gold,#C9A84C);margin-bottom:14px}
.ba-head h2{font-family:'Barlow Condensed',sans-serif;font-size:clamp(2rem,4vw,3rem);font-weight:800;color:#fff;text-transform:uppercase;line-height:1.05;margin:0}
.ba-head h2 span{color:var(--gold,#C9A84C)}
.ba-head p{color:rgba(255,255,255,.62);font-size:1rem;line-height:1.7;margin:16px auto 0;max-width:560px}
/* layout: stack of sliders */
.ba-grid{display:grid;gap:46px}
@media(min-width:860px){.ba-grid.two{grid-template-columns:1fr 1fr;align-items:start}}
.ba-card{position:relative}
.ba-card .ba-title{font-family:'Barlow Condensed',sans-serif;font-size:1.35rem;font-weight:800;color:#fff;text-transform:uppercase;letter-spacing:.5px;margin:0 0 16px;padding-left:16px;position:relative}
.ba-card .ba-title::before{content:'';position:absolute;left:0;top:3px;bottom:3px;width:4px;background:var(--gold,#C9A84C);border-radius:2px}
/* ---- the slider itself ---- */
.ba-slider{
--pos:50%;
position:relative;width:100%;border-radius:16px;overflow:hidden;
background:var(--navy,#0C1F3F);
box-shadow:0 22px 60px rgba(0,0,0,.4);
border:1px solid rgba(201,168,76,.22);
touch-action:none;-webkit-user-select:none;user-select:none;cursor:ew-resize;
aspect-ratio:16/9;
}
.ba-slider.portrait{aspect-ratio:3/4;max-width:460px;margin:0 auto}
.ba-slider img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.ba-slider .ba-after{z-index:1}
.ba-slider .ba-before{z-index:2;clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
/* corner labels */
.ba-tag{position:absolute;top:14px;z-index:4;font-family:'Barlow Condensed',sans-serif;
font-size:12px;font-weight:800;letter-spacing:2px;text-transform:uppercase;
padding:6px 13px;border-radius:4px;pointer-events:none;backdrop-filter:blur(3px)}
.ba-tag.before{left:14px;background:rgba(7,20,40,.78);color:#fff;border:1px solid rgba(255,255,255,.25)}
.ba-tag.after{right:14px;background:var(--gold,#C9A84C);color:var(--navy,#0C1F3F)}
/* divider + handle */
.ba-line{position:absolute;top:0;bottom:0;left:var(--pos);width:3px;z-index:3;
background:linear-gradient(var(--gold2,#E5C060),var(--gold,#C9A84C));
transform:translateX(-50%);box-shadow:0 0 14px rgba(201,168,76,.55)}
.ba-handle{position:absolute;top:50%;left:var(--pos);z-index:5;
width:46px;height:46px;border-radius:50%;transform:translate(-50%,-50%);
background:var(--gold,#C9A84C);color:var(--navy,#0C1F3F);
display:flex;align-items:center;justify-content:center;
border:3px solid #fff;box-shadow:0 6px 20px rgba(0,0,0,.45);
cursor:ew-resize;transition:transform .15s ease,box-shadow .15s ease}
.ba-handle:hover{transform:translate(-50%,-50%) scale(1.08)}
.ba-handle:focus-visible{outline:3px solid #fff;outline-offset:3px}
.ba-handle svg{width:24px;height:24px;display:block;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
/* first-load nudge so users know to drag (stops on interaction) */
.ba-slider.hint .ba-handle{animation:baNudge 1.7s ease-in-out 2}
@keyframes baNudge{0%,100%{transform:translate(-50%,-50%)}25%{transform:translate(calc(-50% - 10px),-50%)}60%{transform:translate(calc(-50% + 10px),-50%)}}
.ba-caption{margin-top:14px;color:rgba(255,255,255,.55);font-size:.86rem;line-height:1.55;text-align:center}
@media(prefers-reduced-motion:reduce){
.ba-slider.hint .ba-handle{animation:none}
.ba-handle{transition:none}
}