/* ============================================================
   B.T.S — camera viewfinder gallery + right filmstrip
   ============================================================ */

/* ---------- compact hero ---------- */
.bts-hero{position:relative;text-align:center;overflow:hidden;
  padding:calc(var(--nav-h) + clamp(52px,11vh,104px)) clamp(18px,6vw,110px) clamp(20px,5vh,44px)}
.bts-hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 94% at 50% -8%,var(--accent-soft),transparent 56%)}
.bts-hero__in{position:relative;z-index:1;max-width:920px;margin:0 auto}
.bts-hero__ey{justify-content:center}
.bts-hero__title{font-family:var(--heading);font-weight:400;font-size:clamp(50px,9.4vw,124px);
  line-height:.92;letter-spacing:-.015em;color:var(--warm-white);margin-top:8px;text-shadow:0 2px 40px rgba(0,0,0,.5)}
.bts-hero__title em{font-style:italic;color:var(--accent-2)}
.bts-hero__sub{margin:18px auto 0;max-width:46ch;font-family:var(--heading);font-style:italic;font-weight:300;
  color:var(--warm-white-dim);font-size:clamp(16px,2vw,25px);line-height:1.36}
.bts-hero__cue{margin-top:26px;display:inline-flex;align-items:center;gap:11px;
  font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--concrete-dim)}
.bts-hero__cue .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 4px var(--accent-soft),0 0 14px var(--accent-glow);animation:btspulse 2.6s var(--ease) infinite}
@keyframes btspulse{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1.18)}}

/* ---------- viewfinder stage ---------- */
.vf{position:relative;background:var(--ink)}
.vf-sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;align-items:center;justify-content:center}
.vf-amb{position:absolute;inset:0;pointer-events:none;background:radial-gradient(58% 60% at 46% 48%,var(--accent-soft),transparent 70%)}

/* the viewfinder frame — 3:2, sized to leave room for the right filmstrip */
.vf-frame{position:relative;height:min(84svh,132vw);aspect-ratio:2/3;border-radius:9px;overflow:hidden;background:#0a0a0a;
  box-shadow:0 0 0 100vmax rgba(0,0,0,.74), 0 50px 130px -34px rgba(0,0,0,.85);
  outline:1px solid rgba(244,244,244,.14);outline-offset:-1px;
  --uiline:rgba(244,244,244,.9); --uidim:rgba(244,244,244,.55)}

/* image stack — photos shown WHOLE (contain, never cropped) */
.vf-imgs{position:absolute;inset:0;z-index:1}
.vf-shot{position:absolute;inset:0;opacity:0;display:flex;align-items:center;justify-content:center;will-change:opacity,transform}
.vf-shot img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
  filter:grayscale(1) contrast(1.04) brightness(.98);will-change:transform}
.vf-frame::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background:radial-gradient(132% 132% at 50% 46%,transparent 58%,rgba(0,0,0,.42));
  box-shadow:inset 0 0 110px rgba(0,0,0,.4)}

/* ---------- viewfinder UI (thin, semi-transparent line elements) ---------- */
.vf-ui{position:absolute;inset:0;z-index:4;pointer-events:none;
  font-family:var(--body);font-variant-numeric:tabular-nums;color:var(--uiline)}
