@charset "utf-8";

/* =========================================================
   Voyage Bar — スクロール進捗で船が進む固定バー
   使い方は README.md を参照。
   色・サイズはすべて下のカスタムプロパティで上書きできます。
   ========================================================= */

.voyage-bar {
  /* ---- カスタマイズ用トークン ---- */
  --vb-height: 44px;                          /* バーの高さ */
  --vb-z: 50;                                 /* 重なり順 */
  --vb-max-width: min(1080px, 92vw);          /* 内容の最大幅（サイトのコンテンツ幅に合わせる） */
  --vb-bg: rgba(242, 239, 227, .82);          /* バー背景（半透明推奨） */
  --vb-border: rgba(16, 51, 59, .16);         /* 下辺のヘアライン */
  --vb-line: #E3A63B;                         /* 航路（点線）の色 */
  --vb-ship: #10333B;                         /* 船体の色 */
  --vb-sail: #E3A63B;                         /* 帆（ワンポイント）の色 */
  --vb-label: rgba(16, 51, 59, .72);          /* 港名ラベルの色 */
  --vb-label-arrived: #10333B;                /* 到着時の右ラベル色 */

  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--vb-z);
  height: var(--vb-height);
  background: var(--vb-bg);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--vb-border);
}

.vb-inner {
  display: flex;
  align-items: center;
  gap: .7rem;
  width: var(--vb-max-width);
  height: 100%;
  margin-inline: auto;
}

.vb-port {
  flex: 0 0 auto;
  color: var(--vb-label);
  font-size: 9px;
  letter-spacing: .1em;
  line-height: 1;
  white-space: nowrap;
}

@media (min-width: 721px) {
  .vb-port {
    font-size: .7rem;
    letter-spacing: .16em;
  }
}

.vb-track {
  position: relative;
  flex: 1 1 auto;
  height: 100%;
}

.vb-line {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 0;
  border-top: 2px dotted var(--vb-line);
  transform: translateY(-50%);
}

.vb-ship {
  position: absolute;
  top: 50%;
  left: 0;
  width: 24px;
  margin-left: -12px;
  transform: translateY(-50%);
}

.vb-ship svg { display: block; width: 24px; height: auto; }
.vb-ship .vb-ship-hull { fill: var(--vb-ship); }
.vb-ship .vb-ship-sail { fill: var(--vb-sail); }

/* 到着（進捗ほぼ100%）で右側ラベルを強調 */
.voyage-bar.is-arrived .vb-port-end {
  color: var(--vb-label-arrived);
  font-weight: 700;
}

/* モーションは reduced-motion 尊重（位置の更新自体はJSが常時行う） */
@media (prefers-reduced-motion: no-preference) {
  .vb-ship { transition: left .12s linear; }
  .vb-port { transition: color .35s ease; }
}

/* 印刷時は不要 */
@media print {
  .voyage-bar { display: none; }
}