/* ════════════════════════════════════════════════
   WORQESTRA — Story / Gravitas register
   ════════════════════════════════════════════════ */
:root{
  --teal-ink:#0F3A3E;
  --surface:#1D484C;
  --inset:#0A2A2D;
  --cream:#F5F0E8;
  --muted:#A2C2C5;
  --faint:#7CA9AD;
  --coral:#E87B68;
  --coral-hover:#DD5C46;
  --moss:#708050;
  --moss-2:#8A9764;
  --moss-3:#A4AF7E;
  --mustard:#D4A547;
  --mustard-2:#E2C260;
  --border:#1D484C;
  --border-soft:rgba(124,169,173,0.16);
  --shadow:0 18px 40px -14px rgba(0,0,0,0.45);
  --display:"Fraunces",serif;
  --body:"DM Sans",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
  --ease:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;background:var(--teal-ink);}
body{
  font-family:var(--body);color:var(--cream);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow:hidden;
}
.serif{font-family:var(--display);font-optical-sizing:auto;}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}
a{color:inherit;text-decoration:none;}

/* ───────── APP SHELL ───────── */
.app{height:100vh;height:100dvh;display:flex;flex-direction:column;position:relative;}

.topbar{
  flex-shrink:0;height:58px;display:flex;align-items:center;justify-content:space-between;
  padding:0 32px;z-index:30;
}
.brand{display:flex;align-items:center;gap:12px;}
.brand .mark{font-family:var(--display);font-weight:600;font-size:19px;letter-spacing:-0.01em;color:var(--cream);}
.brand .ring{width:9px;height:9px;border-radius:999px;border:2px solid var(--coral);}
.top-right{display:flex;align-items:center;gap:18px;}
.scene-count{font-family:var(--mono);font-size:12px;color:var(--faint);letter-spacing:0.04em;}
.skip-btn{font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:6px;transition:color .2s;}
.skip-btn:hover{color:var(--cream);}

/* ───────── STAGE / SCENES ───────── */
.stage{flex:1;position:relative;overflow:hidden;}
.scene{
  position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;
  display:none;
}
.scene.active{display:flex;}
.scene-inner{margin:auto;width:100%;max-width:1080px;padding:32px 48px 48px;}
.scene-wide .scene-inner{max-width:1180px;}

/* entrance stagger — elements with .anim reveal when scene gets .play */
.anim{opacity:0;transform:translateY(16px);}
.scene.play .anim{opacity:1;transform:none;transition:opacity .6s ease, transform .7s var(--ease);transition-delay:var(--d,0ms);}

/* agent tag */
.agent-tag{
  display:inline-flex;align-items:center;gap:7px;
  font-size:11px;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;
  padding:5px 12px;border-radius:999px;
}
.agent-tag .ad{width:6px;height:6px;border-radius:999px;}
.tag-discovery{color:var(--moss-3);background:rgba(138,151,100,0.16);}
.tag-discovery .ad{background:var(--moss-3);}
.tag-tailoring{color:var(--coral);background:rgba(232,123,104,0.14);}
.tag-tailoring .ad{background:var(--coral);}
.tag-scheduling{color:var(--mustard-2);background:rgba(212,165,71,0.15);}
.tag-scheduling .ad{background:var(--mustard-2);}
.tag-signal{color:var(--muted);background:var(--inset);}
.tag-signal .ad{background:var(--muted);}

/* shared type */
.kicker{font-size:12.5px;font-weight:600;letter-spacing:0.18em;text-transform:uppercase;color:var(--faint);}
.scene h1{font-family:var(--display);font-optical-sizing:auto;font-weight:500;font-size:clamp(34px,4.4vw,56px);line-height:1.05;letter-spacing:-0.02em;color:var(--cream);}
.scene h2{font-family:var(--display);font-optical-sizing:auto;font-weight:500;font-size:clamp(28px,3vw,38px);line-height:1.08;letter-spacing:-0.015em;color:var(--cream);}
.lead{font-size:clamp(15px,1.3vw,18px);line-height:1.6;color:var(--muted);max-width:54ch;}
.dim{color:var(--faint);}
.coral{color:var(--coral);}

/* ───────── SCENE 1 — OVERTURE ───────── */
.overture{text-align:left;display:flex;flex-direction:column;gap:26px;}
.overture h1{max-width:18ch;}
.overture .promise{font-size:clamp(16px,1.4vw,19px);color:var(--cream);font-weight:500;}
.overture .roster{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px;}
.roster .r{font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--faint);padding:6px 13px;border:1px solid var(--border-soft);border-radius:999px;}

