@import url("/static/fonts/fonts.css");

/* ---------------------------------------------------------------- tokens */
:root {
  --bg: #ffffff;
  --ink: #0d1033;                 /* deep navy, never grey */
  --ink-2: #3a3f6b;
  --ink-3: #6d72a3;
  --brand: #3b44ff;               /* ultramarine */
  --brand-2: #6a5cff;
  --brand-soft: #eef0ff;
  --ok: #12b886;
  --warn: #f59f0b;
  --bad: #ef3e5c;
  --holo: linear-gradient(110deg, #72e4ff 0%, #8b7bff 28%, #ff8ad8 52%, #ffd98a 74%, #7cf2c6 100%);
  --glass: rgba(255, 255, 255, .62);
  --glass-strong: rgba(255, 255, 255, .82);
  --glass-line: rgba(255, 255, 255, .9);
  --line: rgba(59, 68, 255, .12);
  --shadow: 0 30px 80px -30px rgba(40, 46, 160, .35), 0 8px 24px -12px rgba(40, 46, 160, .18);
  --r: 26px;
  --r-sm: 16px;
  --serif: "Cormorant Garamond", "Times New Roman", serif;
  --sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100dvh; background: var(--bg); color: var(--ink);
  font: 500 16px/1.5 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
a { color: var(--brand); text-decoration: none; }
button { font: inherit; }
::selection { background: rgba(59, 68, 255, .18); }

/* ---------------------------------------------------------------- aurora backdrop */
.aurora { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: #fff; }
.aurora i { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; animation: drift 26s ease-in-out infinite alternate; }
.aurora i:nth-child(1) { width: 62vmax; height: 62vmax; left: -22vmax; top: -26vmax; background: radial-gradient(closest-side, #c9cdff, transparent); }
.aurora i:nth-child(2) { width: 52vmax; height: 52vmax; right: -24vmax; top: 8vmax; background: radial-gradient(closest-side, #ffd3ef, transparent); animation-delay: -8s; }
.aurora i:nth-child(3) { width: 48vmax; height: 48vmax; left: 10vmax; bottom: -30vmax; background: radial-gradient(closest-side, #c6f6ec, transparent); animation-delay: -15s; }
@keyframes drift { to { transform: translate3d(6vmax, 4vmax, 0) scale(1.12); } }

/* ---------------------------------------------------------------- layout */
.shell { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; padding: calc(18px + env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom)); }
.topbar { width: 100%; max-width: 520px; display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font: 600 26px/1 var(--serif); letter-spacing: .01em; color: var(--ink); }
.brand-mark { width: 30px; height: 30px; border-radius: 9px; background: var(--holo); background-size: 200% 100%; position: relative;
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.7), 0 6px 18px -6px rgba(107, 92, 255, .6); animation: sheen 6s linear infinite; }
.brand-mark::after { content: ""; position: absolute; inset: 7px 9px; border: 2px solid rgba(255,255,255,.95); border-radius: 50% 50% 46% 46%; }
@keyframes sheen { to { background-position: 200% 0; } }
.for { font-size: 13px; color: var(--ink-3); text-align: right; line-height: 1.25; }
.for b { display: block; color: var(--ink); font-weight: 650; }

.card {
  position: relative; width: 100%; max-width: 520px; padding: 28px 24px 24px; border-radius: var(--r);
  background: var(--glass); border: 1px solid var(--glass-line); box-shadow: var(--shadow);
  backdrop-filter: blur(26px) saturate(170%); -webkit-backdrop-filter: blur(26px) saturate(170%);
  animation: rise .5s var(--ease) both;
}
.card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(160deg, rgba(255,255,255,.9), rgba(255,255,255,0) 38%); mix-blend-mode: soft-light; }
@keyframes rise { from { opacity: 0; transform: translateY(14px) scale(.985); } }

h1, .title { margin: 0; font: 600 clamp(32px, 8.4vw, 42px)/1.04 var(--serif); letter-spacing: -.01em; color: var(--ink); }
h1 em, .title em { font-style: italic; background: var(--holo); -webkit-background-clip: text; background-clip: text; color: transparent; background-size: 200% 100%; animation: sheen 8s linear infinite; }
h2 { margin: 26px 0 10px; font: 600 24px/1.15 var(--serif); }
.lead { margin: 12px 0 0; color: var(--ink-2); font-size: 15.5px; line-height: 1.55; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px; padding: 6px 12px; border-radius: 99px;
  background: var(--brand-soft); color: var(--brand); font: 700 11.5px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--holo); }

/* ---------------------------------------------------------------- controls */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 56px;
  padding: 15px 22px; border: 0; border-radius: 18px; cursor: pointer; color: #fff; font: 700 16px/1.2 var(--sans); letter-spacing: .005em;
  background: linear-gradient(135deg, var(--brand), var(--brand-2)); box-shadow: 0 14px 30px -12px rgba(59, 68, 255, .65), inset 0 1px 0 rgba(255,255,255,.35);
  overflow: hidden; transition: transform .15s var(--ease), box-shadow .2s, opacity .2s; -webkit-tap-highlight-color: transparent; }
.btn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform .7s var(--ease); }
.btn:hover::after { transform: translateX(120%); }
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .55; cursor: default; }
.btn.ghost { background: var(--glass-strong); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.btn.small { width: auto; min-height: 40px; padding: 9px 16px; border-radius: 12px; font-size: 14px; }
.actions { display: grid; gap: 10px; margin-top: 26px; }

.field { display: block; margin-top: 14px; }
.field span { display: block; margin: 0 0 6px 4px; font-size: 13px; font-weight: 650; color: var(--ink-2); }
.field input, .field textarea, .field select { width: 100%; padding: 15px 16px; border-radius: var(--r-sm); border: 1px solid var(--line);
  background: rgba(255,255,255,.85); color: var(--ink); font: 600 16.5px/1.3 var(--sans); outline: none; transition: border-color .2s, box-shadow .2s; }
.field input:focus, .field textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 4px rgba(59, 68, 255, .12); }

.options { display: grid; gap: 10px; margin-top: 22px; }
.option { display: flex; align-items: center; gap: 14px; width: 100%; padding: 16px; border-radius: 20px; text-align: left; cursor: pointer;
  border: 1.5px solid var(--line); background: rgba(255,255,255,.72); color: var(--ink); transition: border-color .2s, transform .15s var(--ease), background .2s; }
.option:active { transform: scale(.985); }
.option.on { border-color: var(--brand); background: #fff; box-shadow: 0 10px 26px -14px rgba(59, 68, 255, .45); }
.option b { display: block; font-size: 16.5px; font-weight: 700; }
.option small { display: block; margin-top: 2px; color: var(--ink-3); font-size: 13.5px; line-height: 1.35; }
.option .radio { margin-left: auto; width: 22px; height: 22px; flex: none; border-radius: 50%; border: 2px solid rgba(59,68,255,.25); transition: all .2s; }
.option.on .radio { border: 7px solid var(--brand); }
.doc-ico { width: 54px; height: 54px; flex: none; border-radius: 16px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); }
.doc-ico svg { width: 28px; height: 28px; }

.steps { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 4px; counter-reset: s; }
.steps li { display: flex; gap: 14px; align-items: flex-start; padding: 12px 4px; counter-increment: s; }
.steps li::before { content: counter(s); width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 50%;
  font: 700 13px/1 var(--sans); color: var(--brand); background: var(--brand-soft); box-shadow: inset 0 0 0 1px rgba(59,68,255,.15); }
.steps b { display: block; font-size: 15.5px; }
.steps small { display: block; color: var(--ink-3); font-size: 13.5px; margin-top: 2px; line-height: 1.4; }
.steps li.done::before { content: "✓"; color: #fff; background: var(--ok); box-shadow: none; }

.note { display: flex; gap: 10px; margin-top: 18px; padding: 13px 14px; border-radius: 16px; background: rgba(59,68,255,.06); color: var(--ink-2); font-size: 13.5px; line-height: 1.45; }
.note svg { width: 18px; height: 18px; flex: none; color: var(--brand); margin-top: 1px; }
.tips { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.tips li { padding: 12px 14px; border-radius: 14px; background: rgba(239, 62, 92, .07); color: #8a1730; font-size: 14.5px; line-height: 1.45; }
.footer { margin-top: auto; padding-top: 22px; font-size: 12px; color: var(--ink-3); text-align: center; }
.footer b { font-weight: 700; color: var(--ink-2); }

/* ---------------------------------------------------------------- loaders */
.loader { width: 74px; height: 74px; margin: 6px auto 0; border-radius: 50%; position: relative;
  background: conic-gradient(from 0deg, #72e4ff, #8b7bff, #ff8ad8, #ffd98a, #7cf2c6, #72e4ff); animation: spin 1.4s linear infinite;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px)); mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px)); }
@keyframes spin { to { transform: rotate(1turn); } }
.dots { display: inline-flex; gap: 5px; }
.dots i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: dot 1.2s infinite; }
.dots i:nth-child(2) { animation-delay: .15s; } .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.progress { height: 6px; margin-top: 22px; border-radius: 99px; background: rgba(59,68,255,.1); overflow: hidden; }
.progress i { display: block; height: 100%; width: 3%; border-radius: inherit; background: var(--holo); background-size: 200% 100%;
  animation: sheen 2.4s linear infinite; transition: width 1s cubic-bezier(.2,.7,.3,1); }
.stage { min-height: 24px; margin-top: 14px; text-align: center; color: var(--ink-2); font-weight: 600; font-size: 15px; transition: opacity .25s; }

/* the shot being analysed, with a holographic scan beam */
.scan { position: relative; width: min(280px, 76%); margin: 4px auto 0; aspect-ratio: 4/3; border-radius: 22px; overflow: hidden;
  background: #0d1033; box-shadow: 0 22px 50px -20px rgba(13,16,51,.55); }
.scan.round { width: 190px; aspect-ratio: 3/4; border-radius: 50%; }
.scan img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(1.05); }
.scan::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
  linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px); background-size: 22px 22px; }
.scan::after { content: ""; position: absolute; left: -10%; right: -10%; height: 42%; top: -42%;
  background: linear-gradient(180deg, transparent, rgba(139,123,255,.18) 40%, rgba(114,228,255,.55) 50%, rgba(255,138,216,.18) 60%, transparent);
  animation: beam 2.2s ease-in-out infinite; }
.scan.done::after { animation: none; opacity: 0; }
@keyframes beam { to { top: 100%; } }
.scan .badge { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transition: opacity .3s; background: rgba(18, 184, 134, .25); }
.scan.done .badge { opacity: 1; }
.scan .badge svg { width: 54px; height: 54px; color: #fff; filter: drop-shadow(0 4px 12px rgba(0,0,0,.35)); }

/* result */
.result-ico { width: 92px; height: 92px; margin: 4px auto 18px; border-radius: 50%; display: grid; place-items: center; color: #fff;
  box-shadow: 0 20px 44px -18px currentColor; animation: pop .55s var(--ease) both; }
.result-ico svg { width: 44px; height: 44px; }
.result-ico.ok { background: radial-gradient(circle at 30% 25%, #4be3b2, var(--ok)); color: var(--ok); }
.result-ico.ok svg, .result-ico.wait svg, .result-ico.bad svg { color: #fff; }
.result-ico.wait { background: radial-gradient(circle at 30% 25%, #9f97ff, var(--brand)); color: var(--brand); }
.result-ico.bad { background: radial-gradient(circle at 30% 25%, #ff7a92, var(--bad)); color: var(--bad); }
@keyframes pop { from { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.06); } }
.center { text-align: center; }
.mt { margin-top: 24px; }

.qr { width: min(240px, 70vw); aspect-ratio: 1; margin: 22px auto 0; padding: 14px; border-radius: 24px; background: #fff; box-shadow: var(--shadow); }
.qr svg { display: block; width: 100%; height: 100%; }
.toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 2000; max-width: calc(100% - 32px);
  padding: 13px 18px; border-radius: 16px; background: rgba(13,16,51,.92); color: #fff; font-size: 14.5px; font-weight: 600;
  transform: translate(-50%, 140%); opacity: 0; visibility: hidden; transition: transform .35s var(--ease), opacity .3s, visibility .3s; backdrop-filter: blur(10px); }
.toast.show { transform: translate(-50%, 0); opacity: 1; visibility: visible; }

/* ---------------------------------------------------------------- camera */
.cam { position: fixed; inset: 0; z-index: 1000; background: #000; color: #fff; font-family: var(--sans); touch-action: none; }
.cam video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cam video.mirror { transform: scaleX(-1); }
.cam-top { position: absolute; top: 0; left: 0; right: 0; z-index: 4; display: flex; align-items: center; gap: 10px; padding: calc(10px + env(safe-area-inset-top)) 14px 8px; }
.cam-x { width: 42px; height: 42px; flex: none; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: #fff;
  background: rgba(255,255,255,.16); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.cam-x svg { width: 20px; height: 20px; }
.cam-ttl { flex: 1; margin-right: 52px; text-align: center; font: 600 22px/1 var(--serif); letter-spacing: .01em; }
.cam-say { position: absolute; left: 20px; right: 20px; z-index: 4; top: calc(66px + env(safe-area-inset-top)); text-align: center;
  font: 600 25px/1.18 var(--serif); text-shadow: 0 2px 18px rgba(0,0,0,.6); }
.guide-wrap, .oval-wrap { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.guide-wrap.doc { top: calc(72px + env(safe-area-inset-top)); bottom: 210px; }
.guide { position: relative; border-radius: 20px; box-shadow: 0 0 0 200vmax rgba(9, 10, 30, .66); transition: background .35s; }
.guide > i { position: absolute; width: 38px; height: 38px; border: 4px solid #fff; transition: border-color .25s; }
.guide > i:nth-of-type(1) { top: -4px; left: -4px; border-right: 0; border-bottom: 0; border-top-left-radius: 20px; }
.guide > i:nth-of-type(2) { top: -4px; right: -4px; border-left: 0; border-bottom: 0; border-top-right-radius: 20px; }
.guide > i:nth-of-type(3) { bottom: -4px; right: -4px; border-left: 0; border-top: 0; border-bottom-right-radius: 20px; }
.guide > i:nth-of-type(4) { bottom: -4px; left: -4px; border-right: 0; border-top: 0; border-bottom-left-radius: 20px; }
.guide:not(.ok):not(.seen) > i { animation: breath 1.6s ease-in-out infinite; }
.guide.ok > i, .guide.seen > i { border-color: #7cf2c6; }
.guide.seen { background: rgba(124, 242, 198, .12); }
@keyframes breath { 50% { opacity: .45; } }
.cam-bottom { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; gap: 16px;
  padding: 14px 20px calc(22px + env(safe-area-inset-bottom)); }
.cam-hint { min-height: 22px; max-width: 320px; text-align: center; font: 700 16px/1.35 var(--sans); text-shadow: 0 1px 12px rgba(0,0,0,.7); transition: color .2s; }
.cam-hint.ok { color: #7cf2c6; }
.shutter { position: relative; width: 80px; height: 80px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; background: var(--holo); background-size: 200% 100%;
  animation: sheen 5s linear infinite; -webkit-tap-highlight-color: transparent; }
.shutter b { position: absolute; inset: 6px; border-radius: 50%; background: #fff; transition: transform .15s; }
.shutter:active b { transform: scale(.9); }
.cam-flash::after { content: ""; position: absolute; inset: 0; z-index: 9; background: #fff; animation: flashout .4s ease-out forwards; }
@keyframes flashout { from { opacity: .95; } to { opacity: 0; } }
.cam-colour { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.cam.flashing video { opacity: 0; }
.cam.flashing .oval { box-shadow: none; border-color: transparent; }
.cam.flashing .cam-say, .cam.flashing .cam-hint { left: 50%; right: auto; transform: translateX(-50%); width: max-content; max-width: calc(100% - 40px);
  padding: 10px 18px; border-radius: 99px; background: rgba(255,255,255,.92); color: var(--ink); text-shadow: none; font: 700 15px/1.3 var(--sans); }
.cam.flashing .cam-hint { position: relative; left: auto; transform: none; }
.oval { position: relative; width: min(66vw, 290px); aspect-ratio: 3/4; border-radius: 50%; box-shadow: 0 0 0 200vmax rgba(9,10,30,.74);
  border: 3px solid rgba(255,255,255,.92); transition: border-color .25s; }
.oval.ok { border-color: #7cf2c6; }
.segs { flex: 1; display: flex; gap: 6px; margin-right: 52px; }
.segs i { flex: 1; height: 4px; border-radius: 99px; background: rgba(255,255,255,.28); overflow: hidden; position: relative; }
.segs i.done { background: #7cf2c6; }
.segs i.on::after { content: ""; position: absolute; inset: 0; background: var(--holo); transform-origin: left; animation: seg 1.6s ease-in-out infinite; }
@keyframes seg { 0% { transform: scaleX(0); } 100% { transform: scaleX(1); opacity: .35; } }
.cam.flashing .segs i { background: rgba(0,0,0,.18); }
.arrow { display: inline-block; margin-right: 10px; font-weight: 800; animation: nudgeL 1s ease-in-out infinite; }
.arrow.right { animation-name: nudgeR; } .arrow.pulse { animation-name: pulse; }
@keyframes pulse { 50% { transform: scale(1.25); } }
@keyframes nudgeL { 50% { transform: translateX(-6px); } }
@keyframes nudgeR { 50% { transform: translateX(6px); } }
/* document tilt step */
.tilt-hint { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.tilt-step { font: 700 11.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.75); }
.tilt-stage { position: relative; width: 120px; height: 100px; display: grid; place-items: center; perspective: 300px; }
.tilt-stage::before { content: ""; position: absolute; width: 60px; height: 84px; border: 1.5px dashed rgba(255,255,255,.45); border-radius: 8px; }
.tilt-card { position: relative; width: 60px; height: 84px; border-radius: 8px; background: #eef0ff; box-shadow: 0 4px 14px rgba(0,0,0,.4); transform-origin: 50% 100%; transition: background .3s; }
.tilt-card > i { position: absolute; left: 7px; right: 7px; height: 3px; border-radius: 2px; background: #9aa1d8; }
.tilt-card > i:nth-of-type(1) { top: 56px; } .tilt-card > i:nth-of-type(2) { top: 66px; right: 20px; }
.tilt-card::before { content: ""; position: absolute; left: 7px; top: 44px; width: 13px; height: 10px; border-radius: 2px; background: #c9a98f; }
.tilt-card::after { content: ""; position: absolute; left: 0; right: 0; top: 41px; height: 1px; background: #c3c8ef; }
.tilt-card.away { animation: hintAway 3.4s ease-in-out infinite; }
.tilt-card.toward { animation: hintToward 3.4s ease-in-out infinite; }
.tilt-card.rock { transform-origin: 50% 50%; animation: hintRock 3.4s ease-in-out infinite; background: var(--holo); background-size: 250% 100%; }
@keyframes hintAway { 0%, 15% { transform: rotateX(0); } 45%, 70% { transform: rotateX(48deg); } 100% { transform: rotateX(0); } }
@keyframes hintToward { 0%, 15% { transform: rotateX(0); } 45%, 70% { transform: rotateX(-38deg); } 100% { transform: rotateX(0); } }
@keyframes hintRock { 0%, 100% { transform: rotateX(18deg) rotateY(-14deg); background-position: 0 0; } 50% { transform: rotateX(-14deg) rotateY(14deg); background-position: 100% 0; } }
.tilt-hint.ok .tilt-card { animation: none; transform: none; background: #7cf2c6; }
.tiltbar { width: min(260px, 70%); height: 6px; border-radius: 3px; background: rgba(255,255,255,.22); overflow: hidden; }
.tiltbar > i { display: block; height: 100%; width: 0; background: var(--holo); background-size: 200% 100%; border-radius: 3px; transition: width .3s; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }