/* ═══════════════════════════════════════════════════════════════════════════
   scan — a private document scanner. "The Light Table": a cool charcoal
   viewfinder, warm paper, a teal scan-laser accent. The signature moment is
   the page flattening from skew to a crisp rectangle on capture.
   ═══════════════════════════════════════════════════════════════════════════ */
@font-face{ font-family:"Grotesk"; src:url(/fonts/grotesk-500.woff2) format("woff2"); font-weight:500; font-display:swap; }
@font-face{ font-family:"Grotesk"; src:url(/fonts/grotesk-700.woff2) format("woff2"); font-weight:700; font-display:swap; }
@font-face{ font-family:"Mono"; src:url(/fonts/mono-400.woff2) format("woff2"); font-weight:400; font-display:swap; }

:root{
  --ink:#0C0E11;          /* cool charcoal */
  --ink-2:#161A20;
  --ink-3:#1E242C;
  --paper:#F6F3EC;        /* warm scan paper */
  --teal:#2FE0C0;         /* scan-laser accent */
  --teal-deep:#15B79E;
  --amber:#E8B84B;
  --text:#EDF0F2;
  --soft:rgba(237,240,242,.66);
  --mute:rgba(237,240,242,.42);
  --line:rgba(237,240,242,.12);
  --line-2:rgba(237,240,242,.22);
  --r:12px; --r-lg:18px; --r-xl:26px;
  --ease:cubic-bezier(.22,.68,.3,1);
  --sans:"Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono:"Mono", ui-monospace, "SF Mono", Menlo, monospace;
}
*{ box-sizing:border-box; }
[hidden]{ display:none !important; }
html,body{ margin:0; height:100%; }
body{ font-family:var(--sans); background:var(--ink); color:var(--text); -webkit-font-smoothing:antialiased; overflow:hidden; letter-spacing:-.01em; }
.mono{ font-family:var(--mono); letter-spacing:0; }
button{ font-family:inherit; cursor:pointer; }
:focus-visible{ outline:2px solid var(--teal); outline-offset:2px; border-radius:6px; }
.grain{ position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background:radial-gradient(120% 90% at 50% -10%, rgba(47,224,192,.06), transparent 55%), radial-gradient(80% 60% at 100% 110%, rgba(232,184,75,.05), transparent 60%); }

/* ── top bar ─────────────────────────────────────────────────────────────── */
.topbar{ position:fixed; top:0; left:0; right:0; z-index:15; display:flex; align-items:center; justify-content:space-between;
  padding:16px clamp(16px,4vw,40px); }
.brand{ display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:inherit; }
.brand-mark{ width:34px; height:34px; border-radius:9px; display:grid; place-items:center; background:var(--ink-2); border:1px solid var(--line-2); }
.brand-mark svg{ width:19px; height:19px; fill:none; stroke:var(--teal); stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.brand-mark .beam{ stroke:var(--teal); animation:beam 2.6s var(--ease) infinite; }
@keyframes beam{ 0%,100%{ opacity:.35; transform:translateY(-4px); } 50%{ opacity:1; transform:translateY(4px); } }
.brand-word{ font-weight:700; font-size:19px; letter-spacing:-.03em; }
.top-meta{ display:flex; align-items:center; gap:12px; }
.pagecount{ font-size:12px; color:var(--soft); }
.top-xw{ font-size:12.5px; color:var(--mute); text-decoration:none; } .top-xw b{ color:var(--soft); } .top-xw:hover{ color:var(--text); }
@media(max-width:560px){ .top-xw{ display:none; } }

/* ── stage / views ───────────────────────────────────────────────────────── */
.stage{ position:relative; z-index:1; height:100dvh; }
.view{ position:absolute; inset:0; display:flex; flex-direction:column; animation:fade .35s var(--ease) both; }
@keyframes fade{ from{ opacity:0; } to{ opacity:1; } }

/* buttons */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px; border:1px solid var(--line-2); background:var(--ink-2); color:var(--text);
  font-weight:700; font-size:14px; letter-spacing:-.01em; padding:11px 18px; border-radius:12px; transition:.16s var(--ease); }