/* ───────── primary CTA ───────── */
.cta{
  display:inline-flex;align-items:center;gap:10px;align-self:flex-start;
  height:52px;padding:0 30px;border-radius:999px;
  background:var(--coral);color:var(--cream);font-size:15.5px;font-weight:600;
  box-shadow:0 12px 26px -10px rgba(232,123,104,0.6);
  transition:background .2s,transform .2s,box-shadow .2s;
}
.cta:hover{background:var(--coral-hover);transform:translateY(-2px);box-shadow:0 16px 30px -10px rgba(221,92,70,0.6);}
.cta .arr{transition:transform .2s;}
.cta:hover .arr{transform:translateX(4px);}

/* ───────── SCENE 2 — UPLOAD ───────── */
.upload-wrap{display:flex;flex-direction:column;gap:22px;align-items:center;text-align:center;}
.upload-head{display:flex;flex-direction:column;gap:12px;align-items:center;}
.dropzone{
  width:min(560px,90vw);min-height:240px;border-radius:20px;
  border:2px dashed rgba(162,194,197,0.4);background:rgba(10,42,45,0.45);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
  padding:36px;cursor:pointer;transition:border-color .25s,background .25s,transform .25s;
  position:relative;
}
.dropzone:hover{border-color:var(--coral);background:rgba(10,42,45,0.7);}
.dropzone.dragover{border-color:var(--coral);background:rgba(232,123,104,0.08);transform:scale(1.015);}
.dropzone.filled{border-style:solid;border-color:var(--moss-2);background:rgba(112,128,80,0.1);cursor:default;}
.dz-ico{width:54px;height:54px;border-radius:16px;background:var(--surface);border:1px solid var(--border-soft);display:flex;align-items:center;justify-content:center;color:var(--muted);transition:color .25s;}
.dropzone.dragover .dz-ico{color:var(--coral);}
.dz-title{font-size:17px;font-weight:600;color:var(--cream);}
.dz-sub{font-size:13.5px;color:var(--faint);}
.dz-browse{color:var(--coral);font-weight:600;}
.dz-file{display:none;flex-direction:column;align-items:center;gap:14px;}
.dz-prompt{display:flex;flex-direction:column;align-items:center;gap:16px;}
.dropzone.filled .dz-prompt{display:none;}
.dropzone.filled .dz-file{display:flex;}
.file-chip{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border-soft);border-radius:12px;padding:13px 18px;}
.file-chip .fico{color:var(--moss-3);}
.file-name{font-size:14px;font-weight:500;color:var(--cream);}
.file-meta{font-size:12px;color:var(--faint);font-family:var(--mono);}
.parse-shimmer{font-size:13px;color:var(--moss-3);display:flex;align-items:center;gap:8px;}
.parse-shimmer .pd{width:7px;height:7px;border-radius:999px;background:var(--moss-3);animation:pulse 1.4s var(--ease) infinite;}

