/* Interactive surfaces: phase engine and command lab. */

.hero__scene{--rx:0deg;--ry:0deg;position:relative;height:660px;min-width:0;transform:perspective(1400px) rotateX(var(--rx)) rotateY(var(--ry));transform-style:preserve-3d;transition:transform .18s ease-out}
.scene-grid{position:absolute;inset:20px 10px 110px 32px;border:1px solid rgba(255,255,255,.1)}
.scene-grid:before,.scene-grid:after{content:"";position:absolute;background:rgba(255,255,255,.08)}
.scene-grid:before{left:33%;top:0;bottom:0;width:1px;box-shadow:180px 0 0 rgba(255,255,255,.06),360px 0 0 rgba(255,255,255,.04)}
.scene-grid:after{left:0;right:0;top:33%;height:1px;box-shadow:0 150px 0 rgba(255,255,255,.06),0 300px 0 rgba(255,255,255,.04)}
.scene-node{position:absolute;width:9px;height:9px;background:var(--signal);box-shadow:0 0 0 7px color-mix(in srgb,var(--signal) 14%,transparent),0 0 28px color-mix(in srgb,var(--signal) 56%,transparent);transition:background .35s ease,box-shadow .35s ease}
.scene-node--one{left:18px;top:17%}
.scene-node--two{right:4px;top:42%}
.scene-node--three{left:24%;bottom:92px}

