
/* Portico — scroll-driven shared collaboration scene */
.collaboration{height:690vh;position:relative;background:#f8f2e9;color:#14274d;isolation:isolate}
.collaboration__sticky{height:100vh;height:100dvh;position:sticky;top:0;overflow:hidden;isolation:isolate;background:#f7f2e8}
.collaboration__art{position:absolute;inset:0;overflow:hidden;transform:scale(calc(1.06 - var(--collab-progress,0)*.13));filter:saturate(.90);}
.collaboration__art img{width:100%;height:100%;object-fit:cover}
.collaboration__veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(246,239,226,.08),rgba(249,246,237,.24) 45%,rgba(249,246,237,.55));backdrop-filter:blur(calc(var(--collab-progress,0)*11px))}
.collaboration__intro{position:absolute;left:50%;top:50%;width:min(1000px,90vw);transform:translate(-50%,-50%);z-index:2;text-align:center;text-shadow:0 2px 32px #f8f0df;will-change:transform,opacity}
.collaboration__intro>span{font:800 12px 'DM Sans',sans-serif;letter-spacing:.22em;color:#384b5c;background:#fff9ecb0;padding:11px 17px;border-radius:50px}
.collaboration__intro h2{font:600 clamp(49px,6.8vw,105px)/.99 'Space Grotesk',sans-serif;letter-spacing:-.065em;margin:30px 0 21px;color:#162b4d}
.collaboration__intro h2 em{font-style:italic;font-family:Georgia,serif;font-weight:400;color:#ac705b}
.collaboration__intro p{font:500 clamp(16px,1.55vw,23px)/1.45 'DM Sans',sans-serif;max-width:690px;margin:auto;color:#344858}
.collaboration__interface{position:absolute;left:50%;top:51%;z-index:5;width:min(1340px,94vw);opacity:0;transform:translate(-50%,-50%) scale(.94);will-change:transform,opacity}
.collaboration__headline{display:flex;align-items:center;justify-content:space-between;color:#1c3252;font:800 10px 'DM Sans',sans-serif;letter-spacing:.12em;padding:0 5px 10px}
.collaboration__headline strong{font:600 clamp(14px,1.6vw,21px) 'Space Grotesk',sans-serif;letter-spacing:-.025em}
.workspace-demo{height:min(740px,77vh);background:rgba(255,252,246,.97);border:1px solid #dfcdb6;border-radius:23px;box-shadow:0 28px 110px #332a2345;display:flex;flex-direction:column;overflow:hidden}
.workspace-demo__top{display:flex;gap:17px;align-items:center;padding:18px 25px;border-bottom:1px solid #e3d5c2;min-height:91px}
.workspace-demo__folder{font-size:43px;line-height:1;color:#14274d}
.workspace-demo__project{display:flex;flex-direction:column;gap:5px;flex:1}.workspace-demo__project strong{font:600 clamp(20px,2vw,29px) Georgia,serif}.workspace-demo__project span{font:500 13px 'DM Sans',sans-serif;color:#66958e}
.workspace-demo__live{font:800 10px 'DM Sans',sans-serif;letter-spacing:.1em;color:#3b8375;padding:10px 14px;background:#e4f3e9;border-radius:30px}.workspace-demo__live i{display:inline-block;width:8px;height:8px;border-radius:50%;background:#55a58a;margin-right:7px;animation:activePulse 1.8s infinite}
@keyframes activePulse{50%{opacity:.25}}
.workspace-demo__detail{font:700 10px 'DM Sans',sans-serif;letter-spacing:.12em;border:1px solid #dfcdb6;border-radius:10px;padding:13px;color:#243755}
.workspace-demo__body{display:grid;grid-template-columns:minmax(0,1fr) 275px;min-height:0;flex:1}
.workspace-demo__chat{padding:18px 29px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#d4c3ae transparent;scroll-behavior:smooth;display:flex;flex-direction:column;gap:14px}
.demo-message{display:grid;grid-template-columns:54px 1fr;gap:13px;max-width:790px;opacity:0;transform:translateY(28px) scale(.985);transition:opacity .45s,transform .5s;flex:0 0 auto}
.demo-message.is-revealed{opacity:1;transform:none}.demo-message.is-speaking .demo-message__bubble{box-shadow:0 0 0 2px rgba(176,118,91,.28),0 6px 19px #b9866c17}
.demo-message__avatar,.demo-participant__avatar{width:50px;height:50px;border-radius:50%;object-fit:cover;background:#f1e6d6;border:2px solid #fff7ec}.demo-message__avatar--you{display:grid;place-items:center;background:#dce8e3;color:#44635c;font:800 24px Georgia,serif}.demo-message__avatar--cat{display:grid;place-items:center;background:#f3e8d7;font-size:30px}
.demo-message__meta{display:flex;align-items:baseline;gap:14px;margin-bottom:5px;font-family:'DM Sans',sans-serif}.demo-message__meta b{font:700 18px Georgia,serif}.demo-message__meta span{font-size:9px;letter-spacing:.1em;color:#7b8e96;font-weight:800}
.demo-message__bubble{border-radius:15px;background:#fae9dc;padding:13px 17px;color:#21334d;font:400 clamp(13px,1.28vw,18px)/1.42 Georgia,serif;transition:box-shadow .3s}.demo-message:nth-child(even) .demo-message__bubble{background:#fbf6ed;border:1px solid #ead5bc}
.demo-message__file{display:block;border-radius:8px;padding:8px;margin-top:10px;background:#fff8ee;color:#9d7155;font:700 11px 'DM Sans',sans-serif}
.workspace-demo__side{border-left:1px solid #e2d1be;padding:19px 21px;display:flex;flex-direction:column;gap:13px;overflow:hidden}.workspace-demo__side-header{display:flex;justify-content:space-between;font:800 11px 'DM Sans',sans-serif;letter-spacing:.13em;margin:0 0 7px}.workspace-demo__side-header span{color:#91a7b0}.demo-participant{display:grid;grid-template-columns:45px 1fr 8px;gap:10px;align-items:center;border-radius:13px;padding:6px 7px;transition:background .3s,transform .3s}.demo-participant.is-active{background:#f5dfd0;transform:translateX(-4px)}.demo-participant__avatar{width:44px;height:44px}.demo-participant strong{display:block;font:700 18px Georgia,serif}.demo-participant span{font:500 11px 'DM Sans',sans-serif;color:#778b95}.demo-participant i{width:8px;height:8px;background:#a4aaa5;border-radius:50%}.demo-participant.is-active i{background:#3d9e7c;box-shadow:0 0 0 4px #8ac9a755}
.workspace-demo__side-foot{margin-top:auto;border-top:1px solid #e3d7c6;padding-top:15px;display:flex;flex-direction:column;gap:8px}.workspace-demo__side-foot b{font:800 11px 'DM Sans',sans-serif;letter-spacing:.08em;color:#9d795d}.workspace-demo__side-foot span{font:500 12px/1.5 'DM Sans',sans-serif;color:#81939a}
.workspace-demo__footer{border-top:1px solid #e5d5c3;display:flex;justify-content:space-between;padding:13px 26px;font:500 12px 'DM Sans',sans-serif;color:#89969c}.workspace-demo__footer div span{font-size:17px;color:#af7154}.workspace-demo__footer>span{font-size:10px;letter-spacing:.12em}
.collaboration__steps{display:flex;justify-content:space-between;align-items:center;padding:13px 8px;color:#223857;font:800 10px 'DM Sans',sans-serif;letter-spacing:.12em}.collaboration__track{height:3px;width:37%;background:#d9d0c3;border-radius:9px;overflow:hidden}.collaboration__track i{display:block;height:100%;width:0;background:#ba876a}
@media(max-width:850px){.collaboration{height:650vh}.collaboration__interface{width:97vw}.workspace-demo{height:80vh}.workspace-demo__body{grid-template-columns:minmax(0,1fr) 150px}.workspace-demo__top{padding:12px;min-height:70px}.workspace-demo__folder{display:none}.workspace-demo__detail{display:none}.workspace-demo__project strong{font-size:18px}.workspace-demo__live{font-size:8px;padding:7px}.workspace-demo__chat{padding:12px;gap:10px}.workspace-demo__side{padding:12px 7px;gap:6px}.demo-participant{grid-template-columns:33px 1fr;gap:4px;padding:4px}.demo-participant i{display:none}.demo-participant__avatar{width:32px;height:32px}.demo-participant strong{font-size:13px}.demo-participant span{font-size:9px}.demo-message{grid-template-columns:38px 1fr;gap:8px}.demo-message__avatar{width:37px;height:37px;font-size:20px}.demo-message__meta b{font-size:14px}.demo-message__meta span{font-size:8px}.demo-message__bubble{font-size:13px;padding:10px}.workspace-demo__side-foot{display:none}.collaboration__headline>span{font-size:8px}.collaboration__headline strong{font-size:14px}}
@media(max-width:520px){.collaboration__intro h2{font-size:clamp(39px,10vw,59px)}.collaboration__intro p{font-size:14px}.collaboration__headline>span:last-child{display:none}.workspace-demo__body{grid-template-columns:1fr}.workspace-demo__side{display:none}.workspace-demo__chat{padding:13px 14px}.workspace-demo{height:76vh}.workspace-demo__footer>span{display:none}.collaboration__steps>span:last-child{font-size:8px}.collaboration__track{width:25%}.workspace-demo__live{font-size:7px}.workspace-demo__project span{font-size:10px}}
@media(prefers-reduced-motion:reduce){.demo-message,.collaboration__interface,.collaboration__intro{transition:none}.workspace-demo__live i{animation:none}}