/* ───────── SCENE 3 — DISCOVERY: RECORD ───────── */
.split{display:grid;grid-template-columns:0.85fr 1.15fr;gap:40px;align-items:center;}
.cv-doc{
  background:var(--cream);color:#22303a;border-radius:12px;padding:26px 26px 30px;
  box-shadow:0 24px 50px -18px rgba(0,0,0,0.55);transform:rotate(-1.4deg);
  font-family:var(--body);position:relative;
}
.cv-doc .cv-name{font-family:var(--display);font-weight:600;font-size:21px;color:#15212a;}
.cv-doc .cv-role{font-size:12.5px;color:#5a6b72;margin-top:2px;letter-spacing:0.02em;}
.cv-doc hr{border:none;border-top:1px solid #d9d2c4;margin:14px 0;}
.cv-line{height:8px;border-radius:4px;background:#d7d0c2;margin-bottom:9px;}
.cv-line.s{width:55%;}.cv-line.m{width:78%;}.cv-line.l{width:92%;}
.cv-sechead{font-size:10px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:#8a7f6a;margin:4px 0 9px;}
.cv-doc .scan-sweep{position:absolute;left:0;right:0;height:60px;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(232,123,104,0.18),transparent);opacity:0;}
.profile{display:flex;flex-direction:column;gap:18px;}
.profile-stat{display:flex;gap:26px;}
.pstat .pv{font-family:var(--display);font-weight:500;font-size:30px;color:var(--cream);line-height:1;}
.pstat .pl{font-size:12px;color:var(--faint);margin-top:5px;}
.pgroup .pgh{font-size:11px;font-weight:600;letter-spacing:0.13em;text-transform:uppercase;color:var(--faint);margin-bottom:10px;}
.chips{display:flex;flex-wrap:wrap;gap:8px;}
.chip{font-size:13px;color:var(--cream);background:var(--surface);border:1px solid var(--border-soft);border-radius:999px;padding:7px 14px;}
.chip.win{background:rgba(112,128,80,0.14);color:var(--moss-3);border-color:transparent;}

/* ───────── SCENE 4 — DISCOVERY: PATTERN ───────── */
.pattern-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 40px;margin-top:8px;}
.pat-card{display:flex;flex-direction:column;gap:9px;}
.pat-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;}
.pat-label{font-size:15px;color:var(--cream);font-weight:500;}
.pat-pct{font-family:var(--mono);font-size:13px;color:var(--muted);}
.bar-track{height:6px;border-radius:999px;background:var(--inset);overflow:hidden;}
.bar-fill{height:100%;width:0;border-radius:999px;transition:width 1.1s var(--ease);}
.moat-note{margin-top:24px;font-size:15px;color:var(--cream);max-width:60ch;line-height:1.6;}
.moat-note b{color:var(--moss-3);font-weight:600;}

/* ───────── SCENE 5 — SCAN ───────── */
.scan-stage{display:flex;flex-direction:column;align-items:center;gap:26px;text-align:center;}
.scan-counter{font-family:var(--display);font-weight:500;font-size:clamp(46px,7vw,84px);color:var(--cream);line-height:1;letter-spacing:-0.02em;}
.scan-counter .unit{font-family:var(--body);font-size:0.26em;color:var(--faint);font-weight:500;letter-spacing:0.04em;display:block;margin-top:10px;}
.chip-field{position:relative;width:min(840px,92vw);height:230px;}
.scan-chip{
  position:absolute;font-size:11.5px;color:var(--faint);
  background:rgba(29,72,76,0.5);border:1px solid var(--border-soft);border-radius:999px;
  padding:5px 11px;white-space:nowrap;opacity:0;transition:opacity .5s ease, transform .6s var(--ease);
}
.scan-chip.lit{color:var(--cream);background:var(--surface);border-color:var(--moss-2);box-shadow:0 8px 20px -8px rgba(0,0,0,0.4);}

/* ───────── SCENE 6 — TAILORING ───────── */
.tailor-grid{display:grid;grid-template-columns:1.1fr 0.9fr;gap:40px;align-items:center;}
.role-head{display:flex;flex-direction:column;gap:14px;}
.role-title{font-family:var(--display);font-weight:500;font-size:clamp(26px,2.6vw,34px);color:var(--cream);letter-spacing:-0.015em;line-height:1.1;}
.role-match{display:flex;align-items:baseline;gap:10px;}
.role-match .m{font-family:var(--display);font-weight:500;font-size:44px;color:var(--coral);line-height:1;}
.role-match .ml{font-size:12px;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted);}
.diff{background:var(--surface);border:1px solid var(--border-soft);border-radius:16px;padding:22px;display:flex;flex-direction:column;gap:14px;box-shadow:var(--shadow);}
.diff-head{font-size:11.5px;font-weight:600;letter-spacing:0.13em;text-transform:uppercase;color:var(--faint);display:flex;justify-content:space-between;align-items:center;}
.diff-count{color:var(--coral);}
.diff-row{display:flex;flex-direction:column;gap:5px;}
.diff-old{font-size:13px;color:var(--faint);text-decoration:line-through;text-decoration-color:rgba(124,169,173,0.5);line-height:1.45;}
.diff-new{font-size:13.5px;color:var(--cream);line-height:1.5;display:flex;gap:8px;opacity:0;transform:translateY(6px);transition:opacity .5s,transform .5s var(--ease);}
.diff-new.show{opacity:1;transform:none;}
.diff-new .nt{flex-shrink:0;font-size:9px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--coral);background:rgba(232,123,104,0.14);border-radius:5px;padding:2px 6px;height:fit-content;margin-top:2px;}
.diff.approved{border-color:var(--moss-2);}
.diff.approved .nt{color:var(--moss-3);background:rgba(112,128,80,0.16);}
.approve-row{display:flex;align-items:center;gap:16px;margin-top:6px;}
.btn-approve{
  display:inline-flex;align-items:center;gap:9px;height:48px;padding:0 26px;border-radius:999px;
  background:var(--coral);color:var(--cream);font-size:14.5px;font-weight:600;
  transition:background .2s,transform .2s,opacity .3s;
}
.btn-approve:hover{background:var(--coral-hover);transform:translateY(-1px);}
.btn-approve.done{background:var(--moss);pointer-events:none;}
.approve-hint{font-size:13px;color:var(--faint);}
.consent{font-size:13.5px;color:var(--muted);max-width:36ch;line-height:1.55;}