.browser{background:#f8fafc;border:1px solid rgba(255,255,255,.24);box-shadow:0 36px 90px rgba(0,0,0,.34);overflow:hidden;border-radius:8px;color:var(--ink)}
.browser--hero{position:absolute;inset:52px 0 auto 58px;height:468px;transform:translateZ(28px)}
.browser__chrome{height:42px;background:#e8edf1;border-bottom:1px solid #ccd4dc;display:grid;grid-template-columns:70px 1fr auto;gap:14px;align-items:center;padding:0 14px;font:500 .66rem/1 var(--mono);color:#647184}
.browser__controls{display:flex;gap:6px}
.browser__controls i{width:7px;height:7px;border-radius:50%;background:#a6b1bd}
.browser__controls i:first-child{background:#f07e68}.browser__controls i:nth-child(2){background:#e9b84e}.browser__controls i:last-child{background:#5cb98b}
.browser__url{min-width:0;display:flex;align-items:center;gap:8px;background:#fff;border:1px solid #d4dae0;padding:7px 10px;border-radius:3px;overflow:hidden;white-space:nowrap}
.browser__url i{width:6px;height:6px;background:var(--publish);border-radius:50%;flex:0 0 auto}
.browser__url span{overflow:hidden;text-overflow:ellipsis}
.browser__env{text-transform:uppercase;color:#647184;white-space:nowrap}

.site-preview{position:relative;height:calc(100% - 42px);background:#f2ecdf;display:grid;grid-template-columns:1.04fr .96fr;grid-template-rows:54px 1fr 58px;overflow:hidden;--preview-accent:#9d472c}
.site-preview__nav{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;padding:0 24px;background:#f8f4eb;border-bottom:1px solid rgba(36,30,22,.14);font-size:.66rem;color:#564d42}
.site-preview__nav strong{font:700 .86rem/1 var(--display);color:#221d17}
.site-preview__body{padding:42px 24px 26px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center}
.site-preview__label{font:600 .56rem/1.2 var(--mono);text-transform:uppercase;color:var(--preview-accent);margin:0 0 13px}
.site-preview__body h2{font-family:var(--display);font-size:2.5rem;line-height:.94;letter-spacing:0;margin:0;max-width:420px;color:#201a14;transition:opacity .2s ease,transform .2s ease}
.site-preview__body>p:not(.site-preview__label){font-size:.7rem;line-height:1.55;color:#665b4d;max-width:32ch;margin:15px 0}
.site-preview__button{display:inline-flex;background:var(--preview-accent);color:#fff;padding:8px 11px;border-radius:2px;font-size:.58rem;font-weight:700}
.site-preview__media{background:#5e4431 url("../cafe-valparaiso/assets/hero.jpg") center/cover no-repeat;filter:saturate(.82) contrast(1.02)}
.site-preview__hours{grid-column:1/-1;background:#211d19;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 24px;font-size:.62rem;transform:translateY(100%);opacity:0;transition:transform .4s ease,opacity .4s ease}
.site-preview__hours span{color:#b9ad9d}
.site-preview__hours strong{font-family:var(--mono);font-size:.62rem;font-weight:500}
.build-guides,.deploy-scan,.diff-flag,.health-flag{position:absolute;pointer-events:none;opacity:0;transition:opacity .3s ease}
.build-guides{inset:54px 0 0}
.build-guides i{position:absolute;border:1px solid var(--build);background:rgba(61,112,255,.06)}
.build-guides i:first-child{left:3%;top:7%;width:43%;height:70%}
.build-guides i:nth-child(2){right:3%;top:7%;width:45%;height:70%}
.build-guides i:nth-child(3){left:3%;right:3%;bottom:3%;height:15%}
.build-guides i:last-child{left:8%;top:31%;width:30%;height:8px;border-style:dashed}
.deploy-scan{left:0;right:0;top:55px;height:2px;background:var(--publish);box-shadow:0 0 24px rgba(36,180,126,.8)}
.diff-flag,.health-flag{right:14px;top:68px;padding:7px 9px;background:#fff;border:1px solid;font:600 .58rem/1 var(--mono);text-transform:uppercase;box-shadow:0 9px 24px rgba(13,19,32,.16)}
.diff-flag{color:var(--maintain);border-color:var(--maintain)}
.health-flag{color:#08748b;border-color:var(--monitor);display:flex;align-items:center;gap:7px}
.health-flag i{width:7px;height:7px;border-radius:50%;background:var(--monitor)}

body[data-phase="build"] .build-guides{opacity:1}
body[data-phase="publish"] .deploy-scan{opacity:1;animation:deploy-scan 1.8s ease-in-out infinite}
body[data-phase="publish"] .site-preview__hours,
body[data-phase="maintain"] .site-preview__hours,
body[data-phase="monitor"] .site-preview__hours{transform:translateY(0);opacity:1}
body[data-phase="maintain"] .diff-flag{opacity:1;animation:flag-enter .4s ease both}
body[data-phase="monitor"] .health-flag{opacity:1;animation:flag-enter .4s ease both}
body[data-phase="monitor"] .health-flag i{animation:signal-pulse 1.8s ease-out infinite}
@keyframes deploy-scan{0%{transform:translateY(0);opacity:0}20%{opacity:1}80%{opacity:1}100%{transform:translateY(350px);opacity:0}}
@keyframes flag-enter{from{transform:translateY(-8px)}to{transform:translateY(0)}}
@keyframes signal-pulse{0%{box-shadow:0 0 0 0 rgba(39,186,209,.5)}70%{box-shadow:0 0 0 8px rgba(39,186,209,0)}100%{box-shadow:0 0 0 0 rgba(39,186,209,0)}}

.agent-status{position:absolute;left:0;right:38px;bottom:20px;min-height:132px;background:rgba(7,17,31,.94);border:1px solid rgba(255,255,255,.18);border-radius:6px;padding:17px 19px;color:#fff;box-shadow:0 20px 50px rgba(0,0,0,.3);transform:translateZ(52px)}
.agent-status__head{display:flex;align-items:center;justify-content:space-between;gap:18px}
.agent-status__phase{font:600 .67rem/1 var(--mono);color:var(--signal);text-transform:uppercase;transition:color .35s ease}
.agent-status__state{display:flex;align-items:center;gap:7px;font:500 .6rem/1 var(--mono);color:#9eacbd;text-transform:uppercase}
.agent-status__state i{width:6px;height:6px;border-radius:50%;background:var(--signal);transition:background .35s ease}
.agent-status>p{font-size:.78rem;line-height:1.5;color:#d5deea;margin:16px 0 14px;max-width:60ch}
.agent-status__track{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.agent-status__track i{height:2px;background:rgba(255,255,255,.15)}
body[data-phase="build"] .agent-status__track i:first-child,
body[data-phase="publish"] .agent-status__track i:nth-child(-n+2),
body[data-phase="maintain"] .agent-status__track i:nth-child(-n+3),
body[data-phase="monitor"] .agent-status__track i{background:var(--signal)}

.process-orbit{position:relative;width:380px;height:380px;align-self:center;border:1px solid #c9d0d6;border-radius:50%}
.process-orbit:before{content:"";position:absolute;inset:64px;border:1px solid #dce1e4;border-radius:50%}
.process-orbit__core{position:absolute;left:50%;top:50%;width:108px;height:108px;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;background:var(--navy);color:#fff;font:700 2.2rem/1 var(--display);border:10px solid var(--paper);box-shadow:0 0 0 1px #bdc6ce;z-index:3}
.process-orbit__core span{color:var(--signal);transition:color .35s ease}
.orbit-node{position:absolute;width:46px;height:46px;border-radius:50%;background:var(--paper);border:1px solid #bfc8cf;display:flex;align-items:center;justify-content:center;z-index:4;transition:background .35s ease,border-color .35s ease,transform .35s ease}
.orbit-node b{font:600 .68rem/1 var(--mono);color:#697585}
.orbit-node--build{left:50%;top:-23px;transform:translateX(-50%)}
.orbit-node--publish{right:-23px;top:50%;transform:translateY(-50%)}
.orbit-node--maintain{left:50%;bottom:-23px;transform:translateX(-50%)}
.orbit-node--monitor{left:-23px;top:50%;transform:translateY(-50%)}
.orbit-line{position:absolute;background:#cbd2d8;z-index:1}
.orbit-line--a,.orbit-line--c{width:1px;height:84px;left:50%}
.orbit-line--a{top:24px}.orbit-line--c{bottom:24px}
.orbit-line--b,.orbit-line--d{height:1px;width:84px;top:50%}
.orbit-line--b{right:24px}.orbit-line--d{left:24px}
body[data-phase="build"] .orbit-node--build,
body[data-phase="publish"] .orbit-node--publish,
body[data-phase="maintain"] .orbit-node--maintain,
body[data-phase="monitor"] .orbit-node--monitor{background:var(--signal);border-color:var(--signal)}
body[data-phase="build"] .orbit-node--build b,
body[data-phase="publish"] .orbit-node--publish b,
body[data-phase="maintain"] .orbit-node--maintain b,
body[data-phase="monitor"] .orbit-node--monitor b{color:#fff}
body[data-phase="build"] .orbit-node--build{transform:translateX(-50%) scale(1.14)}
body[data-phase="publish"] .orbit-node--publish{transform:translateY(-50%) scale(1.14)}
body[data-phase="maintain"] .orbit-node--maintain{transform:translateX(-50%) scale(1.14)}
body[data-phase="monitor"] .orbit-node--monitor{transform:translateY(-50%) scale(1.14)}

.conversation,.preview-workbench{min-height:690px;border:1px solid #bfc7ce;background:#fff}
.conversation{display:flex;flex-direction:column;background:var(--navy);color:#fff}
.conversation__head{height:58px;padding:0 18px;border-bottom:1px solid rgba(255,255,255,.13);display:flex;align-items:center;justify-content:space-between}
.conversation__head>div{display:flex;align-items:center;gap:9px}
.conversation__head i{width:9px;height:9px;border-radius:50%;background:var(--publish);box-shadow:0 0 0 5px rgba(36,180,126,.1)}
.conversation__head strong{font:600 .78rem/1 var(--mono)}
.icon-button{width:34px;height:34px;border:1px solid rgba(255,255,255,.16);background:transparent;color:#a9b5c5;border-radius:2px;cursor:pointer;font-size:1.1rem}
.icon-button:hover{background:rgba(255,255,255,.08);color:#fff}
.conversation__log{flex:1;min-height:290px;max-height:390px;overflow:auto;padding:24px 18px;display:flex;flex-direction:column;gap:12px;scrollbar-color:#314159 transparent}
.message{max-width:82%;margin:0;padding:11px 13px;border-radius:6px;font-size:.83rem;line-height:1.45;animation:message-in .3s ease both}
.message--user{align-self:flex-end;background:#e7edf7;color:#152033;border-bottom-right-radius:2px}
.message--agent{align-self:flex-start;background:#16263a;color:#dbe4ee;border:1px solid rgba(255,255,255,.08);border-bottom-left-radius:2px}
.message--thinking{color:#8292a7;font-family:var(--mono)}
@keyframes message-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.command-presets{padding:14px 18px 8px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;border-top:1px solid rgba(255,255,255,.1)}
.command-presets button{border:1px solid rgba(255,255,255,.16);background:transparent;color:#afbdcd;border-radius:2px;padding:9px 10px;cursor:pointer;font-size:.71rem;text-align:left}
.command-presets button:hover,.command-presets button:focus-visible{border-color:var(--monitor);color:#fff;background:rgba(39,186,209,.08)}
.command-presets button:disabled{opacity:.42;cursor:wait}
.command-form{display:grid;grid-template-columns:1fr auto;gap:7px;padding:8px 18px 12px}
.command-form input{min-width:0;height:42px;border:1px solid rgba(255,255,255,.2);background:#0e1c2e;color:#fff;border-radius:3px;padding:0 12px;font-size:.8rem}
.command-form input::placeholder{color:#6e7e93}
.command-form button{height:42px;border:0;background:var(--build);color:#fff;border-radius:2px;padding:0 14px;font-size:.76rem;font-weight:700;cursor:pointer}
.demo-note{margin:0;padding:0 18px 16px;color:#6f8095;font-size:.63rem}

.preview-workbench{display:flex;flex-direction:column;background:#f5f7f8}
.preview-workbench__bar{height:72px;padding:0 20px;display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid #cbd2d8}
.preview-workbench__bar>div{display:flex;flex-direction:column;gap:5px}
.preview-workbench__label{font:500 .63rem/1 var(--mono);text-transform:uppercase;color:#7a8594}
.preview-workbench__bar strong{font-family:var(--display);font-size:1.05rem}
.preview-workbench__pulse{display:flex;align-items:center;gap:8px;font:500 .62rem/1 var(--mono);text-transform:uppercase;color:#5c6978}
.preview-workbench__pulse i{width:7px;height:7px;border-radius:50%;background:var(--publish)}
.browser--lab{flex:1;margin:16px;border-color:#c3cbd2;box-shadow:0 22px 50px rgba(13,19,32,.12)}
.bakery-site{--bakery-accent:#315f8e;--bakery-paper:#f4efe6;height:calc(100% - 42px);display:flex;flex-direction:column;background:var(--bakery-paper);position:relative;overflow:hidden;transition:background .45s ease}
.bakery-site[data-theme="clay"]{--bakery-accent:#a6492d;--bakery-paper:#f5eadc}
.bakery-nav{height:52px;display:flex;align-items:center;justify-content:space-between;padding:0 22px;border-bottom:1px solid rgba(24,28,30,.13);font-size:.64rem;color:#555d61}
.bakery-nav strong{font:700 1rem/1 var(--display);color:var(--bakery-accent);transition:color .45s ease}
.bakery-hero{flex:1;min-height:0;display:grid;grid-template-columns:1fr 1.04fr}
.bakery-hero__copy{padding:34px 24px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.bakery-hero__copy p{font:600 .58rem/1.3 var(--mono);text-transform:uppercase;color:var(--bakery-accent);margin:0 0 14px;transition:color .45s ease}
.bakery-hero__copy h3{font-family:var(--display);font-size:2.6rem;line-height:.93;letter-spacing:0;margin:0;color:#25221e;max-width:390px;transition:opacity .2s ease,transform .2s ease}
.bakery-hero__copy>span{display:inline-flex;margin-top:22px;padding:8px 11px;background:var(--bakery-accent);color:#fff;border-radius:2px;font-size:.62rem;font-weight:700;transition:background .45s ease}
.bakery-hero img{width:100%;height:100%;object-fit:cover;filter:saturate(.78) contrast(1.03)}
.bakery-hours{min-height:62px;padding:0 22px;background:#25221e;color:#fff;display:flex;align-items:center;justify-content:space-between;gap:18px;animation:hours-enter .4s ease both}
.bakery-hours span{font-size:.65rem;color:#aeb4b8}.bakery-hours strong{font:500 .67rem/1.2 var(--mono)}
.bakery-footer{height:48px;padding:0 22px;display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:.58rem;color:#6f706b;border-top:1px solid rgba(24,28,30,.13)}
.change-flash{position:absolute;inset:0;border:2px solid var(--bakery-accent);opacity:0;pointer-events:none}
.change-flash.is-active{animation:change-flash .75s ease}
@keyframes hours-enter{from{opacity:0;transform:translateY(100%)}to{opacity:1;transform:none}}
@keyframes change-flash{0%{opacity:0}25%{opacity:1}100%{opacity:0}}

@media(max-width:1300px){
  .hero__scene{height:610px}
  .browser--hero{left:34px;height:438px}
  .site-preview__body h2{font-size:2.15rem}
  .agent-status{right:22px}
  .process-orbit{width:340px;height:340px}
  .conversation,.preview-workbench{min-height:650px}
}

@media(max-width:980px){
  .hero__scene{height:620px;transform:none}
  .browser--hero{left:30px;right:30px}
  .agent-status{left:0;right:0}
  .process-orbit{width:350px;height:350px}
  .conversation,.preview-workbench{min-height:620px}
}

@media(max-width:620px){
  .hero__scene{height:500px}
  .scene-grid{inset:8px 0 82px 8px}
  .scene-grid:before{box-shadow:110px 0 0 rgba(255,255,255,.06),220px 0 0 rgba(255,255,255,.04)}
  .scene-grid:after{box-shadow:0 100px 0 rgba(255,255,255,.06),0 200px 0 rgba(255,255,255,.04)}
  .browser--hero{inset:20px 0 auto;height:350px}
  .browser__chrome{height:36px;grid-template-columns:48px 1fr auto;gap:8px;padding-inline:9px;font-size:.54rem}
  .browser__controls{gap:4px}.browser__controls i{width:5px;height:5px}
  .browser__url{padding:6px 7px}
  .site-preview{height:calc(100% - 36px);grid-template-rows:42px 1fr 48px}
  .site-preview__nav{padding-inline:13px}.site-preview__nav span{display:none}
  .site-preview__body{padding:24px 13px}
  .site-preview__body h2{font-size:1.55rem}
  .site-preview__body>p:not(.site-preview__label){font-size:.57rem;margin-block:10px}
  .site-preview__hours{padding-inline:13px;font-size:.52rem}.site-preview__hours strong{font-size:.5rem}
  .build-guides{inset:42px 0 0}
  .agent-status{bottom:0;min-height:126px;padding:14px}
  .agent-status__head{align-items:flex-start}.agent-status__state{font-size:.53rem}
  .agent-status>p{font-size:.7rem;margin-block:13px}
  .process-orbit{width:280px;height:280px}
  .process-orbit:before{inset:48px}
  .process-orbit__core{width:82px;height:82px;font-size:1.7rem}
  .orbit-node{width:38px;height:38px}
  .orbit-node--build{top:-19px}.orbit-node--publish{right:-19px}.orbit-node--maintain{bottom:-19px}.orbit-node--monitor{left:-19px}
  .orbit-line--a,.orbit-line--c{height:60px}.orbit-line--a{top:20px}.orbit-line--c{bottom:20px}
  .orbit-line--b,.orbit-line--d{width:60px}.orbit-line--b{right:20px}.orbit-line--d{left:20px}
  .conversation,.preview-workbench{min-height:560px}
  .conversation__log{min-height:240px}
  .command-presets{grid-template-columns:1fr 1fr;padding-inline:12px}
  .command-form{padding-inline:12px}
  .demo-note{padding-inline:12px}
  .preview-workbench__bar{height:64px;padding-inline:13px}
  .preview-workbench__pulse{display:none}
  .browser--lab{margin:8px}
  .bakery-nav{height:42px;padding-inline:13px}.bakery-nav span{display:none}
  .bakery-hero{grid-template-columns:1fr;grid-template-rows:1fr 1fr}
  .bakery-hero__copy{padding:20px 14px}
  .bakery-hero__copy h3{font-size:1.85rem}
  .bakery-hero__copy>span{margin-top:14px}
  .bakery-hours{padding:9px 13px;align-items:flex-start;flex-direction:column;justify-content:center;gap:4px}
  .bakery-footer{padding-inline:13px}.bakery-footer span:first-child{display:none}
}

@media(prefers-reduced-motion:reduce){
  .hero__scene{transform:none!important}
  .deploy-scan,.health-flag i{animation:none!important}
}