.btn .i{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.btn:hover{ transform:translateY(-1px); }
.btn.teal{ background:linear-gradient(150deg,var(--teal),var(--teal-deep)); border-color:transparent; color:#04211c; box-shadow:0 10px 30px -12px rgba(47,224,192,.6); }
.btn.ghost{ background:transparent; } .btn.ghost:hover{ border-color:var(--text); }
.btn.big{ padding:15px 24px; font-size:15.5px; border-radius:14px; }
.btn.sm{ padding:8px 14px; font-size:13px; border-radius:9px; }

/* ── START ─────────────────────────────────────────────────────────────────── */
.start{ align-items:center; justify-content:center; text-align:center; padding:0 clamp(20px,5vw,40px); }
.start-inner{ max-width:640px; }
.eyebrow{ display:inline-flex; align-items:center; gap:9px; font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--mute); margin:0 0 24px; }
.eyebrow .pin{ width:7px; height:7px; border-radius:50%; background:var(--teal); box-shadow:0 0 0 4px rgba(47,224,192,.16); }
.start h1{ font-size:clamp(2.6rem,7vw,4.6rem); line-height:.98; letter-spacing:-.04em; font-weight:700; margin:0 0 20px; }
.start h1 .hl{ color:var(--teal); }
.lede{ font-size:clamp(15px,2vw,18px); line-height:1.55; color:var(--soft); max-width:46ch; margin:0 auto 34px; }
.lede em{ font-style:normal; color:var(--text); }
.start-actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.start-steps{ list-style:none; display:flex; gap:24px; justify-content:center; padding:0; margin:40px 0 0; color:var(--mute); font-size:13px; }
.start-steps li{ display:flex; align-items:center; gap:8px; } .start-steps .mono{ color:var(--teal); font-size:11px; }
@media(max-width:560px){ .start-steps{ gap:14px; font-size:12px; } .start-actions{ flex-direction:column; width:100%; max-width:340px; margin:0 auto; } .start-actions .btn{ width:100%; } }

/* ── CAMERA ─────────────────────────────────────────────────────────────────── */
.capture{ background:#000; }
.viewfinder{ position:relative; flex:1; overflow:hidden; }
#cam{ width:100%; height:100%; object-fit:cover; display:block; }
.brackets i{ position:absolute; width:34px; height:34px; border:3px solid var(--teal); }
.brackets i:nth-child(1){ left:8%; top:16%; border-right:0; border-bottom:0; border-radius:8px 0 0 0; }
.brackets i:nth-child(2){ right:8%; top:16%; border-left:0; border-bottom:0; border-radius:0 8px 0 0; }
.brackets i:nth-child(3){ right:8%; bottom:14%; border-left:0; border-top:0; border-radius:0 0 8px 0; }
.brackets i:nth-child(4){ left:8%; bottom:14%; border-right:0; border-top:0; border-radius:0 0 0 8px; }
.brackets{ animation:pulse 2.4s var(--ease) infinite; }
@keyframes pulse{ 0%,100%{ opacity:.5; } 50%{ opacity:1; } }
.scanline{ position:absolute; left:8%; right:8%; top:16%; height:2px; background:linear-gradient(90deg,transparent,var(--teal),transparent);
  box-shadow:0 0 12px 1px rgba(47,224,192,.7); animation:scanmove 2.8s var(--ease) infinite; }
@keyframes scanmove{ 0%{ top:16%; } 50%{ top:84%; } 100%{ top:16%; } }
.cam-bar{ position:absolute; left:0; right:0; bottom:0; z-index:3; display:flex; align-items:center; justify-content:space-around;
  padding:22px 24px calc(22px + env(safe-area-inset-bottom,0)); background:linear-gradient(transparent, rgba(0,0,0,.6)); }
.shutter{ width:74px; height:74px; border-radius:50%; border:4px solid #fff; background:transparent; display:grid; place-items:center; }
.shutter span{ width:56px; height:56px; border-radius:50%; background:#fff; transition:.12s var(--ease); }
.shutter:active span{ transform:scale(.85); background:var(--teal); }
.round-btn{ width:46px; height:46px; border-radius:50%; display:grid; place-items:center; border:1px solid rgba(255,255,255,.3); background:rgba(0,0,0,.4); color:#fff; font-size:16px; backdrop-filter:blur(6px); }
.round-btn svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.cam-hint{ position:absolute; left:0; right:0; top:calc(16px + env(safe-area-inset-top,0)); z-index:3; text-align:center; font-size:12px; color:rgba(255,255,255,.85); letter-spacing:.06em; }

/* ── CROP ─────────────────────────────────────────────────────────────────── */
.crop{ background:var(--ink); }
.crop-stage{ position:relative; flex:1; display:grid; place-items:center; overflow:hidden; padding:clamp(14px,3vw,30px); }
.crop-base{ max-width:100%; max-height:100%; border-radius:6px; box-shadow:0 30px 70px -34px rgba(0,0,0,.8); display:block; }
.crop-overlay{ position:absolute; touch-action:none; cursor:grab; }
.loupe{ position:absolute; z-index:5; width:120px; height:120px; border-radius:50%; border:2px solid var(--teal); box-shadow:0 10px 30px -10px rgba(0,0,0,.8); pointer-events:none; }
.crop-bar, .en-bar{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px clamp(16px,4vw,40px) calc(16px + env(safe-area-inset-bottom,0)); border-top:1px solid var(--line); background:var(--ink-2); }
.crop-tip{ font-size:11.5px; color:var(--mute); }
@media(max-width:560px){ .crop-tip{ display:none; } }

/* ── ENHANCE ──────────────────────────────────────────────────────────────── */
.enhance{ background:var(--ink); }
.en-stage{ flex:1; display:grid; place-items:center; overflow:hidden; padding:clamp(14px,3vw,30px); }
.en-canvas{ max-width:100%; max-height:100%; border-radius:4px; box-shadow:0 30px 70px -34px rgba(0,0,0,.85); background:#fff; display:block; animation:flatten .6s var(--ease) both; }
@keyframes flatten{ from{ transform:perspective(900px) rotateX(9deg) rotateY(-6deg) scale(.9); opacity:.4; } to{ transform:none; opacity:1; } }
.filters{ display:flex; align-items:center; gap:8px; justify-content:center; padding:14px 16px; flex-wrap:wrap; }
.chip{ background:var(--ink-2); border:1px solid var(--line-2); color:var(--soft); font-size:13px; font-weight:600; padding:9px 15px; border-radius:999px; transition:.15s var(--ease); }
.chip:hover{ border-color:var(--line-2); color:var(--text); }
.chip.is-on{ background:var(--teal); border-color:var(--teal); color:#04211c; }
.chip.icon{ padding:9px; width:38px; display:grid; place-items:center; } .chip.icon svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.chip-sep{ width:1px; height:20px; background:var(--line); margin:0 2px; }

/* ── PAGES ────────────────────────────────────────────────────────────────── */
.pages{ overflow-y:auto; padding:calc(74px + env(safe-area-inset-top,0)) clamp(16px,4vw,40px) 40px; }
.pages-head{ text-align:center; margin-bottom:22px; }
.pages-head h2{ font-size:clamp(1.6rem,4vw,2.4rem); letter-spacing:-.03em; margin:0 0 6px; }
.pages-sub, #pages-sub{ font-size:12.5px; color:var(--mute); }
.page-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:clamp(14px,2vw,24px); max-width:1100px; margin:0 auto 30px; }
.pcard{ position:relative; }
.psheet{ position:relative; background:#fff; border-radius:4px; overflow:hidden; aspect-ratio:1/1.32; box-shadow:0 2px 4px rgba(0,0,0,.4), 0 16px 34px -18px rgba(0,0,0,.7); transition:.18s var(--ease); }
.pcard:hover .psheet{ transform:translateY(-3px); }
.psheet img{ width:100%; height:100%; object-fit:cover; display:block; }
.pnum{ position:absolute; left:8px; top:8px; z-index:2; font-family:var(--mono); font-size:10px; color:#fff; background:rgba(0,0,0,.55); padding:2px 7px; border-radius:5px; }
.pdel{ position:absolute; right:8px; top:8px; z-index:2; width:28px; height:28px; border-radius:8px; border:1px solid rgba(255,255,255,.3); background:rgba(0,0,0,.55); color:#fff; display:grid; place-items:center; opacity:0; transition:.15s var(--ease); }
.pcard:hover .pdel{ opacity:1; } .pdel:hover{ background:#E5484D; border-color:#E5484D; }
.pdel svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
.pmove{ display:flex; justify-content:center; gap:6px; margin-top:8px; }
.pmove button{ width:30px; height:26px; border-radius:7px; border:1px solid var(--line); background:var(--ink-2); color:var(--soft); font-size:12px; }
.pmove button:hover:not(:disabled){ border-color:var(--teal); color:var(--teal); } .pmove button:disabled{ opacity:.3; }
.pages-actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-bottom:22px; }
.pages-foot{ text-align:center; font-size:13px; color:var(--mute); } .pages-foot a{ color:var(--teal); text-decoration:none; } .pages-foot a:hover{ text-decoration:underline; }

/* ── busy + toast ─────────────────────────────────────────────────────────── */
.busy{ position:fixed; inset:0; z-index:60; display:grid; place-items:center; gap:0; background:rgba(12,14,17,.72); backdrop-filter:blur(4px); }
.busy-ring{ width:44px; height:44px; border-radius:50%; border:3px solid rgba(47,224,192,.25); border-top-color:var(--teal); animation:spin .8s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.busy-txt{ position:absolute; margin-top:76px; font-size:12px; letter-spacing:.08em; color:var(--soft); }
.toast{ position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(8px); z-index:70; opacity:0; transition:.25s var(--ease);
  background:var(--ink-3); color:var(--text); font-size:13px; font-weight:500; padding:11px 18px; border-radius:999px; border:1px solid var(--line-2); box-shadow:0 18px 40px -18px rgba(0,0,0,.7); pointer-events:none; }
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ── desktop gate ─────────────────────────────────────────────────────────── */
.gate{ align-items:center; justify-content:center; text-align:center; padding:0 clamp(20px,5vw,40px); }
.gate-inner{ max-width:520px; }
.gate h1{ font-size:clamp(2.4rem,6vw,4rem); line-height:.98; letter-spacing:-.04em; font-weight:700; margin:0 0 18px; }
.gate h1 .hl{ color:var(--teal); }
.qr-card{ display:inline-flex; flex-direction:column; align-items:center; gap:12px; margin:14px 0 20px; padding:22px; border-radius:var(--r-lg); background:#fff; box-shadow:0 30px 70px -34px rgba(0,0,0,.8); }
.qr-card .qr{ width:180px; height:180px; } .qr-card .qr img, .qr-card .qr canvas{ width:180px !important; height:180px !important; display:block; }
.qr-url{ font-size:13px; color:#0C0E11; letter-spacing:.04em; }
.link-btn{ background:none; border:0; color:var(--soft); font-size:13.5px; text-decoration:underline; text-underline-offset:3px; } .link-btn:hover{ color:var(--text); }

/* ── live detection overlay ─────────────────────────────────────────────────── */
.detect{ position:absolute; inset:0; width:100%; height:100%; z-index:2; pointer-events:none; }
.cam-status{ position:absolute; left:50%; top:calc(16px + env(safe-area-inset-top,0)); transform:translateX(-50%); z-index:3;
  display:inline-flex; align-items:center; gap:8px; padding:7px 14px; border-radius:999px; background:rgba(0,0,0,.5); backdrop-filter:blur(8px);
  color:rgba(255,255,255,.9); font-size:11.5px; letter-spacing:.04em; }
.cam-status .dot{ width:7px; height:7px; border-radius:50%; background:var(--amber); }
.cam-status.locked{ color:#04211c; background:var(--teal); } .cam-status.locked .dot{ background:#04211c; }
/* auto-capture progress ring on the shutter */
.shutter{ position:relative; }
.auto-ring{ position:absolute; inset:-6px; width:86px; height:86px; transform:rotate(-90deg); pointer-events:none; }
.auto-ring circle{ fill:none; stroke:var(--teal); stroke-width:4; stroke-linecap:round; stroke-dasharray:226; stroke-dashoffset:226; transition:stroke-dashoffset .12s linear; filter:drop-shadow(0 0 6px rgba(47,224,192,.7)); }

/* ── share + handoff (pages) ────────────────────────────────────────────────── */
.pages-actions{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-bottom:26px; }
.handoff{ display:grid; gap:12px; max-width:520px; margin:0 auto; }
.handoff-card{ display:flex; align-items:center; gap:14px; padding:15px 18px; border-radius:var(--r-lg); background:var(--ink-2); border:1px solid var(--line); text-decoration:none; color:var(--text); transition:.16s var(--ease); text-align:left; }
.handoff-card:hover{ border-color:var(--teal); transform:translateY(-2px); }
.handoff-card svg{ width:22px; height:22px; flex:none; fill:none; stroke:var(--teal); stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.handoff-card b{ display:block; font-size:14.5px; } .handoff-card span{ font-size:12px; color:var(--mute); }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; }
  .en-canvas{ animation:none; }
}