/* Physical scene composition. The surfaces sit above the map, rather than in it. */
:root[data-design=spatial] .crm-scene{background-image:radial-gradient(ellipse at 8% 2%,rgba(241,201,120,.35),transparent 46%),linear-gradient(90deg,rgba(16,25,13,.45),rgba(6,19,11,.62)),url('./assets/spatial-district.png');background-position:center;background-size:cover;filter:blur(9px);transform:scale(1.06)}
:root[data-design=spatial] .app-shell{perspective:none;gap:32px;max-width:1900px;overflow:clip}
:root[data-design=spatial] .sidebar{transform:perspective(1700px) rotateY(7deg) translateZ(16px);transform-origin:left center;border-radius:30px 39px 39px 30px;background:linear-gradient(140deg,rgba(238,223,172,.16),rgba(190,218,170,.03)),rgba(26,37,24,.14);box-shadow:-1px -1px 1px rgba(255,249,206,.8),1px 2px 0 rgba(246,239,190,.2),14px 24px 48px rgba(1,12,1,.42),inset 0 1px 9px rgba(255,245,181,.13);backdrop-filter:blur(14px)}
:root[data-design=spatial] .topbar{margin-bottom:20px;opacity:.87}
:root[data-design=spatial] .breadcrumb>span:first-child,:root[data-design=spatial] .breadcrumb-divider{display:none}
.s-workspace-heading h1{font-size:36px;font-weight:380;text-shadow:0 4px 20px rgba(9,18,0,.22)}
.s-layout{--scene-x:0;--scene-y:0;position:relative;perspective:1700px;transform-style:preserve-3d;gap:30px;padding:5px 2px 14px}
.s-stage{overflow:visible;isolation:auto;border:0;border-radius:0;box-shadow:none;padding:28px 10px 14px;transform-style:preserve-3d;min-height:690px;transform:rotateY(calc(var(--scene-x) * 1.4deg)) rotateX(calc(var(--scene-y) * -.7deg));transition:none;z-index:1}
.s-stage:after{display:none}
.s-map-scene{inset:-15px -3% -12px -3%;z-index:-2;border-radius:40px;background:linear-gradient(130deg,rgba(38,52,27,.02),rgba(11,26,13,.16)),url('./assets/spatial-district.png') center/cover;opacity:1;transform:translate3d(calc(var(--scene-x) * -13px),calc(var(--scene-y) * -10px),-100px) rotateX(24deg) rotateZ(-10deg) scale(var(--map-scale,1));transform-origin:center 55%;box-shadow:-2px -2px 0 rgba(255,238,172,.55),2px 7px 0 #8a8660,5px 15px 0 #4e5d3a,9px 23px 0 #273f29,13px 36px 35px rgba(0,8,0,.6),0 80px 110px rgba(0,9,0,.65);outline:1px solid rgba(236,223,157,.35)}
.s-map-scene:after{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(130deg,rgba(255,241,170,.14),transparent 35%,rgba(124,215,162,.06));box-shadow:inset 0 0 0 9px rgba(241,230,157,.07),inset 0 0 0 10px rgba(255,233,143,.2);pointer-events:none}
.s-map-label{top:auto;bottom:-16px;left:14px;right:auto;font-size:7px;opacity:.75;transform:rotateZ(-4deg)}
.s-map-pins{transform:translate3d(calc(var(--scene-x) * -9px),calc(var(--scene-y) * -6px),-30px);inset:-10px -25px}
:root[data-design=spatial] .s-glass{background-color:rgba(27,40,29,.13);background-image:linear-gradient(128deg,rgba(255,244,198,.16),rgba(209,237,204,.025) 34%,rgba(107,183,160,.07));border-color:rgba(235,241,208,.32);border-top-color:rgba(255,249,215,.73);border-left-color:rgba(255,248,220,.7);box-shadow:-1px -1px 1px rgba(255,255,227,.48),2px 5px 0 rgba(205,220,179,.11),8px 17px 28px rgba(0,13,5,.29),0 30px 55px rgba(0,12,1,.2),inset 0 0 18px rgba(230,237,192,.035);backdrop-filter:blur(13px) saturate(115%)}
.s-feature{width:96%;margin:0 0 0 1%;grid-template-columns:43% minmax(0,1fr);min-height:354px;padding:24px 23px 17px;transform:translate3d(calc(var(--scene-x) * 9px),calc(var(--scene-y) * 5px),65px) rotateY(-5deg) rotateX(3deg) rotateZ(-1.2deg);transform-origin:52% 60%;transition:box-shadow .3s;animation:s-enter-main .85s cubic-bezier(.19,1,.22,1) both}
.s-feature:before,.s-mini:before,.s-assistant:before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:4;background:radial-gradient(ellipse at var(--shine-x,15%) var(--shine-y,0%),rgba(255,253,220,.11),transparent 48%);box-shadow:inset 1px 1px 0 rgba(255,251,219,.36),inset -1px -1px 0 rgba(229,246,210,.14)}
.s-feature:after{content:'';position:absolute;inset:3px -3px -6px 3px;border-radius:inherit;border-right:2px solid rgba(233,241,212,.14);border-bottom:4px solid rgba(177,203,172,.14);pointer-events:none;z-index:-1}
.s-feature:hover{box-shadow:-1px -1px 1px rgba(255,255,227,.55),2px 5px 0 rgba(205,220,179,.13),8px 25px 35px rgba(0,13,5,.35),0 40px 75px rgba(0,12,1,.23)}
.s-feature h2{font-size:25px;font-weight:480;text-shadow:0 3px 12px rgba(12,30,9,.45)}
.s-feature-top{margin-bottom:16px}.s-property-facts{gap:10px}.s-feature-price{font-size:23px;margin-top:17px}
.s-hero-visual{margin:-32px -25px -14px -19px;transform:translate3d(calc(var(--scene-x) * 11px),calc(var(--scene-y) * 6px - 10px),42px);filter:drop-shadow(0 26px 20px rgba(0,12,3,.26));transition:transform .15s ease-out;min-height:280px}
.s-hero-visual>.s-property-art{transform:scale(1.12);filter:drop-shadow(0 32px 14px rgba(0,10,3,.4))}
.s-hero-visual:hover>.s-property-art{transform:scale(1.18) translateY(-6px)}
.s-visual-caption{right:10px;bottom:13px;font-size:8px;background:rgba(19,37,25,.6);box-shadow:0 7px 17px rgba(0,9,0,.3);min-height:25px}
.s-steps{margin-top:21px}.s-step{background:linear-gradient(140deg,rgba(236,245,191,.13),rgba(172,217,178,.035));box-shadow:inset 1px 1px 0 rgba(251,252,217,.18),0 5px 0 rgba(108,145,112,.1),0 9px 20px rgba(0,19,5,.18);transition:transform .2s,background .2s,box-shadow .2s}
.s-step:hover{transform:translateY(-5px);background:rgba(221,249,193,.2);box-shadow:inset 1px 1px 0 rgba(251,252,217,.3),0 8px 0 rgba(108,145,112,.12),0 17px 23px rgba(0,19,5,.3)}
.s-project-browser{margin:33px 12px 0 12px;transform:translate3d(0,0,22px) rotateZ(-1deg);z-index:2;font-size:9px}
.s-project-browser>span{color:#e6efd6;text-shadow:0 2px 5px #182f10}
.s-mini-grid{overflow:visible;gap:25px;margin:13px 13px 0;transform-style:preserve-3d}
.s-project-browser+.s-mini-grid{margin-top:13px}
.s-mini{position:relative;min-height:235px;overflow:visible;border-radius:22px;padding:16px 15px 13px;animation:s-enter-sub 1s cubic-bezier(.19,1,.22,1) .08s both;transition:box-shadow .25s,filter .25s}
.s-mini:first-child{transform:translate3d(calc(var(--scene-x) * 14px - 3px),calc(var(--scene-y) * 6px),90px) rotateY(-7deg) rotateX(3deg) rotateZ(-3deg)}
.s-mini:nth-child(2){transform:translate3d(calc(var(--scene-x) * 6px + 5px),calc(var(--scene-y) * 4px + 14px),34px) rotateY(7deg) rotateX(2deg) rotateZ(3deg)}
.s-mini:hover{filter:brightness(1.09);box-shadow:0 25px 45px rgba(0,10,2,.45),inset 1px 1px 0 rgba(255,251,217,.4)}
.s-mini-visual{height:145px;overflow:visible}.s-mini-visual>.s-property-art{inset:-9px 6% -6px 6%;transform:translateY(-3px) scale(1.05);filter:drop-shadow(0 17px 10px rgba(0,13,0,.4));transition:transform .3s}.s-mini-visual:hover>.s-property-art{transform:translateY(-9px) scale(1.09)}
.s-mini-price{font-size:12px}.s-mini-title{font-size:15px}.s-mini-top p{font-size:8px}
.s-stage-bottom{margin:27px 5px 0;transform:translateZ(60px) rotateZ(1deg)}
.s-stage-bottom>span{visibility:hidden}
.s-view-tools{border-color:rgba(233,244,204,.42);background:rgba(29,46,31,.43);box-shadow:0 10px 25px rgba(0,12,2,.4),inset 0 1px 1px rgba(247,248,211,.3);backdrop-filter:blur(18px);padding:5px 8px}
.s-view-tools button{width:31px;height:31px}
.s-assistant{position:relative;top:7px;margin-top:0;width:calc(100% - 8px);justify-self:start;transform:perspective(1600px) translate3d(calc(var(--scene-x) * 5px - 3px),calc(var(--scene-y) * 4px),30px) rotateY(-5deg) rotateZ(.9deg);transform-origin:right center;overflow:visible;z-index:3;animation:s-enter-assistant .95s cubic-bezier(.19,1,.22,1) .12s both}
.s-map-pins{pointer-events:none}.s-stage.map-mode .s-map-pins{pointer-events:auto}
.s-assistant-title{border-radius:25px 25px 0 0;background:linear-gradient(120deg,rgba(234,241,190,.12),rgba(233,240,201,.015));padding:19px 18px}.s-assistant-content{padding:21px 18px 19px}
.s-orb{box-shadow:0 0 25px rgba(198,254,178,.20),inset 1px 1px 5px rgba(252,255,210,.8);animation:s-orb-breathe 5s ease-in-out infinite}
.s-suggestion{background:linear-gradient(130deg,rgba(153,215,156,.12),rgba(104,188,153,.08));box-shadow:inset 1px 1px 0 rgba(222,255,214,.15),0 10px 24px rgba(0,21,3,.16);backdrop-filter:blur(8px)}
.s-confirm{box-shadow:0 0 27px rgba(170,251,177,.3),0 5px 0 rgba(63,126,82,.3),0 12px 17px rgba(0,21,6,.3),inset 0 1px 0 #eeffe4;transition:transform .18s,box-shadow .18s}
.s-confirm:hover{transform:translateY(-2px)}.s-confirm:active{transform:translateY(3px)}
:root[data-design=spatial] .s-intent{position:relative;margin-top:25px;transform:perspective(1400px) rotateX(7deg) translateZ(20px);background:linear-gradient(120deg,rgba(230,242,177,.14),rgba(103,166,128,.08));box-shadow:-1px -1px 0 rgba(255,250,208,.3),0 7px 0 rgba(153,190,139,.11),0 20px 50px rgba(0,11,0,.45);backdrop-filter:blur(21px);z-index:5}
.s-intent:focus-within .s-wave i{animation:s-voice .8s ease-in-out infinite alternate;animation-delay:calc(var(--h) * -.03s)}
.s-intent-examples{position:relative;z-index:5}.s-tabs{border-bottom:0;margin-bottom:12px}.s-workspace-heading{margin-bottom:20px}
.s-stage.map-mode{min-height:720px}.s-stage.map-mode .s-map-scene{transform:translateZ(-20px) rotateX(13deg) rotateZ(-5deg) scale(var(--map-scale,1))}.s-stage.map-mode .s-map-pins{inset:0;transform:translateZ(30px)}.s-stage.map-mode .s-map-pin strong{backdrop-filter:blur(12px);background:rgba(22,43,23,.64);box-shadow:0 10px 25px rgba(0,9,0,.25)}
@keyframes s-enter-main{from{opacity:0;translate:0 35px;filter:blur(3px)}to{opacity:1;translate:0 0;filter:none}}
@keyframes s-enter-sub{from{opacity:0;translate:0 30px}to{opacity:1;translate:0 0}}
@keyframes s-enter-assistant{from{opacity:0;translate:20px 12px}to{opacity:1;translate:0 0}}
@keyframes s-orb-breathe{0%,100%{filter:brightness(.9);scale:.97}50%{filter:brightness(1.15);scale:1.025}}
@keyframes s-voice{from{scale:1 .5;opacity:.6}to{scale:1 1.1;opacity:1}}
@media(min-width:1650px){.s-feature{min-height:395px;padding:28px}.s-feature h2{font-size:29px}.s-feature-price{font-size:27px}.s-mini{min-height:270px}.s-mini-visual{height:175px}.s-stage{min-height:780px}.s-mini-title{font-size:18px}.s-mini-top p{font-size:10px}.s-assistant{top:12px}.s-layout{gap:38px}}
@media(max-width:1250px){.s-layout{gap:25px}.s-feature{padding:20px 17px 15px;grid-template-columns:45% minmax(0,1fr);min-height:350px}.s-feature h2{font-size:22px}.s-feature-price{font-size:20px}.s-feature-copy>p{font-size:9px}.s-hero-visual{min-height:260px;margin:-20px -20px -5px -18px}.s-mini-grid{gap:17px;margin-inline:8px}.s-mini{padding:15px 12px;min-height:220px}.s-mini-title{font-size:13px}.s-mini-visual{height:137px}.s-project-browser{margin-top:32px}}
@media(min-width:768px) and (max-width:1050px){.s-stage{margin:10px 8px 25px;min-height:660px}.s-feature{width:94%;min-height:360px}.s-assistant{transform:none;margin-top:20px;top:0}.s-map-scene{inset:-10px -1% -4px}.s-hero-visual{min-height:275px}.s-stage-bottom{margin-top:35px}.s-mini{min-height:220px}.s-mini-grid{margin:15px 20px}.s-assistant-content{padding:20px;display:block}.s-reasons{margin-top:22px}.s-assistant-more{margin-top:23px}.s-feature h2{font-size:25px}}
@media(max-width:767px){:root[data-design=spatial] .app-shell{padding:0 16px 18px}:root[data-design=spatial] .sidebar{transform:translateX(-280px);background:linear-gradient(135deg,rgba(74,79,46,.95),rgba(20,44,29,.97))}:root[data-design=spatial] .sidebar.open,:root[data-design=spatial] body.nav-open .sidebar{transform:translateX(0)}:root[data-design=spatial] .topbar{margin-bottom:15px}.s-workspace-heading h1{font-size:28px}.s-layout{perspective:1300px;padding:0;gap:20px}.s-stage{padding:24px 0 10px;margin:0;min-height:0;transform:rotateY(calc(var(--scene-x) * .8deg));width:100%}.s-feature{width:calc(100% - 12px);margin:0 6px;padding:20px 17px 14px;grid-template-columns:1fr;min-height:0;transform:translateZ(20px) rotateY(-2deg) rotateZ(-.6deg)}.s-feature h2{font-size:25px}.s-map-scene{inset:20px -8px -5px;border-radius:27px;transform:translate3d(calc(var(--scene-x) * -6px),0,-70px) rotateX(9deg) rotateZ(-4deg) scale(var(--map-scale,1));box-shadow:0 7px 0 #87915b,4px 14px 0 #344c30,7px 22px 25px rgba(0,10,0,.45)}.s-hero-visual{margin:-2px -5px -5px;height:245px;min-height:245px;transform:translate3d(calc(var(--scene-x) * 6px),-6px,25px)}.s-hero-visual>.s-property-art{transform:scale(1.08)}.s-property-facts{font-size:10px}.s-feature-price{font-size:23px}.s-owner{font-size:8px}.s-project-browser{margin:31px 10px 0;transform:none}.s-mini-grid{overflow-x:auto;overflow-y:hidden;grid-auto-columns:calc(100% - 30px);gap:15px;margin:12px 0 0;padding:8px 12px 25px;perspective:1200px;transform-style:flat}.s-mini:first-child{transform:rotateZ(-1deg);translate:0 0}.s-mini:nth-child(2){transform:rotateZ(1deg);translate:0 0}.s-mini{min-height:245px;padding:18px 15px;overflow:visible}.s-mini-title{font-size:18px}.s-mini-top p{font-size:10px}.s-mini-visual{height:155px}.s-mini-visual>.s-property-art{inset:-5px 9% -2px}.s-stage-bottom{margin:1px 8px 0;transform:none}.s-map-label{font-size:6px;bottom:-15px;left:8px;transform:none}.s-assistant{position:relative;top:0;width:calc(100% - 8px);margin:20px 4px 0;transform:rotateY(-1deg) rotateZ(.4deg)}.s-assistant-title{padding:20px}.s-assistant-content{padding:22px 19px}.s-feature-top{margin-bottom:15px}.s-steps{margin-top:17px}.s-stage.map-mode{min-height:580px;height:580px}.s-stage.map-mode .s-map-scene{inset:15px 0;transform:rotateX(8deg) rotateZ(-3deg) scale(var(--map-scale,1))}.s-stage.map-mode .s-map-label{top:auto;bottom:0;font-size:6px}.s-intent-examples{gap:7px}:root[data-design=spatial] .s-intent{margin-top:25px;transform:rotateX(3deg)}.s-map-pins{inset:20px 0}.s-mini .s-steps{margin-top:0}}
@media(max-width:370px){.s-workspace-heading h1{font-size:25px}.s-feature h2{font-size:23px}.s-hero-visual{height:225px;min-height:225px}.s-mini-grid{grid-auto-columns:calc(100% - 18px)}}
:root[data-design=spatial][data-theme=light] .s-glass{background-color:rgba(217,233,192,.33)}
:root[data-design=spatial][data-theme=light] .s-stage .s-glass{background-color:rgba(31,48,30,.16)}
:root[data-design=spatial][data-theme=light] .s-assistant{background-image:linear-gradient(125deg,rgba(255,252,211,.38),rgba(233,253,216,.02));box-shadow:-1px -1px 1px rgba(255,255,226,.9),2px 5px 0 rgba(123,161,105,.12),10px 24px 40px rgba(39,65,24,.2)}
:root[data-design=spatial][data-transparency=reduced] .s-glass{background:#293923;backdrop-filter:none}
:root[data-design=spatial][data-theme=light][data-transparency=reduced] .s-assistant{background:#d3e1b9}
@media(prefers-reduced-motion:reduce){.s-layout,.s-stage,.s-feature,.s-mini,.s-assistant,.s-hero-visual,.s-orb,.s-wave i{animation:none!important;transition:none!important;translate:none!important}.s-stage{transform:none}.s-feature{transform:rotateZ(-1deg)}.s-mini:first-child{transform:rotateZ(-1deg)}.s-mini:nth-child(2){transform:rotateZ(1deg)}}
