/* Stack + API. Two panels: the commerce loop closing on itself, and the
   developer surface typing itself out. One-shot, replays on re-entry. */

.stk{display:grid;gap:1rem;margin-top:clamp(1.5rem,3vw,2.25rem)}
.stk-card{background:var(--bg-surface);border:1px solid var(--border-1);border-radius:var(--r-2xl);
  padding:clamp(1.1rem,2.4vw,1.6rem);display:flex;flex-direction:column;gap:1rem;box-shadow:var(--sh-xs)}
.stk-card > header .k{font-family:var(--font-mono);font-size:var(--fs-2xs);letter-spacing:.14em;
  text-transform:uppercase;color:var(--fg-4)}
.stk-card > header h3{font-size:clamp(1.125rem,.9rem + .7vw,1.5rem);font-weight:var(--fw-extra);
  letter-spacing:var(--track-head);color:var(--fg-1);margin-top:.3rem;line-height:1.15}
.stk-card > header p{font-size:var(--fs-sm);color:var(--fg-3);margin-top:.4rem;line-height:1.5;max-width:46ch}
.stk-foot{margin-top:auto;padding-top:.75rem;border-top:1px solid var(--border-1);
  font-family:var(--font-mono);font-size:var(--fs-2xs);letter-spacing:.05em;color:var(--fg-4);
  display:flex;flex-wrap:wrap;gap:.3rem 1rem}
.stk-foot b{color:var(--fg-2);font-weight:var(--fw-medium)}

/* ---------- A. the commerce loop ---------- */
.loop{position:relative;padding-left:46px}
.lnode{position:relative;display:flex;align-items:center;gap:.65rem;background:var(--bg-surface);
  border:1.5px solid var(--border-2);border-radius:var(--r-lg);padding:.6rem .75rem;
  opacity:0;transform:translateY(10px)}
.stk.play .lnode{animation:stkIn .5s var(--ease-snap) forwards;animation-delay:calc(var(--d) * 1ms)}
@keyframes stkIn{to{opacity:1;transform:none}}
.lnode .ic{width:30px;height:30px;border-radius:9px;flex:none;display:grid;place-items:center;
  background:var(--bg-subtle);color:var(--c,var(--fg-2))}
