/* ============================================================
   Fynch AI — motion.css
   Reveal system + signature graphics (provenance, operating
   stack), QR join, screenshot slots. Inherits tokens.
   ============================================================ */

/* ---- Reveal ---- */
.rv{opacity:0; will-change:opacity, transform;
  transition:opacity var(--rdur,600ms) cubic-bezier(.2,.7,.2,1) var(--rd,0ms),
             transform var(--rdur,600ms) cubic-bezier(.2,.7,.2,1) var(--rd,0ms);}
.rv[data-variant="up"]{transform:translateY(28px);}
.rv[data-variant="left"]{transform:translateX(-36px);}
.rv[data-variant="right"]{transform:translateX(36px);}
.rv[data-variant="scale"]{transform:scale(.93);}
.rv[data-variant="fade"]{transform:none;}
.rv[data-show="1"]{opacity:1; transform:none;}
@media (prefers-reduced-motion: reduce){ .rv{opacity:1 !important; transform:none !important; transition:none;} }

/* ============================================================
   EVIDENCE PROVENANCE
   ============================================================ */
.provenance{display:grid; grid-template-columns:1fr 168px 1fr; align-items:center; height:100%; gap:0;}

.prov-doc{background:var(--surface); border:1px solid var(--line-200); border-radius:var(--r-card); overflow:hidden; box-shadow:var(--shadow-pop); align-self:stretch; display:flex; flex-direction:column; margin:18px 0;}
.prov-doc-bar{display:flex; align-items:center; gap:7px; padding:12px 16px; border-bottom:1px solid var(--line-200); background:var(--subtle);}
.prov-doc-bar .d{width:11px; height:11px; border-radius:50%;}
.prov-doc-bar .d.r{background:#f87171;} .prov-doc-bar .d.y{background:#fbbf24;} .prov-doc-bar .d.g{background:#34d399;}
.prov-doc-bar .fn{margin-left:8px; font-family:var(--font-mono); font-size:15px; color:var(--ink-500);}
.prov-doc-bar .pg{margin-left:auto; font-family:var(--font-mono); font-size:14px; color:var(--ink-400);}
.prov-doc-body{padding:26px 28px; font-family:var(--font-mono); font-size:18px; line-height:2.1; color:var(--ink-400); flex:1; display:flex; flex-direction:column; justify-content:center;}
.prov-doc-title{font-size:15px; font-weight:600; color:var(--ink-600); margin-bottom:14px; letter-spacing:.5px;}
.prov-line{position:relative; white-space:pre; opacity:0;}
.slide[data-active] .prov-line{animation:provln .4s ease both; animation-delay:var(--ld,0ms);}
@keyframes provln{from{opacity:0; transform:translateX(-6px);} to{opacity:1; transform:none;}}
.prov-line.hot{color:var(--ink-900); font-weight:600;}
.prov-hl{position:absolute; inset:-2px -8px; background:var(--highlight-bg); border-left:4px solid var(--highlight-bar); border-radius:3px; z-index:-1; transform-origin:left; transform:scaleX(0);}
.slide[data-active] .prov-hl{animation:hlsweep .55s cubic-bezier(.2,.7,.2,1) .75s both;}
@keyframes hlsweep{to{transform:scaleX(1);}}

.prov-link{height:320px; position:relative;}
.prov-link svg{width:100%; height:100%; overflow:visible;}
.prov-path{fill:none; stroke:var(--brand-400,#60a5fa); stroke-width:2.5; stroke-dasharray:240; stroke-dashoffset:240; stroke-linecap:round;}
.prov-path.draw{animation:provdraw .7s ease 1.0s forwards;}
@keyframes provdraw{to{stroke-dashoffset:0;}}
.prov-pulse{fill:var(--brand-500); opacity:0; offset-path:path("M0 150 C 70 150, 90 110, 160 110"); offset-rotate:0deg;}
.prov-pulse.run{animation:provpulse 1.1s ease 1.1s 2;}
@keyframes provpulse{0%{offset-distance:0%; opacity:0;} 12%{opacity:1;} 88%{opacity:1;} 100%{offset-distance:100%; opacity:0;}}

.prov-fact{background:var(--surface); border:1px solid var(--line-200); border-radius:var(--r-card); padding:30px 34px; box-shadow:var(--shadow-modal); align-self:center;}
.prov-fact-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;}
.prov-key{font-family:var(--font-mono); font-size:16px; color:var(--ink-500); background:var(--line-100); padding:3px 10px; border-radius:5px;}
.prov-cite{display:inline-flex; align-items:center; gap:7px; font-size:15px; font-weight:600; color:var(--verified-fg); background:var(--verified-bg); border:1px solid var(--verified-border); padding:4px 11px; border-radius:9999px;}
.prov-cite .dot{width:7px; height:7px; border-radius:50%; background:currentColor;}
.prov-field{font-size:22px; color:var(--ink-500); font-weight:500;}
.prov-value{font-size:72px; font-weight:600; letter-spacing:-.03em; line-height:1.05; margin:4px 0 18px; color:var(--ink-900);}
.prov-conf{display:flex; align-items:center; gap:14px; margin-bottom:18px;}
.prov-conf-track{flex:1; height:12px; border-radius:9999px; background:var(--line-200); overflow:hidden;}
.prov-conf-fill{height:100%; border-radius:9999px; background:linear-gradient(90deg,var(--brand-500),var(--verified-fg)); transition:width 1s cubic-bezier(.2,.7,.2,1) 1.2s;}
.prov-conf span{font-size:15px; color:var(--ink-400); font-family:var(--font-mono);}
.prov-meta{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:18px;}
.prov-meta-row{display:flex; justify-content:space-between; align-items:center; background:var(--canvas); border:1px solid var(--line-200); border-radius:8px; padding:10px 14px; font-size:16px; opacity:0;}
.slide[data-active] .prov-meta-row{animation:provln .45s ease both; animation-delay:var(--ld,0ms);}
.prov-meta-row span{color:var(--ink-500);} .prov-meta-row b{color:var(--ink-900); font-weight:600;}
.prov-deps{display:flex; align-items:center; gap:9px; flex-wrap:wrap;}
.prov-deps-lab{font-size:14px; font-weight:600; letter-spacing:.5px; text-transform:uppercase; color:var(--ink-400);}
.prov-dep{font-size:15px; font-weight:600; color:var(--brand-700); background:var(--brand-50); border:1px solid var(--brand-200); border-radius:9999px; padding:5px 13px; opacity:0;}
.slide[data-active] .prov-dep{animation:provpop .4s cubic-bezier(.2,.9,.3,1.3) both; animation-delay:var(--ld,0ms);}
@keyframes provpop{from{opacity:0; transform:scale(.7);} to{opacity:1; transform:none;}}

/* ============================================================
   OPERATING STACK
   ============================================================ */
.opstack{position:relative; padding-left:54px; height:100%; display:flex;}
.opstack-spine{position:absolute; left:20px; top:8px; bottom:8px; width:3px; background:linear-gradient(var(--line-200),var(--line-200)); border-radius:9999px;}
.opstack-token{position:absolute; left:50%; top:0; transform:translate(-50%,0); width:17px; height:17px; border-radius:50%; background:var(--brand-500); box-shadow:0 0 0 6px var(--brand-100), 0 0 22px rgba(37,99,235,.55);}
.opstack.on .opstack-token{animation:tokendrop 3.4s cubic-bezier(.5,.05,.3,1) .3s forwards;}
@keyframes tokendrop{0%{top:0;} 100%{top:100%;}}
.opstack-layers{display:flex; flex-direction:column; gap:10px; flex:1; justify-content:center;}
.opstack-layer{position:relative; display:grid; grid-template-columns:230px 1fr auto; align-items:center; gap:22px;
  background:var(--surface); border:1px solid var(--line-200); border-radius:var(--r-card); padding:16px 24px;
  box-shadow:0 1px 0 rgba(15,23,42,.03); opacity:0; transform:translateX(-34px);
  transition:opacity .6s cubic-bezier(.2,.7,.2,1) var(--ld,0ms), transform .6s cubic-bezier(.2,.7,.2,1) var(--ld,0ms);}
.opstack.on .opstack-layer{opacity:1; transform:none;}
@media (prefers-reduced-motion: reduce){ .opstack-layer{opacity:1; transform:none; transition:none;} }
.opstack-layer:hover{border-color:var(--brand-300); box-shadow:var(--shadow-pop);}
.opstack-node{position:absolute; left:-42px; top:50%; transform:translateY(-50%); width:13px; height:13px; border-radius:50%; background:#fff; border:3px solid var(--brand-300);}
.opstack-name{display:flex; align-items:center; gap:14px; font-size:26px; font-weight:600; letter-spacing:-.01em;}
.opstack-n{font-family:var(--font-mono); font-size:15px; color:var(--ink-300); font-weight:500;}
.opstack-desc{font-size:18px; color:var(--ink-500); line-height:1.35;}
.opstack-chips{display:flex; gap:7px; flex-wrap:wrap; justify-content:flex-end; max-width:280px;}
.opstack-chip{font-family:var(--font-mono); font-size:13px; color:var(--ink-600); background:var(--canvas); border:1px solid var(--line-200); border-radius:6px; padding:4px 9px; white-space:nowrap;}

/* ============================================================
   QR JOIN
   ============================================================ */
.qrjoin{display:flex; align-items:center; gap:24px; background:var(--surface); border:1px solid var(--line-200); border-radius:var(--r-card); padding:22px; box-shadow:var(--shadow-pop);}
.qrjoin.compact{padding:16px; gap:18px;}
.qr-frame{width:160px; height:160px; flex:0 0 auto; border-radius:12px; background:#fff; border:1px solid var(--line-200); display:flex; align-items:center; justify-content:center; padding:10px;}
.qrjoin.compact .qr-frame{width:128px; height:128px;}
.qr-frame img{width:100%; height:100%; image-rendering:pixelated;}
.qr-fallback{color:var(--ink-300);}
.qr-info{display:flex; flex-direction:column; gap:6px;}
.qr-kicker{display:inline-flex; align-items:center; gap:8px; font-size:15px; font-weight:600; color:var(--brand-600); letter-spacing:.3px;}
.qr-kicker .live{width:9px; height:9px; border-radius:50%; background:#10b981; box-shadow:0 0 0 3px rgba(16,185,129,.18);}
.qr-code{font-family:var(--font-mono); font-size:36px; font-weight:600; letter-spacing:6px; color:var(--ink-900); line-height:1;}
.qr-url{font-family:var(--font-mono); font-size:14px; color:var(--ink-400);}
.qr-count{display:inline-flex; align-items:center; gap:7px; font-size:15px; color:var(--ink-600); margin-top:4px;}

/* ============================================================
   SCREENSHOT SLOT
   ============================================================ */
.screenslot{height:100%; border-radius:12px; overflow:hidden;}
.screenslot-img{width:100%; height:100%; object-fit:contain; border-radius:12px; border:1px solid var(--line-200);}
.screenslot-inner{height:100%; display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line-200); border-radius:12px; overflow:hidden; box-shadow:var(--shadow-modal);}
.screenslot-chrome{display:flex; align-items:center; gap:7px; padding:12px 18px; border-bottom:1px solid var(--line-200); background:var(--subtle);}
.screenslot-chrome .d{width:11px; height:11px; border-radius:50%;} .screenslot-chrome .d.r{background:#f3b6b6;} .screenslot-chrome .d.y{background:#f6e0a6;} .screenslot-chrome .d.g{background:#aee0c2;}
.screenslot-url{margin-left:10px; font-family:var(--font-mono); font-size:14px; color:var(--ink-400);}
.screenslot-body{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; text-align:center;
  background:repeating-linear-gradient(135deg,var(--canvas),var(--canvas) 22px,var(--subtle) 22px,var(--subtle) 44px);}
.screenslot-mark{width:64px; height:64px; border-radius:16px; background:#fff; border:1px solid var(--line-200); display:flex; align-items:center; justify-content:center; margin-bottom:4px; box-shadow:var(--shadow-pop);}
.screenslot-mark img{width:34px; height:34px; opacity:.85;}
.screenslot-tag{font-family:var(--font-mono); font-size:14px; letter-spacing:2px; color:var(--brand-500); font-weight:600;}
.screenslot-label{font-size:30px; font-weight:600; color:var(--ink-800); letter-spacing:-.01em; max-width:680px;}
.screenslot-tab{font-size:17px; color:var(--ink-500); font-family:var(--font-mono);}
.screenslot-note{font-size:17px; color:var(--ink-400); max-width:620px; line-height:1.45; margin-top:2px;}

/* ============================================================
   TIMELINE RAIL (slide 2)
   ============================================================ */
.timeline-rail{flex:1; display:flex; flex-direction:column; justify-content:space-between; position:relative; padding:4px 0;}
.timeline-rail::before{content:""; position:absolute; left:7px; top:14px; bottom:14px; width:2px; background:var(--line-200);}
.tl-item{display:grid; grid-template-columns:16px 70px 1fr; align-items:center; gap:16px; position:relative; z-index:1;}
.tl-dot{width:16px; height:16px; border-radius:50%; background:#fff; border:3px solid var(--line-300);}
.tl-dot[data-ws="1"]{border-color:var(--brand-500); background:var(--brand-500); box-shadow:0 0 0 4px var(--brand-100);}
.tl-time{font-family:var(--font-mono); font-size:15px; color:var(--ink-400); text-align:right;}
.tl-body{display:flex; align-items:baseline; gap:12px; min-width:0;}
.tl-name{font-size:20px; font-weight:600; color:var(--ink-900); white-space:nowrap;}
.tl-purpose{font-size:15px; color:var(--ink-500); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

/* ============================================================
   DEAL JOURNEY (slide 20)
   ============================================================ */
.dj{display:flex; flex-direction:column; height:100%; gap:24px;}
.dj-metrics{display:grid; grid-template-columns:repeat(4,1fr); gap:18px;}
.dj-metric{background:var(--surface); border:1px solid var(--line-200); border-radius:var(--r-card); padding:18px 24px; display:flex; flex-direction:column; gap:4px;}
.dj-metric .v{font-size:52px; font-weight:600; letter-spacing:-.02em; font-variant-numeric:tabular-nums; line-height:1;}
.dj-metric .l{font-size:16px; color:var(--ink-500); font-weight:500;}
.dj-track{position:relative; display:flex; justify-content:space-between; align-items:flex-start; padding:8px 34px 0;}
.dj-line{position:absolute; left:60px; right:60px; top:36px; height:3px; background:var(--line-200); border-radius:9999px;}
.dj-line-fill{height:100%; background:var(--brand-500); border-radius:9999px; transition:width .65s cubic-bezier(.4,0,.2,1);}
.dj-node{display:flex; flex-direction:column; align-items:center; gap:12px; background:none; border:0; cursor:pointer; z-index:1; padding:0; width:72px;}
.dj-dot{width:60px; height:60px; border-radius:50%; background:var(--surface); border:2px solid var(--line-300); color:var(--ink-400);
  display:flex; align-items:center; justify-content:center; transition:transform .35s cubic-bezier(.2,.8,.3,1.2), background .3s, border-color .3s, color .3s, box-shadow .3s;}
.dj-node.done .dj-dot{border-color:var(--brand-300); color:var(--brand-600); background:var(--brand-50);}
.dj-node.active .dj-dot{background:var(--brand-500); border-color:var(--brand-500); color:#fff; transform:scale(1.2); box-shadow:0 0 0 6px var(--brand-100), 0 10px 26px rgba(37,99,235,.4);}
.dj-name{font-size:16px; font-weight:600; color:var(--ink-400); transition:color .3s;}
.dj-node.done .dj-name{color:var(--ink-600);}
.dj-node.active .dj-name{color:var(--ink-900);}
.dj-detail{flex:1; min-height:0; background:var(--surface); border:1px solid var(--line-200); border-left:4px solid var(--brand-500); border-radius:var(--r-card); padding:26px 32px; display:flex; flex-direction:column; gap:14px; box-shadow:var(--shadow-pop); animation:djin .45s cubic-bezier(.2,.7,.2,1) both;}
@keyframes djin{from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:none;}}
.dj-detail-head{display:flex; align-items:center; gap:16px;}
.dj-detail-head .dj-ix{font-family:var(--font-mono); font-size:20px; font-weight:600; color:var(--brand-500);}
.dj-detail-head h3{margin:0; font-size:34px; font-weight:600; letter-spacing:-.01em;}
.dj-detail-head .dj-screen{margin-left:auto; font-family:var(--font-mono); font-size:15px; color:var(--ink-400);}
.dj-detail p{margin:0; font-size:24px; color:var(--ink-600); line-height:1.4; max-width:1200px;}
.dj-chips{display:flex; gap:10px; flex-wrap:wrap; margin-top:auto;}
.dj-chip{font-family:var(--font-mono); font-size:16px; color:var(--brand-700); background:var(--brand-50); border:1px solid var(--brand-200); border-radius:9999px; padding:7px 16px; opacity:0; animation:djchip .4s cubic-bezier(.2,.9,.3,1.3) both; animation-delay:var(--cd,0ms);}
@keyframes djchip{from{opacity:0; transform:scale(.8) translateY(6px);} to{opacity:1; transform:none;}}
.dj-play{align-self:flex-start; display:inline-flex; align-items:center; gap:9px; font-family:inherit; font-size:15px; font-weight:600; color:var(--ink-500); background:var(--surface); border:1px solid var(--line-200); border-radius:9999px; padding:8px 16px; cursor:pointer;}
.dj-play:hover{color:var(--ink-900); border-color:var(--line-300);}
@media (prefers-reduced-motion: reduce){ .dj-detail, .dj-chip{animation:none; opacity:1;} }

/* walkthrough journey bar (21–28) */
.walkbar{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.walkbar-sep{width:18px; height:2px; background:var(--line-200); border-radius:2px;}
.walkbar-step{font-size:15px; font-weight:600; color:var(--ink-400); padding:5px 13px; border-radius:9999px; border:1px solid var(--line-200); background:var(--surface); white-space:nowrap;}
.walkbar-step.done{color:var(--brand-600); border-color:var(--brand-200); background:var(--brand-50);}
.walkbar-step.active{color:#fff; background:var(--brand-500); border-color:var(--brand-500);}