/* ================= project book: dark desk, spotlight, hardcover book ================= */
.desk{position:relative;height:max(110svh,900px);overflow:hidden;background:url(assets/desk.jpg) center/cover no-repeat;color:#f2f2f0;--x:50%;--y:58%;--amb:.86;
  -webkit-mask:linear-gradient(transparent,#000 12%,#000 88%,transparent);mask:linear-gradient(transparent,#000 12%,#000 88%,transparent)}
.desk.is-open{--amb:.5}
.light{position:absolute;inset:0;z-index:20;pointer-events:none;
  background:radial-gradient(circle at var(--x) var(--y),rgba(4,4,6,0) 0,rgba(4,4,6,0) 180px,rgba(4,4,6,var(--amb)) 620px);transition:background .25s}
.desk-head{position:absolute;z-index:25;left:var(--m);top:15%;max-width:640px}
.desk.is-open .desk-head{opacity:.0;pointer-events:none;transition:opacity .5s}
.desk-head{transition:opacity .5s}

.scene{position:absolute;inset:0;z-index:10;display:grid;place-items:center;perspective:2600px;padding-bottom:40px}
.book{--pw:min(44vw,900px,calc((100svh - 220px) / .66));--ph:calc(var(--pw) * .66);position:relative;width:calc(var(--pw) * 2);height:var(--ph);transform-style:preserve-3d;
  transform:translate(-25%,10%) rotateX(30deg) rotateZ(-9deg) scale(.6);transition:transform 1.2s cubic-bezier(.6,0,.2,1)}
.is-open .book{transform:translate(0,2%) rotateX(9deg) rotateZ(0) scale(1)}
/* back boards (the hardcover under the pages) and the page block */
.boards{position:absolute;top:-1.6%;bottom:-1.6%;left:50%;right:-1.1%;border-radius:0 10px 10px 0;transform:translateZ(-4px);
  background:#15171d url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .35 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  box-shadow:0 2px 0 #0b0c10,0 40px 80px rgba(0,0,0,.6);transition:left 1.2s cubic-bezier(.6,0,.2,1),border-radius 1.2s}
.is-open .boards{left:-1.1%;border-radius:10px}
.block{position:absolute;top:0;bottom:0;left:50%;right:0;transform:translateZ(-2px) translate(5px,5px);border-radius:0 4px 4px 0;
  background:repeating-linear-gradient(90deg,#d9d3c6 0 1px,#f1ece2 1px 3px);transition:left 1.2s cubic-bezier(.6,0,.2,1)}
.is-open .block{left:0}
.book::after{content:"";position:absolute;left:50%;right:-2%;bottom:-6%;height:10%;background:rgba(0,0,0,.6);filter:blur(22px);transform:translateZ(-8px);transition:left 1.2s}
.is-open .book::after{left:-2%}
.leaf,.base{position:absolute;top:0;left:50%;width:50%;height:100%;transform-style:preserve-3d;transform-origin:0 50%;transition:transform 1.15s cubic-bezier(.55,.05,.25,1)}
.leaf.flipped{transform:rotateY(-180deg)}
.page{position:absolute;inset:0;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;container-type:size;cursor:zoom-in;background:#f3efe7;color:#16181d}
.page.back{transform:rotateY(180deg)}
.front{border-radius:0 6px 6px 0}.back{border-radius:6px 0 0 6px}
/* gutter shading + paper sheen on every page; a sweep while a leaf turns */
.page::before{content:"";position:absolute;inset:0;z-index:8;pointer-events:none}
.front::before{background:linear-gradient(90deg,rgba(0,0,0,.28),rgba(0,0,0,.06) 4%,rgba(0,0,0,0) 10%,rgba(255,255,255,.06) 60%,rgba(0,0,0,.04))}
.back::before{background:linear-gradient(270deg,rgba(0,0,0,.28),rgba(0,0,0,.06) 4%,rgba(0,0,0,0) 10%,rgba(255,255,255,.06) 60%,rgba(0,0,0,.04))}
.page::after{content:"";position:absolute;inset:0;z-index:9;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,0),rgba(0,0,0,.35));opacity:0;transition:opacity .55s}
.leaf.turning .page::after{opacity:1}
.paper{background:#f3efe7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .25 0 0 0 0 .2 0 0 0 .08 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* hardcover */
.cover{cursor:pointer;color:#e9e3d3;background:#171a22 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  box-shadow:inset 0 0 0 1.4cqw #171a22,inset 0 0 0 calc(1.4cqw + 1px) rgba(214,186,120,.55),inset 0 0 6cqw rgba(0,0,0,.5);display:flex;flex-direction:column;justify-content:space-between;padding:8% 9%}
.cover .mark{font-size:1.7cqw;letter-spacing:.3em;color:#c9ad6e}
.foil{font-size:15cqw;font-weight:700;letter-spacing:-.05em;line-height:.82;background:linear-gradient(105deg,#8a6a2c,#f3dc9b 38%,#b38a3e 55%,#f7e7b4 70%,#8a6a2c);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 1px 0 rgba(0,0,0,.6))}
.cover .sub{font-size:2.3cqw;color:#cfc6b1;line-height:1.5}
.cover .sub b{display:block;font-size:3.2cqw;font-weight:500;color:#efe6cf;margin-bottom:.6cqw}

/* project title page: editorial layout on paper */
.tp{display:flex;flex-direction:column;padding:7% 7.5% 6%}
.tp .meta{display:flex;justify-content:space-between;font-size:1.8cqw;color:#6c6a64;letter-spacing:.02em}
.tp .meta b{color:#16181d;font-weight:600}
.tp h3{font-size:6.2cqw;font-weight:600;letter-spacing:-.035em;line-height:1.02;margin-top:5cqw}
.tp .lead{font-size:2.3cqw;line-height:1.5;color:#3f4148;margin-top:2.4cqw;max-width:92%}
.tp .facts3{display:grid;grid-template-columns:repeat(3,1fr);gap:2cqw;margin-top:auto;padding-top:3cqw}
.tp .facts3 div{border-top:.25cqw solid #16181d;padding-top:1.4cqw}
.tp .facts3 b{display:block;font-size:2.4cqw;font-weight:600;line-height:1.2}
.tp .facts3 span{display:block;font-size:1.7cqw;color:#6c6a64;margin-top:.6cqw;line-height:1.35}
.tp .strip{display:grid;grid-template-columns:1fr 1fr;gap:1.6cqw;margin-top:3cqw}
.tp .strip img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:.8cqw;display:block}
/* motion page: full-bleed footage */
.mp{background:#0d0f14}
.mp video,.mp>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mp .cap{position:absolute;z-index:7;left:4cqw;bottom:4cqw;display:flex;gap:1cqw}
.mp .cap span{font-size:1.8cqw;background:rgba(10,12,16,.72);color:#fff;border-radius:999px;padding:1.1cqw 2.2cqw;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.mp.playing .cap .play{display:none}
.end{display:flex;flex-direction:column;justify-content:center;padding:9%}
.end h3{font-size:6cqw;font-weight:600;letter-spacing:-.035em;line-height:1.05}
.end a{font-size:2.6cqw;color:#16181d;margin-top:3cqw;text-decoration:underline;text-underline-offset:.6cqw}
.end small{font-size:1.8cqw;color:#6c6a64;margin-top:2cqw}
.zoomhint{position:absolute;z-index:7;right:4cqw;top:4cqw;display:flex;align-items:center;gap:1cqw;font-size:1.8cqw;background:rgba(255,255,255,.94);color:#16181d;border-radius:999px;padding:1cqw 2cqw;opacity:0;translate:0 -.6cqw;transition:opacity .25s,translate .25s;pointer-events:none}
.is-open .page:hover .zoomhint{opacity:1;translate:0 0}
.corner{position:absolute;z-index:10;bottom:0;width:10cqw;height:10cqw;cursor:pointer;display:grid;place-items:center}
.front .corner{right:0;background:linear-gradient(315deg,rgba(255,255,255,0) 0 0,rgba(0,0,0,.18) 0 47%,transparent 47%)}
.back .corner{left:0;background:linear-gradient(45deg,rgba(0,0,0,.18) 0 47%,transparent 47%)}
.corner span{font-size:3cqw;color:#fff;translate:2.4cqw 2.4cqw}.back .corner span{translate:-2.4cqw 2.4cqw}
.corner:hover{filter:brightness(1.6)}
/* AI sales assistant page (drawn interface) */
.chat{background:#eef0f3;padding:6%;display:flex;flex-direction:column}
.chat>*{font-size:2.2cqw}.chat>*+*{margin-top:2cqw}
.chat .hd{display:flex;justify-content:space-between;color:#6b7280;font-size:1.8cqw}
.chat .q{align-self:flex-end;background:#1d1f5c;color:#fff;border-radius:2.4cqw 2.4cqw .6cqw 2.4cqw;padding:1.8cqw 2.6cqw;max-width:78%}
.chat .a{align-self:flex-start;background:#fff;border-radius:2.4cqw 2.4cqw 2.4cqw .6cqw;padding:2.2cqw 2.6cqw;max-width:86%;line-height:1.45}
.chat .poi{display:flex;gap:1.2cqw;flex-wrap:wrap;margin-top:1.4cqw}
.chat .poi span{background:#eef0f3;border-radius:999px;padding:.8cqw 1.8cqw;font-size:1.8cqw}
.chat .guard{font-size:1.8cqw;color:#6b7280;margin-top:auto}

/* caption bar */
.caption{position:absolute;z-index:25;left:50%;bottom:calc(12% + 4px);translate:-50% 0;width:min(820px,calc(100% - 2*var(--m)));display:flex;align-items:center;gap:18px;
  background:rgba(18,20,26,.74);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-radius:999px;padding:10px 10px 10px 26px;color:#f2f2f0}
.caption .txt{flex:1;min-width:0}
.caption b{display:block;font-size:16px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.caption span{display:block;font-size:14px;color:#b9bcc4;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.caption .ctl{display:flex;gap:6px;align-items:center}
.caption .n{font-size:14px;color:#b9bcc4;min-width:44px;text-align:center;font-variant-numeric:tabular-nums}
.caption button{width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.08);color:#fff;font-size:18px;transition:background .2s,transform .2s}
.caption button:hover{background:#fff;color:var(--ink)}
.caption button:disabled{opacity:.35;pointer-events:none}
.caption .open{width:auto;padding:0 22px;border-radius:999px;background:#fff;color:var(--ink);font-size:15px}

/* ================= zoom viewer (shared by the book and the workbenches) ================= */
.viewer{position:fixed;inset:0;z-index:100;display:none;color:#f2f2f0}
.viewer.on{display:block}
.viewer .veil{position:absolute;inset:0;background:rgba(6,7,10,.92);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);opacity:0;transition:opacity .45s}
.viewer.show .veil{opacity:1}
.vstage{position:absolute;left:var(--sx);top:var(--sy);width:var(--sw);height:var(--sh);overflow:hidden;border-radius:12px;background:#000;transform-origin:0 0;container-type:size;touch-action:none;transition:transform .55s cubic-bezier(.6,0,.2,1)}
.vstage>img,.vstage>video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transform-origin:0 0;user-select:none;-webkit-user-drag:none}
.vstage>img{cursor:zoom-in}.vstage.zoomed>img{cursor:grab}.vstage.dragging>img{cursor:grabbing}
.vstage>.page{position:absolute;inset:0;cursor:default}
.vui{opacity:0;transition:opacity .35s .2s}
.viewer.show .vui{opacity:1}
.vinfo{position:absolute;left:var(--m);top:var(--m);max-width:min(620px,calc(100% - 200px))}
.vinfo h3{font-size:clamp(22px,2.2vw,34px);font-weight:600;letter-spacing:-.03em;line-height:1.08}
.vinfo .meta{font-size:14px;color:#b9bcc4;margin-top:8px}
.vinfo ul{list-style:none;margin-top:10px;display:grid;gap:5px;font-size:14px;line-height:1.45;color:#dcdee3}
.vinfo li::before{content:"— ";color:var(--cyan)}
.vtop{position:absolute;right:var(--m);top:var(--m);display:flex;gap:8px}
.vbtn{height:46px;min-width:46px;padding:0 16px;border-radius:999px;background:rgba(255,255,255,.1);color:#fff;font-size:15px;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:background .2s,color .2s}
.vbtn:hover{background:#fff;color:var(--ink)}
.vbtn:disabled{opacity:.35;pointer-events:none}
.vbottom{position:absolute;left:var(--m);right:var(--m);bottom:var(--m);display:flex;align-items:center;justify-content:space-between;gap:16px}
.thumbs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:3px}
.thumbs button{flex:none;width:112px;height:63px;border-radius:8px;overflow:hidden;position:relative;opacity:.55;transition:opacity .2s,outline-color .2s;outline:2px solid transparent;outline-offset:2px}
.thumbs button[aria-current="true"]{opacity:1;outline-color:#fff}
.thumbs button:hover{opacity:1}
.thumbs img{width:100%;height:100%;object-fit:cover}
.thumbs .play{position:absolute;inset:0;display:grid;place-items:center;font-size:18px;background:rgba(0,0,0,.25)}
.zoomctl{display:flex;gap:6px;align-items:center;font-size:14px;color:#b9bcc4}
.zoomctl .pct{min-width:52px;text-align:center;font-variant-numeric:tabular-nums}

@media (max-width:760px){
  .desk{height:auto;min-height:760px}
  .desk-head{left:16px;right:16px;top:76px}
  .desk-head h2{font-size:30px}
  .book{--pw:47vw;transform:translate(-25%,-4%) rotateX(14deg) rotateZ(-6deg) scale(.95)}
  .is-open .book{transform:translate(0,-6%) rotateX(0) rotateZ(0) scale(1)}
  .caption{border-radius:24px;flex-direction:column;align-items:stretch;gap:10px;padding:16px}
  .caption .ctl{justify-content:space-between}
  .caption b,.caption span{white-space:normal}
  .vinfo{right:var(--m);max-width:none;top:76px}.vinfo ul{display:none}
  .vbottom{flex-direction:column;align-items:stretch}
  .thumbs button{width:84px;height:48px}
}
@media (prefers-reduced-motion:reduce){.book,.leaf,.boards,.block{transition:none}}