.lnode .ic svg{width:17px;height:17px;fill:currentColor}
.lnode .ic .sp{font-size:15px;line-height:1;color:var(--coral)}
.lnode .tx{min-width:0;flex:1}
.lnode .tx b{display:block;font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--fg-1);line-height:1.25}
.lnode .tx small{display:block;font-family:var(--font-mono);font-size:var(--fs-2xs);color:var(--fg-3);
  margin-top:.15rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lnode.lit{border-color:var(--c)}

/* the forward wire between nodes */
.lwire{height:22px;margin-left:14px;width:2px;background:var(--border-2);position:relative;
  transform-origin:top;transform:scaleY(0)}
.stk.play .lwire{animation:stkWire .35s var(--ease-out) forwards;animation-delay:calc(var(--d) * 1ms)}
@keyframes stkWire{to{transform:scaleY(1)}}
/* the packet riding it */
.lwire::after{content:"";position:absolute;left:50%;top:0;width:7px;height:7px;border-radius:50%;
  background:var(--sky);transform:translate(-50%,-50%) scale(0);box-shadow:0 0 0 3px var(--sky-soft)}
.stk.play .lwire::after{animation:stkPkt .7s var(--ease-inout) forwards;animation-delay:calc((var(--d) + 260) * 1ms)}
@keyframes stkPkt{0%{transform:translate(-50%,-50%) scale(1);top:0}
  85%{transform:translate(-50%,-50%) scale(1);top:100%}100%{transform:translate(-50%,-50%) scale(0);top:100%}}

/* the product card that appears in the thread node */
.lprod{display:flex;align-items:center;gap:.55rem;background:var(--grass-soft);border-radius:var(--r-md);
  padding:.45rem .55rem;margin-top:.5rem;opacity:0;transform:translateY(8px) scale(.97)}
.stk.play .lprod{animation:stkIn .45s var(--ease-snap) forwards;animation-delay:calc(var(--d) * 1ms)}
.lprod img{width:34px;height:34px;border-radius:6px;object-fit:cover;flex:none;display:block}
.lprod .pt{min-width:0;flex:1;line-height:1.25}
.lprod .pt b{display:block;font-size:var(--fs-xs);font-weight:var(--fw-bold);color:#0B3D24}
.lprod .pt small{font-family:var(--font-mono);font-size:0.6875rem;color:var(--grass-deep)}
.lprod .pay{font-size:0.6875rem;font-family:var(--font-mono);font-weight:var(--fw-bold);
  color:#fff;background:var(--grass-deep);border-radius:var(--r-pill);padding:.2rem .45rem;white-space:nowrap}

/* the return leg: order.paid travelling back up to the store */
.lback{position:absolute;left:0;top:22px;bottom:22px;width:32px;
  border:2px solid var(--coral);border-right:0;border-radius:12px 0 0 12px;opacity:0}
.stk.play .lback{animation:stkBack .5s var(--ease-out) 1900ms forwards}
@keyframes stkBack{to{opacity:1}}
.lback i{position:absolute;left:-5px;bottom:0;width:8px;height:8px;border-radius:50%;
  background:var(--coral);box-shadow:0 0 0 3px var(--coral-soft);opacity:0}
.stk.play .lback i{animation:stkRet 1.4s var(--ease-inout) 2200ms forwards}
@keyframes stkRet{0%{opacity:1;bottom:0}88%{opacity:1;bottom:100%}100%{opacity:0;bottom:100%}}
.lback-lbl{position:absolute;left:-2px;top:50%;transform:translateY(-50%) rotate(180deg);
  writing-mode:vertical-rl;font-family:var(--font-mono);font-size:0.6875rem;letter-spacing:.08em;
  color:var(--coral-deep);background:var(--bg-surface);padding:.3rem 0;font-weight:var(--fw-bold);opacity:0}
.stk.play .lback-lbl{animation:stkBack .5s var(--ease-out) 2400ms forwards}

/* ---------- B. the developer surface ---------- */
.stk-api .req{display:flex;align-items:center;gap:.5rem;font-family:var(--font-mono);font-size:var(--fs-2xs)}
.stk-api .req .verb{background:var(--sky-soft);color:var(--sky-deep);font-weight:var(--fw-bold);
  border-radius:var(--r-sm);padding:.2rem .4rem;letter-spacing:.04em}
.stk-api .req .url{color:var(--fg-2)}
.code{background:var(--ink);border-radius:var(--r-lg);padding:.8rem .9rem;
  overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;
  font-family:var(--font-mono);font-size:.625rem;line-height:1.75;color:#C8D2DA;
  scrollbar-width:thin;scrollbar-color:var(--ink-500) transparent}
.code::-webkit-scrollbar{height:5px}
.code::-webkit-scrollbar-thumb{background:var(--ink-500);border-radius:99px}
.code .ln{width:max-content;min-width:100%}
.code .ln{display:block;white-space:pre;opacity:0;transform:translateY(4px)}
.stk.play .code .ln{animation:stkIn .3s var(--ease-out) forwards;animation-delay:calc(var(--d) * 1ms)}
.code .c{color:#8593A0}   /* was #6C7A85: 4.31:1 on the ink block */.code .s{color:#8DE0A8}.code .k{color:#7FC7F5}.code .p{color:#C9A6F5}
.code .car{display:inline-block;width:7px;height:12px;background:var(--coral);vertical-align:-2px;margin-left:1px}
.stk.play .code .car{animation:stkCar 1s steps(1) 1400ms infinite}
@keyframes stkCar{0%,50%{opacity:1}51%,100%{opacity:0}}

.hooks{display:flex;flex-direction:column;gap:.35rem}
.hooks .hh{font-family:var(--font-mono);font-size:0.6875rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--fg-4);margin-bottom:.1rem}
.hook{display:flex;align-items:center;gap:.5rem;background:var(--bg-subtle);border-radius:var(--r-md);
  padding:.42rem .6rem;opacity:0;transform:translateX(-8px)}
.stk.play .hook{animation:stkHook .45s var(--ease-out) forwards;animation-delay:calc(var(--d) * 1ms)}
@keyframes stkHook{to{opacity:1;transform:none}}
.hook .ev{font-family:var(--font-mono);font-size:var(--fs-2xs);font-weight:var(--fw-bold);color:var(--fg-1)}
.hook .to{font-family:var(--font-mono);font-size:0.6875rem;color:var(--fg-4);flex:1;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hook .ok{font-family:var(--font-mono);font-size:0.6875rem;font-weight:var(--fw-bold);color:var(--grass-deep);
  background:var(--grass-soft);border-radius:var(--r-pill);padding:.14rem .4rem;white-space:nowrap;
  opacity:0;transform:scale(.7)}
.stk.play .hook .ok{animation:stkOk .4s var(--ease-snap) forwards;animation-delay:calc((var(--d) + 420) * 1ms)}
@keyframes stkOk{to{opacity:1;transform:none}}

/* ---------- the apps strip ---------- */
.stk-apps{margin-top:1rem;background:var(--bg-surface);border:1px solid var(--border-1);
  border-radius:var(--r-2xl);padding:clamp(1rem,2vw,1.35rem);display:flex;flex-direction:column;gap:.9rem}
.stk-apps .lbl{font-family:var(--font-mono);font-size:var(--fs-2xs);letter-spacing:.12em;
  text-transform:uppercase;color:var(--fg-4)}
.applist{display:flex;flex-wrap:wrap;gap:.5rem}
/* stk-app, not app: .app is the design system's full-height shell grid */
.stk-app{display:inline-flex;align-items:center;gap:.45rem;min-height:0;
  border:1.5px solid var(--border-2);border-radius:var(--r-pill);padding:.42rem .8rem;
  font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--fg-1);background:transparent;
  transition:border-color var(--t-fast),transform var(--t-fast) var(--ease-out)}
.stk-app:hover{border-color:var(--c,var(--fg-1));transform:translateY(-2px)}
.stk-app svg{width:17px;height:17px;fill:currentColor;color:var(--c,var(--fg-2));display:block}
.stk-app.more{color:var(--fg-3);font-weight:var(--fw-medium);border-style:dashed}

@media (min-width:420px){ .code{font-size:.6875rem} }
@media (min-width:940px){
  .stk{grid-template-columns:1fr 1fr;gap:1.25rem}
  .stk-api .code{font-size:.75rem}
}
@media (prefers-reduced-motion:reduce){
  .lnode,.lprod,.code .ln,.hook,.hook .ok,.lback,.lback-lbl{opacity:1;transform:none;animation:none !important}
  .lwire{transform:none}
  .lwire::after,.lback i,.code .car{display:none}
}