/* Scrolling strip of tool logos. Shared by index.html and portfolio/index.html.
   Reads the host page's tokens (--surface, --surface2, --bg, --border, --muted, --dim). */
.tstack-section{
  padding:56px 0;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  background:var(--surface);
  position:relative;z-index:2;overflow:hidden;
}
.tstack-section::before,.tstack-section::after{
  content:'';position:absolute;top:0;bottom:0;width:140px;z-index:3;pointer-events:none;
}
.tstack-section::before{left:0;background:linear-gradient(90deg,var(--surface),transparent)}
.tstack-section::after{right:0;background:linear-gradient(270deg,var(--surface),transparent)}
html.light .tstack-section{background:var(--surface2)}
html.light .tstack-section::before{background:linear-gradient(90deg,var(--surface2),transparent)}
html.light .tstack-section::after{background:linear-gradient(270deg,var(--surface2),transparent)}
.tstack-group-label-fixed{
  font-size:11px;letter-spacing:0.2em;text-transform:none;color:var(--dim-text,var(--dim));
  margin-bottom:28px;font-family:'Geist Mono',ui-monospace,monospace;padding:0 48px;
}
.tstack-marquee-row{display:flex;gap:14px;white-space:nowrap;will-change:transform}
.tstack-card{
  display:inline-flex;flex-direction:column;align-items:center;gap:14px;
  padding:24px 28px;
  background:var(--bg);border:1px solid var(--border);border-radius:8px;
  min-width:130px;flex-shrink:0;cursor:default;
  transition:border-color 0.25s,box-shadow 0.25s;vertical-align:top;
}
.tstack-card:hover{
  border-color:rgba(255,106,43,0.4);
  box-shadow:0 12px 32px rgba(0,0,0,0.4);
}
/* white backing in both themes, so black marks (Vercel, Next.js, Notion) stay visible on dark */
.tstack-card img{width:56px;height:56px;object-fit:contain;border-radius:8px;background:#fff;padding:6px;box-shadow:0 1px 4px rgba(0,0,0,0.08)}
.tstack-card span{font-size:12px;color:var(--muted);text-align:center;white-space:nowrap;max-width:110px;overflow:hidden;text-overflow:ellipsis}
@media (max-width:768px){
  .tstack-section{padding:44px 0}
  .tstack-group-label-fixed{padding:0 20px;margin-bottom:18px}
  .tstack-card{min-width:100px;padding:18px 16px}
  .tstack-card img{width:44px;height:44px}
  .tstack-card span{font-size:11px}
}
/* no auto-scroll with reduced motion: the row can be scrolled by hand instead */
@media (prefers-reduced-motion:reduce){
  .tstack-section{overflow-x:auto}
  .tstack-section::before,.tstack-section::after{display:none}
}