/* ============================================================
   agency-axis.css — 加盟頁主軸示意：多家產險公司 → 你 → 你的客戶
   版面：容器寬 ≥620px 時橫排三欄（公司 → 你 → 客戶）；較窄時直排，箭頭朝下。
   動畫：只有 agency-axis.js 加上 .ax-ready 後才有隱藏態；.ax-play 時播放一次；只動 transform／opacity；
         prefers-reduced-motion 時直接顯示完成畫面。
   ============================================================ */

.ax { container: ax / inline-size; margin: 18px 0 6px; padding: 16px 12px 14px; border-radius: 12px;
  background: linear-gradient(180deg, #f3f8fe, #fff); border: 1px solid #d6e6f8; }
.ax-cap { margin: 0 0 12px; text-align: center; font-size: 16px; font-weight: 800; line-height: 1.6; color: #072a66; }
.ax-cap .ax-key { position: relative; display: inline-block; color: #0B3D91; }
.ax-cap .ax-key::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 4px; border-radius: 2px;
  background: #d9a441; opacity: .85; transform-origin: 0 50%; }

.ax-flow { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ax-col { display: flex; flex-direction: column; align-items: center; width: 100%; }
.ax .ax-h { margin: 0 0 6px; font-size: 14px; font-weight: 800; line-height: 1.4; color: #4a566b; text-align: center; }

/* 產險公司 */
.ax-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; width: 100%; max-width: 360px; }
.ax-chip { margin: 0; padding: 3px 9px; border-radius: 999px; background: #fff; border: 1px solid #c9d6ea; box-shadow: 0 1px 3px rgba(11,61,145,.06);
  font-size: 14px; font-weight: 700; line-height: 1.45; color: #1a2333; text-align: center; white-space: nowrap; }

/* 箭頭（直排：朝下，標籤在右） */
.ax-arrow { position: relative; display: flex; flex-direction: row; align-items: center; gap: 8px; padding: 6px 0 6px; }
.ax-line { position: relative; display: block; width: 2px; height: 24px; background: #7d9cc8; transform-origin: 50% 0; }
.ax-line::after { content: ""; position: absolute; left: 50%; bottom: -2px; width: 9px; height: 9px; margin-left: -5px;
  border-right: 2px solid #7d9cc8; border-bottom: 2px solid #7d9cc8; transform: rotate(45deg); }
.ax-al { margin: 0; padding: 2px 10px; border-radius: 999px; background: #e6f3fd; font-size: 14px; font-weight: 700; line-height: 1.5; color: #0B3D91; }

/* 你 */
.ax-me { position: relative; display: flex; align-items: center; justify-content: center; width: 62px; height: 62px; margin: 6px 0 6px;
  border-radius: 50%; background: #d9a441; color: #24180a; font-size: 26px; font-weight: 900; line-height: 1;
  box-shadow: 0 6px 18px rgba(217,164,65,.45); }
.ax-me::before { content: ""; position: absolute; inset: -7px; border-radius: 50%; border: 2px solid rgba(217,164,65,.55); }
.ax-you .ax-h { color: #072a66; font-size: 15px; }

/* 客戶 */
.ax-people { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }
.ax-person { display: flex; flex-direction: column; align-items: center; gap: 3px; margin: 0; }
.ax-pic { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: #0B3D91; color: #fff; }
.ax-pic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ax-pl { font-size: 14px; font-weight: 700; line-height: 1.4; color: #1a2333; }

/* 寬容器：橫排三欄 */
@container ax (min-width: 620px) {
  .ax-flow { flex-direction: row; align-items: center; justify-content: center; gap: 6px; }
  .ax-col { width: auto; }
  .ax-co { flex: 0 1 300px; }
  .ax-cap { font-size: 17px; margin-bottom: 14px; }
  .ax-me { width: 72px; height: 72px; font-size: 28px; }
  .ax-cust { flex: 0 1 auto; }
  .ax-people { flex-direction: column; align-items: flex-start; gap: 8px; }
  .ax-person { flex-direction: row; min-width: 0; gap: 8px; }
  .ax-arrow { flex-direction: column; gap: 8px; padding: 0 2px; }
  .ax-line { width: 54px; height: 2px; transform-origin: 0 50%; }
  .ax-line::after { left: auto; right: -2px; bottom: auto; top: 50%; margin: -5px 0 0; transform: rotate(-45deg); }
  .ax-al { white-space: nowrap; }
}

/* ── 動畫（JS 加 .ax-ready 才生效；.ax-play 時播放一次） ── */
.ax-ready .ax-cap, .ax-ready .ax-chip, .ax-ready .ax-al, .ax-ready .ax-me, .ax-ready .ax-h, .ax-ready .ax-person { opacity: 0; }
.ax-ready .ax-line { transform: scaleY(0); }
.ax-ready .ax-cap .ax-key::after { transform: scaleX(0); }
.ax-ready.ax-play .ax-cap { animation: ax-fade .45s ease-out both; }
.ax-ready.ax-play .ax-co .ax-h { animation: ax-fade .35s ease-out .2s both; }
.ax-ready.ax-play .ax-chip { animation: ax-rise .35s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(.25s + var(--ax-i, 0) * 55ms); }
.ax-ready.ax-play .ax-a1 .ax-line { animation: ax-grow-y .35s ease-out .95s both; }
.ax-ready.ax-play .ax-a1 .ax-al { animation: ax-fade .3s ease-out 1.15s both; }
.ax-ready.ax-play .ax-me { animation: ax-pop .5s cubic-bezier(.2,1.5,.4,1) 1.3s both; }
.ax-ready.ax-play .ax-you .ax-h { animation: ax-fade .35s ease-out 1.55s both; }
.ax-ready.ax-play .ax-a2 .ax-line { animation: ax-grow-y .35s ease-out 1.7s both; }
.ax-ready.ax-play .ax-a2 .ax-al { animation: ax-fade .3s ease-out 1.9s both; }
.ax-ready.ax-play .ax-cust .ax-h { animation: ax-fade .3s ease-out 2s both; }
.ax-ready.ax-play .ax-person { animation: ax-rise .35s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(2.05s + var(--ax-i, 0) * 120ms); }
.ax-ready.ax-play .ax-cap .ax-key::after { animation: ax-grow-x .5s ease-out 2.45s both; }
@container ax (min-width: 620px) {
  .ax-ready .ax-line { transform: scaleX(0); }
  .ax-ready.ax-play .ax-a1 .ax-line, .ax-ready.ax-play .ax-a2 .ax-line { animation-name: ax-grow-x; }
}
@keyframes ax-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ax-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes ax-pop { from { opacity: 0; transform: scale(.5); } to { opacity: 1; transform: none; } }
@keyframes ax-grow-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes ax-grow-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (prefers-reduced-motion: reduce) {
  .ax-ready .ax-cap, .ax-ready .ax-chip, .ax-ready .ax-al, .ax-ready .ax-me, .ax-ready .ax-h, .ax-ready .ax-person { opacity: 1; animation: none !important; }
  .ax-ready .ax-line, .ax-ready .ax-cap .ax-key::after { transform: none !important; animation: none !important; }
}