/* ============================================================
   InspektLABS — Capture viewfinder (capture.css)
   Full-bleed dark camera context. Used by the live guided
   walkaround (SCAN-004). High-contrast, glanceable while moving.
   ============================================================ */

.capture {
  position: fixed; inset: 0; background: #05080b; color: #fff; overflow: hidden;
  display: flex; flex-direction: column;
  font-family: var(--font-body);
}
/* the simulated camera feed */
.capture__feed {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(80% 60% at 50% 40%, #1d3b44, #112a31 55%, #0a1d22 100%);
}
.capture__feed::after { /* faint car silhouette hint */
  content: ""; position: absolute; left: 50%; top: 54%; transform: translate(-50%,-50%);
  width: 78%; height: 34%; border-radius: 46% 46% 38% 38%/60% 60% 40% 40%;
  background: radial-gradient(closest-side, rgba(255,255,255,.05), transparent);
  box-shadow: 0 30px 80px rgba(0,0,0,.4);
}
.capture__scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, transparent 22%, transparent 62%, rgba(0,0,0,.72) 100%); }

/* viewfinder corner brackets — the brand motif at full scale */
.vf-brackets { position: absolute; inset: 18px; z-index: 2; pointer-events: none; }
.vf-brackets .c { position: absolute; width: 30px; height: 30px; border: 2.5px solid rgba(255,255,255,.9); }
.vf-brackets .c.tl { top: 0; left: 0; border-right: 0; border-bottom: 0; border-top-left-radius: 4px; }
.vf-brackets .c.tr { top: 0; right: 0; border-left: 0; border-bottom: 0; border-top-right-radius: 4px; }
.vf-brackets .c.bl { bottom: 0; left: 0; border-right: 0; border-top: 0; border-bottom-left-radius: 4px; }
.vf-brackets .c.br { bottom: 0; right: 0; border-left: 0; border-top: 0; border-bottom-right-radius: 4px; }

.capture__top { position: relative; z-index: 3; display: flex; align-items: center; gap: 10px;
  padding: calc(env(safe-area-inset-top) + 14px) 16px 0; }
.capture__rec { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px 5px 9px;
  border-radius: var(--r-pill); background: rgba(0,0,0,.4); backdrop-filter: blur(6px);
  font-family: var(--font-mono); font-size: 13px; font-weight: 500; letter-spacing: 0.02em; }
.capture__rec .blink { width: 9px; height: 9px; border-radius: 50%; background: var(--rec);
  animation: blink 1s steps(2, jump-none) infinite; }
@keyframes blink { 50% { opacity: 0.2; } }
.capture__type { margin-left: auto; padding: 5px 12px; border-radius: var(--r-pill);
  background: rgba(0,0,0,.4); backdrop-filter: blur(6px); font-size: 12.5px; font-weight: 600; }
.capture__iconbtn { width: 42px; height: 42px; border-radius: 50%; border: 0; color: #fff;
  background: rgba(0,0,0,.4); backdrop-filter: blur(6px); display: grid; place-items: center; cursor: pointer; }
.capture__iconbtn .ic { width: 20px; height: 20px; }
.capture__iconbtn[aria-pressed="true"] { background: #fff; color: #05080b; }

/* the big angle word, center stage */
.capture__angle { position: relative; z-index: 3; flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px; text-align: center; padding: 0 24px; }
.capture__angle .lead-in { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.18em;
  text-transform: uppercase; color: rgba(255,255,255,.7); }
.capture__angle h2 { font-family: var(--font-display); font-weight: 700; font-size: 40px;
  letter-spacing: -0.01em; text-shadow: 0 2px 18px rgba(0,0,0,.5); }
.capture__angle .next { margin-top: 8px; font-size: 13px; color: rgba(255,255,255,.66); }
.capture__arrow { width: 34px; height: 34px; opacity: .85; animation: nudge 1.6s var(--ease) infinite; }
@keyframes nudge { 50% { transform: translateX(7px); } }

/* bottom: segmented progress + instruction + stop */
.capture__bottom { position: relative; z-index: 3; padding: 0 18px calc(env(safe-area-inset-bottom) + 20px); }
.vf-segments { display: flex; gap: 5px; margin-bottom: 14px; }
.vf-segments .seg-b { flex: 1; height: 5px; border-radius: var(--r-pill); background: rgba(255,255,255,.22);
  overflow: hidden; }
.vf-segments .seg-b > i { display: block; height: 100%; width: 0; background: var(--brand-strong);
  border-radius: inherit; transition: width var(--dur-2) linear; }
.vf-segments .seg-b.done > i { width: 100% !important; background: var(--ok); }
.capture__instr { text-align: center; font-size: 13.5px; color: rgba(255,255,255,.8); margin-bottom: 16px; }

.capture__stoprow { display: flex; align-items: center; justify-content: center; gap: 40px; }
.shutter { width: 76px; height: 76px; border-radius: 50%; border: 4px solid rgba(255,255,255,.85);
  background: transparent; display: grid; place-items: center; cursor: pointer; }
.shutter > i { width: 28px; height: 28px; border-radius: 7px; background: var(--rec); transition: all var(--dur-2); }
.shutter--recording > i { border-radius: 7px; }
.capture__side { width: 56px; text-align: center; color: rgba(255,255,255,.8); font-size: 11.5px; }
.capture__sidebtn { width: 50px; height: 50px; border-radius: 50%; border: 0; background: rgba(255,255,255,.14);
  color: #fff; display: grid; place-items: center; cursor: pointer; margin: 0 auto 4px; }
.capture__sidebtn .ic { width: 22px; height: 22px; }

/* 3-2-1 countdown overlay */
.countdown { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center;
  background: rgba(5,8,11,.55); backdrop-filter: blur(2px); }
.countdown b { font-family: var(--font-display); font-weight: 700; font-size: 96px; color: #fff;
  text-shadow: 0 4px 40px rgba(0,0,0,.5); }