/* ───────── SCENE 7 — CONDUCTING ───────── */
.conduct{display:flex;flex-direction:column;gap:30px;align-items:flex-start;}
.conduct-cols{display:grid;grid-template-columns:1.2fr 0.8fr;gap:40px;width:100%;align-items:center;}
.pathway-card{background:var(--surface);border:1px solid var(--border-soft);border-radius:18px;padding:28px;box-shadow:var(--shadow);width:100%;}
.pathway-card .pc-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
.pc-role{font-family:var(--display);font-weight:500;font-size:22px;color:var(--cream);margin-bottom:22px;letter-spacing:-0.01em;}
.stage-strip{display:flex;gap:7px;margin-bottom:14px;}
.seg{flex:1;height:7px;border-radius:999px;background:rgba(124,169,173,0.18);transition:background .45s,height .3s;position:relative;}
.seg.done{background:var(--moss-2);}
.seg.current{height:9px;margin-top:-1px;background:var(--coral);}
.stage-labels{display:flex;justify-content:space-between;gap:4px;}
.stage-labels span{font-size:9.5px;letter-spacing:0.06em;text-transform:uppercase;color:var(--faint);flex:1;text-align:center;transition:color .4s;}
.stage-labels span.on{color:var(--coral);font-weight:600;}
.stage-labels span.passed{color:var(--moss-3);}
.conduct-side{display:flex;flex-direction:column;gap:18px;}
.ctx{display:flex;gap:12px;align-items:flex-start;}
.ctx .ci{flex-shrink:0;margin-top:1px;}
.ctx .ct{font-size:14px;color:var(--muted);line-height:1.5;}
.ctx .ct b{color:var(--cream);font-weight:500;}
.btn-advance{
  display:inline-flex;align-items:center;gap:10px;height:50px;padding:0 26px;border-radius:999px;
  background:var(--coral);color:var(--cream);font-size:15px;font-weight:600;align-self:flex-start;
  transition:background .2s,transform .2s,opacity .3s;
  box-shadow:0 10px 24px -10px rgba(232,123,104,0.55);
}
.btn-advance:hover{background:var(--coral-hover);transform:translateY(-1px);}
.btn-advance:disabled{background:var(--moss);opacity:.9;box-shadow:none;cursor:default;}
.baton-hint{font-size:13px;color:var(--faint);margin-top:2px;}

/* ───────── SCENE 8 — RESOLUTION / SHORTLIST ───────── */
.finale{display:flex;flex-direction:column;gap:20px;}
.finale-head{display:flex;flex-direction:column;gap:10px;max-width:680px;}
.finale-head h1{font-size:clamp(28px,3.2vw,42px);}
.shortlist{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.sl-card{background:var(--surface);border:1px solid var(--border-soft);border-radius:18px;padding:20px;display:flex;flex-direction:column;gap:12px;box-shadow:var(--shadow);position:relative;overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s;}
.sl-card:hover{transform:translateY(-4px);box-shadow:0 26px 50px -16px rgba(0,0,0,0.5);}
.sl-rank{position:absolute;top:18px;right:20px;font-family:var(--mono);font-size:11px;color:var(--faint);}
.sl-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;}
.sl-co{font-size:12px;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted);}
.sl-role{font-family:var(--display);font-weight:500;font-size:18px;color:var(--cream);line-height:1.15;letter-spacing:-0.01em;}
.sl-match{display:flex;align-items:baseline;gap:6px;}
.sl-match .v{font-family:var(--display);font-weight:500;font-size:30px;color:var(--coral);line-height:1;}
.sl-match .l{font-size:11px;color:var(--muted);letter-spacing:0.1em;text-transform:uppercase;}
.sl-why{font-size:12.5px;color:var(--muted);line-height:1.5;min-height:40px;}
.sl-ready{display:flex;flex-direction:column;gap:7px;padding-top:8px;border-top:1px solid var(--border-soft);}
.sl-ready .ri{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--moss-3);}
.sl-ready .ri svg{flex-shrink:0;}
.sl-ready .ri.motion{color:var(--coral);}
.sl-cta{margin-top:2px;height:40px;border-radius:999px;display:flex;align-items:center;justify-content:center;gap:8px;font-size:13.5px;font-weight:600;transition:background .2s,border-color .2s;}
.sl-cta.primary{background:var(--coral);color:var(--cream);}
.sl-cta.primary:hover{background:var(--coral-hover);}
.sl-cta.ghost{border:1px solid var(--border-soft);color:var(--cream);}
.sl-cta.ghost:hover{background:var(--inset);border-color:var(--faint);}

