/* ============================================================
   directions.css — 技术方向
   trae「自定义智能体构建专属团队」式横向轮播：
   中心卡片放大、两侧露出（超边距）、按钮 + 鼠标拖拽
   ============================================================ */

.dir-block { position: relative; }
/* 箭头浮于吸附层右侧垂直居中：滚动驱动全程可点 */
.dir-sticky .dir-ctl {
  position: absolute;
  right: 30px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  display: flex;
  gap: 10px;
  padding: 6px;
  border-radius: 12px;
  background: rgba(10, 14, 20, .55);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line-dark-2);
}

/* B-02 滚动驱动：下滑 = 轮播从左滑到右（上滑倒放）。
   dir-scroll-zone 提供额外滚动行程（每张卡片 45vh，缩短行程避免过多空滚动），
   dir-sticky 吸附期间由 #main-scroll 的滚动进度连续驱动 .dir-strip 位移（见 directions.js）。
   sticky 高度 fit 卡片内容：卡片下方不留大片黑空（空隙修复 r9）。 */
.dir-scroll-zone {
  position: relative;
  height: calc(100vh + var(--dir-segs, 3) * 45vh);
}
.dir-sticky {
  position: sticky;
  top: 0;
  height: auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 0;
}
.dir-viewport {
  position: relative;
  /* 全幅出血：突破 section 内边距，卡片可越出屏幕左右边缘（超边距），
     由 .main-scroll 的 overflow-x:hidden 在屏幕边缘精确裁切 */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  cursor: grab;
  padding: 14px 0;
}
.dir-viewport.dragging { cursor: grabbing; }
.dir-strip {
  display: flex;
  gap: 24px;
  padding: 10px 8vw 16px;
  will-change: transform;
}

.dir-card {
  flex: none;
  width: min(520px, 42vw);
  min-width: 380px;
  border-radius: 18px;
  background:
    linear-gradient(165deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02) 60%),
    rgba(18, 25, 36, .9);
  border: 1px solid var(--line-dark-2);
  padding: 22px 22px 18px;
  position: relative;
  overflow: hidden;
  transition: transform .5s cubic-bezier(.25, .9, .3, 1), opacity .5s, box-shadow .5s;
  transform-origin: center;
  user-select: none;
}
.dir-card::before {
  content: "";
  position: absolute;
  top: -60px; right: -60px;
  width: 190px; height: 190px;
  border-radius: 50%;
  background: radial-gradient(circle, hsla(var(--dh, 210), 90%, 60%, .3), transparent 70%);
  pointer-events: none;
}
.dir-card.is-active {
  transform: scale(1.05);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .16);
  z-index: 2;
}
.dir-card.is-side { opacity: .5; transform: scale(.9); }
.dir-card.is-far { opacity: .15; transform: scale(.74); }

.dir-card-head { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.dir-card-icon {
  width: 52px; height: 52px;
  flex: none;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--line-dark-2);
}
.dir-card-name { font-size: 19px; font-weight: 800; letter-spacing: .04em; }
.dir-card-desc { font-size: 12.5px; color: var(--text-2); margin-top: 2px; }
.dir-card-desc + .dir-card-desc { margin-top: 8px; margin-bottom: 10px; }
.dir-card-note { font-size: 11.5px; color: var(--warn); margin-top: 6px; }

.dir-groups { margin-top: 12px; display: grid; gap: 10px; }
.dir-group { padding: 10px 11px; border-radius: 12px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .07); }
.dir-group-title { font-size: 12px; font-weight: 700; color: var(--text-1); margin-bottom: 8px; letter-spacing: .05em; }

.member-mini {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 4px 0;
}
.member-mini-avatar {
  width: 34px; height: 34px;
  flex: none;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13.5px;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
  background: hsla(var(--mc, 210), 70%, 55%, .9);
}
.member-mini-name { font-size: 13px; font-weight: 600; }
.member-mini-role { font-size: 11px; color: var(--text-2); }
.member-mini-tags { margin-left: auto; display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; }
.member-mini-tag {
  font-size: 10px;
  color: #9ecbff;
  border: 1px solid rgba(77, 159, 255, .35);
  background: rgba(77, 159, 255, .08);
  padding: 1px 7px;
  border-radius: 99px;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .dir-card { width: 82vw; min-width: 280px; }
  .dir-strip { padding: 10px 10vw 16px; }
}