/* ==========================================================================
   Works（業種別デモ）
   ヒーローは arcana_page_hero()、CTA は base.css の .cta-section を使用
   ========================================================================== */

/* ---------- 業種フィルター（works.js が .is-active / aria-pressed を切替） ---------- */
.works-filter {
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
  margin: 0 calc(-1 * clamp(20px,5vw,40px));
  padding: 4px clamp(20px,5vw,40px);
}
.works-filter::-webkit-scrollbar { display: none; }
.works-filter__btn {
  flex: none; white-space: nowrap; height: 44px; padding: 0 20px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 14px; letter-spacing: 0.06em;
  background: transparent; color: #1A1A1F; border: 1px solid rgba(26,26,31,0.18);
  transition: background 0.4s, color 0.4s, border-color 0.4s;
}
.works-filter__btn.is-active { background: #0B1026; color: #F7F5F0; border-color: #0B1026; }
.works-filter__btn:focus-visible { outline-offset: 2px; }
@media (hover: hover) {
  .works-filter__btn:not(.is-active):hover { border-color: var(--gold-deep); }
}
.works-filter__btn:not(.is-active):focus-visible { border-color: var(--gold-deep); }
/* スマホ・タブレット: 横スクロール＋右端フェード（末尾までスクロールしたらフェードを外す） */
@media (max-width: 1099.98px) {
  .works-filter {
    -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent);
    mask-image: linear-gradient(90deg, #000 85%, transparent);
  }
  .works-filter.is-end { -webkit-mask-image: none; mask-image: none; }
}

/* ---------- カード ---------- */
.works-card { display: flex; flex-direction: column; gap: 22px; }
.works-card[hidden] { display: none !important; }
.works-card.is-soon .works-card__visual { opacity: 0.55; }

/* モック画面のゆっくりスクロール（PC: ホバー / キーボード: フォーカス / タッチ: works.js が .is-play を付与して1回再生） */
@media (prefers-reduced-motion: no-preference) {
  .works-card.is-play .works-scr,
  .works-card:focus-within .works-scr { transform: translateY(-66.67%); }
  .works-card.is-play .works-pscr,
  .works-card:focus-within .works-pscr { transform: translateY(-61.5%); }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .works-card:hover .works-scr { transform: translateY(-66.67%); }
  .works-card:hover .works-pscr { transform: translateY(-61.5%); }
}

/* 業種チップ（K-4: 12px / padding 5px 12px） */
.works-chip {
  flex: none; white-space: nowrap; font-size: 12px; letter-spacing: 0.08em; padding: 5px 12px;
  border: 1px solid rgba(126,99,52,0.4); border-radius: 999px; color: var(--gold-deep);
}

/* 公開済みデモへのボタン */
.works-btn {
  white-space: nowrap; display: inline-flex; align-items: center; gap: 12px; height: 48px; padding: 0 24px; border-radius: 8px;
  border: 1px solid var(--gold-deep); color: var(--gold-deep); font-size: 14px; font-weight: 500; letter-spacing: 0.08em;
  transition: background 0.4s, color 0.4s;
}
@media (hover: hover) {
  .works-btn:hover { background: #0B1026; color: #E8D5A8; }
}
.works-btn:focus-visible { background: #0B1026; color: #E8D5A8; }

/* 未公開デモ: リンクではない表示 */
.works-soon { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 12px; min-height: 48px; }
.works-soon__en { font-family: var(--font-label); font-size: 10px; letter-spacing: 0.26em; color: var(--text-muted); }
.works-soon__ja {
  font-size: 13px; letter-spacing: 0.06em; color: var(--text-muted); padding: 4px 12px;
  border: 1px solid rgba(26,26,31,0.18); border-radius: 999px; background: rgba(26,26,31,0.03);
}