/* home.css — capability wall demos, stack, ai note */
.stack__also{ margin-top:var(--s-6); color:var(--fg-muted); text-transform:none; letter-spacing:.04em } .stack__also a{ color:var(--fg) }
.stack__visual .visual{ width:100% }
.ai-note{ border:1px solid var(--line); padding:var(--s-6); display:flex; flex-direction:column; gap:var(--s-3); align-self:start; position:sticky; top:calc(var(--header-h) + var(--s-5)) }
.cases-rows{ margin-top:var(--s-6) }
.wall__tile{ min-height:220px }
.wall__demo{ align-items:center; justify-content:center; color:var(--fg) }
.wall__tile[data-hue="ocean"]{ --hue:var(--block-ocean) } .wall__tile[data-hue="violet"]{ --hue:var(--block-violet) } .wall__tile[data-hue="ember"]{ --hue:var(--signal) } .wall__tile[data-hue="mint"]{ --hue:var(--block-mint) } .wall__tile[data-hue="sun"]{ --hue:var(--block-sun) } .wall__tile[data-hue="rose"]{ --hue:var(--block-rose) }
/* demos */
.demo-frame{ position:relative; width:72px; height:72px; border:1px solid var(--line-strong); display:flex; align-items:center; justify-content:center; overflow:hidden }
.demo-frame__fill{ position:absolute; left:0; right:0; bottom:0; height:0; background:var(--hue) } .is-inview .demo-frame__fill{ animation:fill 1.2s var(--ease-flip) forwards .3s }
.demo-frame__num{ position:relative; font-weight:500; mix-blend-mode:difference; color:#fff }
@keyframes fill{ to{ height:100% } }
.demo-toast{ display:inline-flex; align-items:center; gap:var(--s-2); padding:var(--s-2) var(--s-3); border:1px solid var(--line-strong); background:var(--bg); transform:translateY(12px); opacity:0 } .demo-toast .square{ background:var(--hue) } .is-inview .demo-toast{ animation:toast .5s var(--ease-out) forwards .4s }
@keyframes toast{ to{ transform:none; opacity:1 } }
.demo-phone{ width:96px; height:64px; border:1px solid var(--line-strong); border-radius:12px 12px 0 0; border-bottom:0; position:relative; overflow:hidden } .demo-phone__push{ position:absolute; left:6px; right:6px; top:8px; display:flex; gap:6px; align-items:center; padding:6px; background:var(--bg-2); font-size:9px; letter-spacing:.04em; text-transform:none; transform:translateY(-140%) } .demo-phone__push .square{ background:var(--hue); width:6px; height:6px } .is-inview .demo-phone__push{ animation:push .6s var(--ease-inout) forwards .5s }
@keyframes push{ to{ transform:none } }
.demo-kanban{ display:flex; gap:6px } .demo-kanban__col{ width:32px; display:flex; flex-direction:column; gap:4px; padding:4px; border:1px solid var(--line) } .demo-kanban__card{ height:10px; background:var(--line-strong) } .demo-kanban__card--move{ background:var(--hue) } .is-inview .demo-kanban__card--move{ animation:kmove 1.2s var(--ease-flip) forwards .4s }
@keyframes kmove{ to{ transform:translateX(38px) } }
.demo-term{ display:flex; flex-direction:column; gap:4px; text-transform:none; letter-spacing:.02em; font-size:11px; color:var(--fg-2) } .demo-term span{ opacity:0 } .demo-term .is-ok{ color:#007A4E } [data-theme="dark"] .demo-term .is-ok{ color:var(--ok) } .is-inview .demo-term span{ animation:appear .2s steps(2) forwards } .is-inview .demo-term span:nth-child(1){ animation-delay:.3s } .is-inview .demo-term span:nth-child(2){ animation-delay:.9s } .is-inview .demo-term span:nth-child(3){ animation-delay:1.5s }
@keyframes appear{ to{ opacity:1 } }
.demo-graph{ display:flex; align-items:center; gap:8px; text-transform:none; letter-spacing:.02em; font-size:11px } .demo-graph__line{ position:relative; width:64px; height:1px; background:var(--line-strong) } .demo-graph__pulse{ position:absolute; top:-3px; left:0; width:7px; height:7px; background:var(--hue) } .is-inview .demo-graph__pulse{ animation:pulse 1.6s var(--ease-inout) infinite alternate .3s }
@keyframes pulse{ to{ left:57px } }
.demo-chart{ display:flex; align-items:flex-end; gap:8px } .demo-chart__bars{ display:flex; align-items:flex-end; gap:3px; height:48px } .demo-chart__bars i{ width:8px; height:calc(var(--h) * 100%); background:var(--line-strong); transform:scaleY(0); transform-origin:bottom } .demo-chart__bars i:last-child{ background:var(--hue) } .is-inview .demo-chart__bars i{ animation:grow .5s var(--ease-out) forwards } .is-inview .demo-chart__bars i:nth-child(2){ animation-delay:.05s } .is-inview .demo-chart__bars i:nth-child(3){ animation-delay:.1s } .is-inview .demo-chart__bars i:nth-child(4){ animation-delay:.15s } .is-inview .demo-chart__bars i:nth-child(5){ animation-delay:.2s } .is-inview .demo-chart__bars i:nth-child(6){ animation-delay:.25s } .demo-chart__chip{ font-size:10px; padding:3px 6px; border:1px solid var(--line-strong) }
@keyframes grow{ to{ transform:scaleY(1) } }
.demo-swatches{ display:flex; gap:4px } .demo-swatches i{ width:18px; height:18px; display:block } .is-inview .demo-swatches i:first-child{ animation:swap 1.2s var(--ease-flip) forwards .4s } .is-inview .demo-swatches i:last-child{ animation:swapback 1.2s var(--ease-flip) forwards .4s }
@keyframes swap{ to{ transform:translateX(88px) } } @keyframes swapback{ to{ transform:translateX(-88px) } }
.demo-pipe{ display:flex; gap:6px; font-size:10px; text-transform:none } .demo-pipe span{ padding:4px 6px; border:1px solid var(--line-strong); opacity:.4 } .is-inview .demo-pipe span{ animation:lit .3s steps(2) forwards } .is-inview .demo-pipe span:nth-child(1){ animation-delay:.3s } .is-inview .demo-pipe span:nth-child(2){ animation-delay:.7s } .is-inview .demo-pipe span:nth-child(3){ animation-delay:1.1s } .is-inview .demo-pipe span:nth-child(4){ animation-delay:1.5s }
@keyframes lit{ to{ opacity:1; border-color:var(--hue) } }
.demo-check{ display:flex; flex-direction:column; gap:4px; font-size:11px } .demo-check span{ display:flex; align-items:center; gap:6px } .demo-check i{ width:10px; height:10px; border:1px solid var(--line-strong) } .is-inview .demo-check i{ animation:tick .2s steps(1) forwards } .is-inview .demo-check span:nth-child(1) i{ animation-delay:.4s } .is-inview .demo-check span:nth-child(2) i{ animation-delay:.8s } .is-inview .demo-check span:nth-child(3) i{ animation-delay:1.2s }
@keyframes tick{ to{ background:var(--fg); border-color:var(--fg) } }
.demo-kpi{ display:flex; gap:12px; font-size:9px; text-transform:none; color:var(--fg-muted) } .demo-kpi span{ display:flex; flex-direction:column; gap:2px } .demo-kpi b{ font:700 16px/1 var(--font-display); letter-spacing:-.02em; color:var(--fg) }
.demo-pill .dot{ background:var(--block-mint) }
.posts{ border-top:1px solid var(--line) }
@media (prefers-reduced-motion:reduce){ .demo-frame__fill{ height:100% } .demo-toast{ transform:none; opacity:1 } .demo-phone__push{ transform:none } .demo-chart__bars i{ transform:none } .demo-term span,.demo-pipe span{ opacity:1 } }