.ledger{display:flex;flex-wrap:wrap;gap:8px 24px;padding:14px 20px;background:var(--inset);border:1px solid var(--border-soft);border-radius:14px;}
.ledger .li{display:flex;align-items:baseline;gap:8px;font-size:13px;color:var(--muted);}
.ledger .li b{font-family:var(--mono);color:var(--cream);font-weight:500;}
.ledger .sep{color:var(--border-soft);}
.finale-foot{display:flex;align-items:center;gap:22px;flex-wrap:wrap;}
.replay{font-size:13.5px;color:var(--muted);display:inline-flex;align-items:center;gap:7px;transition:color .2s;}
.replay:hover{color:var(--cream);}

/* confetti canvas */
#confetti{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:40;}

/* ───────── BOTTOM BAR ───────── */
.bottombar{
  flex-shrink:0;height:74px;display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:0 32px;border-top:1px solid var(--border-soft);background:rgba(10,42,45,0.4);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);z-index:30;
}
.movement{display:flex;flex-direction:column;gap:3px;min-width:0;}
.movement .ml{font-size:11px;letter-spacing:0.16em;text-transform:uppercase;color:var(--faint);white-space:nowrap;}
.movement .mt{font-size:14px;color:var(--cream);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.progress{display:flex;align-items:center;gap:9px;}
.pdot{width:9px;height:9px;border-radius:999px;background:rgba(124,169,173,0.25);cursor:pointer;transition:background .3s,transform .3s,width .3s;}
.pdot.done{background:var(--moss-2);}
.pdot.cur{background:var(--coral);width:24px;}
.nav-btns{display:flex;align-items:center;gap:12px;}
.btn-back{font-size:14px;color:var(--muted);padding:10px 14px;border-radius:999px;transition:color .2s,background .2s;}
.btn-back:hover{color:var(--cream);background:var(--inset);}
.btn-back[disabled]{opacity:0;pointer-events:none;}
.btn-next{
  display:inline-flex;align-items:center;gap:9px;height:46px;padding:0 24px;border-radius:999px;
  background:var(--cream);color:var(--teal-ink);font-size:14.5px;font-weight:600;
  transition:background .2s,transform .2s,opacity .25s;
}
.btn-next:hover{transform:translateY(-1px);}
.btn-next .arr{transition:transform .2s;}
.btn-next:hover .arr{transform:translateX(3px);}
.btn-next.locked{background:var(--surface);color:var(--faint);cursor:not-allowed;pointer-events:none;opacity:.6;}
.btn-next.locked .arr{display:none;}

/* toast */
.toast-wrap{position:fixed;left:50%;bottom:92px;transform:translateX(-50%);z-index:200;display:flex;flex-direction:column;gap:10px;align-items:center;pointer-events:none;}
.toast{display:flex;align-items:center;gap:11px;background:var(--surface);border:1px solid var(--border-soft);border-radius:999px;padding:11px 20px 11px 16px;box-shadow:var(--shadow);font-size:13.5px;color:var(--cream);font-weight:500;opacity:0;transform:translateY(12px);transition:opacity .3s,transform .3s;}
.toast.show{opacity:1;transform:none;}
.toast .tdot{width:8px;height:8px;border-radius:999px;flex-shrink:0;}

@keyframes pulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.4;transform:scale(.7);}}
.pdot-pulse{animation:pulse 1.6s var(--ease) infinite;}

/* responsive */
@media (max-width:880px){
  .split,.tailor-grid,.conduct-cols{grid-template-columns:1fr;gap:28px;}
  .pattern-grid,.shortlist{grid-template-columns:1fr;}
  .scene-inner{padding:24px 24px 36px;}
  .movement{display:none;}
}

@media (prefers-reduced-motion: reduce){
  .anim{opacity:1!important;transform:none!important;transition:none!important;}
  .scene{transition:none!important;}
  .bar-fill,.diff-new,.scan-chip,.seg,.sl-card,.cta,.btn-next{transition:none!important;}
  .pdot-pulse,.parse-shimmer .pd{animation:none!important;}
}