/* =========================================================
   History（縦年表）- 完全SVG版
   ========================================================= */

/* カラートークン */
.history {
  --history-active: #c40000;
  --history-glow: rgba(196, 0, 0, .25);
  --history-default: #999;
}

/* flow 本体 */
.history .flow{
  --flow-pad: 16px;
  --tl-x: 8px;
  --line-w: 2px;
  --dot-size: 14px;
  --row-top: 22px;

  position: relative;
  padding-left: var(--flow-pad);
}

/* SVG縦ラインコンテナ */
.history-line-svg {
  position: absolute;
  top: 0;
  left: var(--tl-x);
  width: 100px;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  transform: translateX(-50%);
}

/* グレーの基本ライン */
.history-line-base {
  stroke: var(--history-default);
  stroke-width: 2;
  fill: none;
}

/* 赤の進行ライン */
.history-line-progress {
  stroke: var(--history-active);
  stroke-width: 2;
  fill: none;
}

/* SVGドット共通スタイル */
.history-dot {
  transition: fill 0.35s ease, filter 0.35s ease;
}

/* デフォルトドット */
.history-dot-default {
  fill: var(--history-default);
  filter: drop-shadow(0 0 4px rgba(153, 153, 153, 0.15));
}

/* アクティブドット */
.history-dot-active {
  fill: var(--history-active);
  filter: drop-shadow(0 0 4px rgba(196, 0, 0, 0.28));
}

/* 中心ドットのパルスアニメーション */
.history-dot-center {
  fill: var(--history-active);
  animation: dotPulse 1.5s ease-in-out infinite;
}

@keyframes dotPulse {
  0%, 100% {
    filter: drop-shadow(0 0 4px rgba(196, 0, 0, 0.28));
  }
  50% {
    filter: drop-shadow(0 0 16px rgba(196, 0, 0, 0.6));
  }
}

.history .flow > li{
  position: relative;
}

.history .flow > li dl::before { 
  content: none; 
}

/* dt/dd */
.history .flow > li > dl > dt,
.history .flow > li > dl > dd{
  color: var(--history-default);
  transition: color .35s ease;
}

.history .flow > li.is-center > dl > dt,
.history .flow > li.is-center > dl > dd,
.history .flow > li.is-past  > dl > dt,
.history .flow > li.is-past  > dl > dd{
  color: #fff;
}

.history .flow > li.is-center > dl > dt,
.history .flow > li.is-center > dl > dd{
  transition-duration: .20s;
}

.history .flow > li.is-past > dl > dt,
.history .flow > li.is-past > dl > dd{
  transition-duration: .45s;
}

/* 省モーション配慮 */
@media (prefers-reduced-motion: reduce){
  .history-dot,
  .history .flow > li > dl > dt,
  .history .flow > li > dl > dd{ 
    transition: none; 
  }
  
  .history-dot-center{
    animation: none;
  }
}

/* スクロールバー非表示 */
.history {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.history::-webkit-scrollbar {
  display: none;
}

/* スクロールインジケーター */
.history::after {
  content: "";
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 24px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23fff" stroke-width="2"><path d="M12 5v14M19 12l-7 7-7-7"/></svg>');
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.6;
  pointer-events: none;
  animation: scrollHint 2s ease-in-out infinite;
}

.history.scrolled-bottom::after {
  opacity: 0;
}

@keyframes scrollHint {
  0%, 100% {
    transform: translateX(-50%) translateY(0);
    opacity: 0.6;
  }
  50% {
    transform: translateX(-50%) translateY(5px);
    opacity: 0.3;
  }
}