/* Barber page signature: a clipper cuts a skin fade, pinned on scroll. Driven by src/scene-barber.js (sets --o on [data-j]). */
.bsc{position:relative;height:560vh;padding:0;background:#0e0c0a;color:#fff}
.bsc-stick{position:sticky;top:0;height:100svh;overflow:hidden;isolation:isolate;
  background:radial-gradient(70% 75% at 68% 42%,#2e2217 0,#18120d 48%,#0e0c0a 82%)}
.bsc-gl{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0}
/* a soft scrim so the captions never sit on a bright subject */
.bsc-stick::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(90deg,rgba(14,12,10,.82) 0,rgba(14,12,10,.5) 30%,rgba(14,12,10,0) 48%)}
.bsc-copy{position:relative;z-index:1;height:100%;pointer-events:none}
.bsc [data-j]{opacity:var(--o,0);transform:translateY(calc((1 - var(--o,0)) * 26px));will-change:opacity,transform}
.bsc-layer,.bsc-end{position:absolute;left:32px;top:50%;translate:0 -50%;width:min(450px,36vw)}
.bsc .eyebrow{color:rgba(255,255,255,.58)}
.bsc h2{font:800 clamp(42px,5vw,72px)/.98 "Inter Tight";letter-spacing:-.045em;margin-top:18px}
.bsc h3{font:800 clamp(34px,4vw,56px)/1 "Inter Tight";letter-spacing:-.04em}
.bsc em{font:italic 400 1.08em/.9 "Instrument Serif";letter-spacing:-.01em;color:var(--spot)}
.bsc-layer p{margin-top:20px;font-size:18px;line-height:1.55;color:rgba(255,255,255,.7);max-width:420px;text-shadow:0 2px 20px rgba(14,12,10,.8)}
.bsc-n{display:block;margin-bottom:16px;font:700 12px/1 Inter;letter-spacing:.2em;text-transform:uppercase;color:var(--spot)}
.bsc-call{font-size:clamp(44px,5.4vw,82px)!important;line-height:.95!important}
.bsc-call em{display:inline-block;text-shadow:0 0 50px rgba(var(--spot-rgb),.45)}
.bsc-taps{list-style:none;padding:0;display:flex;gap:10px;margin-top:30px;flex-wrap:wrap}
.bsc-taps li{display:flex;align-items:center;gap:9px;padding:9px 15px 9px 9px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);font:700 14.5px "Inter Tight";color:rgba(255,255,255,.88)}
.bsc-taps b{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--spot);color:var(--ink);font:800 13px "Inter Tight";box-shadow:0 0 20px rgba(var(--spot-rgb),.55)}
.bsc-cta{margin-top:28px;pointer-events:auto}
/* no WebGL: the finished fade as a still, the copy still runs on scroll */
.bsc-no3d .bsc-gl,.bsc-no3d .bsc-stick::after{display:none}
.bsc-no3d .bsc-stick{background:linear-gradient(90deg,rgba(14,12,10,.92) 0,rgba(14,12,10,.55) 45%,rgba(14,12,10,0) 70%),url(/img/scene-barber.webp) 70% 50%/cover no-repeat,#0e0c0a}

@media (max-width:760px){
  .bsc-stick::after{background:linear-gradient(180deg,rgba(14,12,10,.85) 0,rgba(14,12,10,.55) 24%,rgba(14,12,10,0) 40%)}
  .bsc{height:520vh}
  .bsc-stick{background:radial-gradient(120% 60% at 50% 66%,#2e2217 0,#18120d 50%,#0e0c0a 85%)}
  .bsc-layer{left:16px;right:16px;top:94px;translate:none;width:auto}
  .bsc h2{font-size:clamp(34px,10vw,46px);margin-top:12px}
  .bsc h3{font-size:clamp(30px,8.6vw,40px)}
  .bsc-layer p{margin-top:10px;font-size:15.5px;line-height:1.5}
  .bsc-n{margin-bottom:10px}
  .bsc-end{left:16px;right:16px;top:94px;bottom:26px;translate:none;width:auto;display:flex;flex-direction:column}
  .bsc-call{font-size:clamp(36px,10.5vw,50px)!important}
  .bsc-taps{margin-top:auto;gap:7px}.bsc-taps li{font-size:13px;padding:7px 12px 7px 7px}.bsc-taps b{width:22px;height:22px;font-size:12px}
  .bsc-cta{margin-top:14px;align-self:flex-start}
  .bsc-no3d .bsc-stick{background:linear-gradient(180deg,rgba(14,12,10,.95) 0,rgba(14,12,10,.4) 50%,rgba(14,12,10,.1) 100%),url(/img/scene-barber.webp) 50% 70%/cover no-repeat,#0e0c0a}
}
@media (prefers-reduced-motion:reduce){
  .bsc{height:auto}
  .bsc-stick{position:relative;height:100svh;min-height:620px}
  .bsc [data-j]{transform:none}
}