.vf-grid span,.vf-grid b{position:absolute;background:#fff;opacity:.12}
.vf-grid span{top:0;bottom:0;width:1px}.vf-grid span:nth-child(1){left:33.333%}.vf-grid span:nth-child(2){left:66.666%}
.vf-grid b{left:0;right:0;height:1px}.vf-grid b:nth-child(3){top:33.333%}.vf-grid b:nth-child(4){top:66.666%}
.vf-corners i{position:absolute;width:26px;height:26px;border:1.5px solid var(--uiline);opacity:.55}
.vf-corners i:nth-child(1){left:16px;top:16px;border-right:0;border-bottom:0}
.vf-corners i:nth-child(2){right:16px;top:16px;border-left:0;border-bottom:0}
.vf-corners i:nth-child(3){left:16px;bottom:16px;border-right:0;border-top:0}
.vf-corners i:nth-child(4){right:16px;bottom:16px;border-left:0;border-top:0}
.vf-af{position:absolute;left:50%;top:50%;width:clamp(74px,8vw,110px);height:clamp(74px,8vw,110px);
  transform:translate(-50%,-50%);transition:filter .3s var(--ease)}
.vf-af span{position:absolute;width:16px;height:16px;border:1.5px solid var(--uiline);transition:border-color .3s var(--ease),box-shadow .3s var(--ease)}
.vf-af span:nth-child(1){left:0;top:0;border-right:0;border-bottom:0}
.vf-af span:nth-child(2){right:0;top:0;border-left:0;border-bottom:0}
.vf-af span:nth-child(3){left:0;bottom:0;border-right:0;border-top:0}
.vf-af span:nth-child(4){right:0;bottom:0;border-left:0;border-top:0}
.vf-af::after{content:"";position:absolute;left:50%;top:50%;width:5px;height:5px;transform:translate(-50%,-50%);
  border-radius:50%;background:var(--uiline);opacity:.5;transition:.3s var(--ease)}
.vf-frame.focusing .vf-af span{border-color:var(--accent-2);box-shadow:0 0 9px var(--accent-glow)}
.vf-frame.focusing .vf-af::after{background:var(--accent-2);opacity:1;box-shadow:0 0 10px var(--accent-glow)}
.vf-frame.focusing .vf-points i{background:var(--accent-2);opacity:.9;box-shadow:0 0 7px var(--accent-glow)}
.vf-frame.focusing .vf-af{animation:vffocus .34s var(--ease)}
@keyframes vffocus{0%{transform:translate(-50%,-50%) scale(1.14)}100%{transform:translate(-50%,-50%) scale(1)}}
.vf-points i{position:absolute;width:6px;height:6px;border:1px solid var(--uiline);opacity:.28;transition:.3s var(--ease);transform:translate(-50%,-50%)}
.vf-points i:nth-child(1){left:33.3%;top:50%}.vf-points i:nth-child(2){left:66.6%;top:50%}
.vf-points i:nth-child(3){left:50%;top:33.3%}.vf-points i:nth-child(4){left:50%;top:66.6%}
.vf-points i:nth-child(5){left:33.3%;top:33.3%}.vf-points i:nth-child(6){left:66.6%;top:66.6%}
.vf-top{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;justify-content:space-between;
  padding:16px 22px;font-size:10px;letter-spacing:.22em;text-transform:uppercase}
.vf-rec{display:inline-flex;align-items:center;gap:8px;color:var(--uidim)}
.vf-rec b{width:8px;height:8px;border-radius:50%;background:#e0503a;box-shadow:0 0 8px rgba(224,80,58,.7);animation:vfrec 1.8s steps(1) infinite}
@keyframes vfrec{0%,60%{opacity:1}61%,100%{opacity:.15}}
.vf-mode{color:var(--uidim)}
.vf-bot{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:clamp(10px,2vw,24px);
  padding:15px clamp(16px,2.4vw,26px);font-size:clamp(11px,1.05vw,13px);letter-spacing:.08em}
.vf-val{color:var(--uiline);font-weight:500;white-space:nowrap}
.vf-val small{color:var(--uidim);font-weight:400;margin-right:3px}
.vf-val.flip{animation:vfflip .42s var(--ease)}
@keyframes vfflip{0%{opacity:0;transform:translateY(-5px)}100%{opacity:1;transform:none}}
.vf-ev{flex:1;display:flex;align-items:center;justify-content:center;gap:9px;color:var(--uidim);font-size:10px}
.vf-ev .track{position:relative;width:min(200px,24vw);height:12px}
.vf-ev .track::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(255,255,255,.28)}
.vf-ev .tick{position:absolute;top:50%;width:1px;height:6px;background:rgba(255,255,255,.34);transform:translateY(-50%)}
.vf-ev .tick.mid{height:11px;background:rgba(255,255,255,.6)}
.vf-ev .mark{position:absolute;top:50%;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:6px solid var(--accent-2);transform:translate(-50%,-118%);transition:left .8s var(--ease);filter:drop-shadow(0 0 4px var(--accent-glow))}
.vf-batt{display:inline-flex;align-items:center;gap:6px;color:var(--uidim);font-size:10px}
.vf-count{color:var(--uiline);font-weight:500;letter-spacing:.14em;white-space:nowrap}
.vf-count b{color:var(--accent-2)}.vf-count small{color:var(--uidim)}

/* ---------- right filmstrip (all frames scrolling; the one at the mark is live) ---------- */
.vf-strip{position:absolute;top:50%;right:clamp(14px,3vw,46px);transform:translateY(-50%);
  width:clamp(80px,8vw,116px);height:min(74vh,660px);z-index:6;overflow:hidden;
  -webkit-mask:linear-gradient(180deg,transparent,#000 15%,#000 85%,transparent);
          mask:linear-gradient(180deg,transparent,#000 15%,#000 85%,transparent)}
.vf-strip-track{position:absolute;left:0;right:0;top:0;will-change:transform}
.vf-thumb{display:block;width:100%;aspect-ratio:3/2;margin:0 0 11px;padding:0;border:0;background:#181818;
  border-radius:5px;overflow:hidden;cursor:pointer;opacity:.3;transform:scale(.8);
  transition:opacity .45s var(--ease),transform .45s var(--ease)}
.vf-thumb img{width:100%;height:100%;object-fit:contain;display:block;filter:grayscale(1) brightness(.95)}
.vf-thumb.is-active{opacity:1;transform:scale(1)}
.vf-thumb.is-active img{filter:grayscale(.15) brightness(1)}
/* the centre indicator mark */
.vf-strip-mark{position:absolute;left:-7px;right:-7px;top:50%;transform:translateY(-50%);aspect-ratio:3/2;pointer-events:none;z-index:3}
.vf-strip-mark i{position:absolute;width:13px;height:13px;border:1.5px solid var(--accent-2);filter:drop-shadow(0 0 5px var(--accent-glow))}
.vf-strip-mark i:nth-child(1){left:0;top:0;border-right:0;border-bottom:0}
.vf-strip-mark i:nth-child(2){right:0;top:0;border-left:0;border-bottom:0}
.vf-strip-mark i:nth-child(3){left:0;bottom:0;border-right:0;border-top:0}
.vf-strip-mark i:nth-child(4){right:0;bottom:0;border-left:0;border-top:0}
.vf-strip-cap{position:absolute;right:calc(clamp(14px,3vw,46px) + clamp(80px,8vw,116px) + 12px);top:50%;transform:translateY(-50%);
  z-index:6;writing-mode:vertical-rl;font-size:9px;letter-spacing:.34em;text-transform:uppercase;color:var(--concrete-dim);pointer-events:none}

/* progress rail + hint */
.vf-rail{position:absolute;left:calc(50% - clamp(40px,4vw,60px));transform:translateX(-50%);bottom:clamp(20px,4.5vh,44px);
  width:min(260px,38vw);height:1px;background:rgba(255,255,255,.12);z-index:5}
.vf-rail span{position:absolute;inset:0;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,var(--accent),var(--ember))}
.vf-hint{position:absolute;left:calc(50% - clamp(40px,4vw,60px));transform:translateX(-50%);bottom:clamp(30px,6.5vh,60px);z-index:5;
  font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:var(--concrete-dim);transition:opacity .6s var(--ease)}

/* ---------- responsive ---------- */
@media(max-width:1024px){ .vf-frame{width:min(70vw,100vh)} .vf-corners i{width:20px;height:20px} }
@media(max-width:680px){
  .vf-frame{width:94vw}
  .vf-strip,.vf-strip-mark,.vf-strip-cap,.vf-grid,.vf-points,.vf-rec,.vf-ev,.vf-batt{display:none}  /* simplified viewfinder */
  .vf-rail,.vf-hint{left:50%}
  .vf-top{padding:12px 14px}.vf-bot{gap:12px;padding:12px 14px;justify-content:space-between;font-size:11px}
  .vf-corners i{left:10px;top:10px;width:16px;height:16px}
  .vf-corners i:nth-child(2){right:10px;left:auto}.vf-corners i:nth-child(3){bottom:10px;top:auto}
  .vf-corners i:nth-child(4){right:10px;bottom:10px;left:auto;top:auto}
}

/* ---------- CTA band ---------- */
.bts-cta{position:relative;z-index:2;background:var(--charcoal);border-top:1px solid rgba(244,244,244,.06);
  padding:clamp(90px,15vh,170px) clamp(18px,6vw,110px);text-align:center;overflow:hidden}
.bts-cta::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(90% 120% at 50% 0%,var(--accent-soft),transparent 60%)}
.bts-cta__in{position:relative;max-width:860px;margin:0 auto}
.cta-title{font-family:var(--heading);font-weight:300;font-size:clamp(38px,6.4vw,90px);line-height:1.03;margin-top:16px}
.cta-title em{font-style:italic;color:var(--accent-2)}
.cta-sub{color:var(--warm-white-dim);margin-top:20px;font-size:clamp(14px,1.4vw,18px);line-height:1.6}
.cta-btns{margin-top:36px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

@media (prefers-reduced-motion:reduce){.bts-hero__cue .dot{animation:none}.vf-rec b{animation:none}}