/* ===============================
   Timeline Orbs BG (parallax layer)
================================ */

.timeline__bg-orbs {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;

  background-image: url("assets/timeline_orb_bg.webp");
  background-repeat: no-repeat;
  background-size: 1136px auto;
  background-position: 42% 9%;

  animation: orb-float-kpi 30s ease-in-out infinite;
  will-change: transform;
  transform-origin: 50% 50%;
}

@keyframes orb-float-timeline {
  0% {
    transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
  }
  20% {
    transform: translate3d(-7px, -10px, 0) scale(1.008) rotate(-0.25deg);
  }
  45% {
    transform: translate3d(9px, 7px, 0) scale(1.015) rotate(0.3deg);
  }
  70% {
    transform: translate3d(-6px, 10px, 0) scale(1.012) rotate(-0.2deg);
  }
  100% {
    transform: translate3d(0, 0, 0) scale(1.003) rotate(0deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .timeline__bg-orbs {
    animation: none;
    transform: none;
  }
}

/* =========================================================
   TIMELINE / 10年の歩み
========================================================= */
.timeline {
  position: relative;
  width: 100%;
  overflow: hidden;
  isolation: isolate;

  --axisY: 58%;
  padding-top: 335px;
  padding-bottom: 270px;

  /* text scale ratios (avoid font-size stretch in older Safari) */
  --yearScaleInactive: 0.7; /* 50/72 */
  --textScaleInactive: 0.7; /* 14/20 */
}

.timeline::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;

  background-color: rgba(255, 255, 255, 0.4);
  background-image: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.4) 10%,
    rgba(255, 106, 0, 0.8) 50%,
    rgba(255, 255, 1, 0.8) 80%,
    rgba(255, 255, 255, 0.4) 100%
  );

  background-size: 100% 1040.58px;
  background-position: 0 115.09px;
  background-repeat: no-repeat;

  opacity: 0.25;
}

.timeline.is-ready {
  contain: layout paint;
}

.timeline__title {
  margin: 0;
  padding-bottom: 50px;
  text-align: center;
  letter-spacing: 0.05em;

  font-size: clamp(34px, 3.0vw, 38px);
  font-weight: 300;
  line-height: 1.25;
  color: rgba(0, 0, 0, 0.82);

  position: relative;
  z-index: 3;
}

.timeline__viewport {
  position: relative;
  width: 100%;
  height: 450px;
  overflow: hidden;
  z-index: 2;
}

.timeline__pin-sentinel {
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.timeline__viewport::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

/* Edge fade (mask) to hide items without changing background color */
.timeline__viewport {
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    #000 16%,
    #000 84%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    #000 16%,
    #000 84%,
    transparent 100%
  );
}

.timeline__track {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: stretch;
  padding: 0 clamp(60px, 10vw, 240px);
  will-change: transform;
  --lineStart: 0px;
  --lineEnd: 0px;
}

.timeline__track::before {
  content: "";
  position: absolute;
  top: var(--axisY);
  left: var(--lineStart);
  width: max(0px, calc(var(--lineEnd) - var(--lineStart)));
  height: 2px;
  background: rgba(240, 122, 0, 0.65);
  z-index: 1;
}

.titem {
  position: relative;
  width: clamp(220px, 22vw, 340px);
  height: 100%;
  text-align: center;
  z-index: 2;
}
.titem--year {
  width: var(--dotStep);
  flex: 0 0 var(--dotStep);
}
.titem--year,
.titem--year.is-active {
  opacity: 1;
}

.titem--year {
  --circleBase: var(--circleSm);
  --circleScale: 1;
  --dotEdge: calc(var(--dotSize) * 0.5);
}
.titem--year.is-active {
  --circleScale: calc(var(--circleLg) / var(--circleSm));
  --dotEdge: calc(var(--dotSize) * var(--dotScaleActive) * 0.5);
}
.titem__circle {
  position: absolute;
  left: 50%;
  bottom: calc((100% - var(--axisY)) + var(--dotEdge) + var(--gapDotCircle));

  width: var(--circleBase);
  height: var(--circleBase);

  /* ▼ ここがポイント：translateX をやめて scale だけにする */
  transform: scale(var(--circleScale));
  transform-origin: 50% 100%;

  /* ▼ センタリングは margin で */
  margin-left: calc(var(--circleBase) * -0.5);

  border-radius: 999px;
  overflow: hidden;

  background: rgba(255, 255, 255, 0.78);
  box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.15);

  transition:
    transform 420ms cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 420ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.titem--year.is-active .titem__circle {
  box-shadow: 0 26px 54px rgba(0, 0, 0, 0.16);
}
.titem__circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.titem__dot {
  position: absolute;
  left: 50%;
  top: var(--axisY);

  transform: translate(-50%, -50%);
  width: var(--dotSize);
  height: var(--dotSize);

  border-radius: 999px;
  background: var(--accent);
  z-index: 3;

  transition: transform 420ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.titem--year.is-active .titem__dot {
  width: 20px;
  height: 20px;
  transform: translate(-50%, -50%);
}

.titem__body {
  position: absolute;
  left: 50%;
  top: calc(var(--axisY) + clamp(20px, 2.4vw, 30px));
  transform: translateX(-50%);
  width: 100%;
}
.titem__year {
  margin: 0;
  font-size: var(--yearFontLg);
  line-height: 1;
  letter-spacing: 0.03em;
  color: var(--accent);
  font-weight: 400;
  transform: scale(var(--yearScaleInactive));
  transform-origin: center top;
  transition: transform 420ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.titem--year.is-active .titem__year {
  transform: scale(1);
  text-shadow:
    0 0 12px rgba(255, 255, 255, 0.8),
    0 2px 10px rgba(255, 120, 20, 0.25);
}
.titem__text {
  margin: 2px 0 0;
  font-size: var(--textFontLg);
  letter-spacing: 0.03em;
  line-height: 1.65;
  color: #1a1a1a;
  transform: scale(var(--textScaleInactive));
  transform-origin: center top;
  transition: transform 420ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.titem--year.is-active .titem__text {
  transform: scale(1);
}

/* Media item */
.titem--media {
  /* material を右に寄せる（＝開始位置を右へ） */
  margin-left: clamp(80px, 8vw, 220px);
  margin-right: 150px;
  --mediaSize: var(--circleSm);
  --mediaScale: 1;
}
.titem--media.is-active {
  --mediaScale: var(--circleScaleActive);
}
.titem--media .titem__circle {
  width: var(--mediaSize);
  height: var(--mediaSize);
  bottom: calc(
    (100% - var(--axisY)) + (var(--dotSize) * 0.5) + var(--gapDotCircle)
  );
  left: 50%;

  /* translateXやめる */
  transform: none;
  margin-left: calc(var(--mediaSize) * -0.5);

  /* top運用はしない */
  top: auto;
}
.titem__cap {
  position: absolute;
  top: calc(var(--axisY) + 18px);
  left: 50%;
  transform: translateX(-50%);
  width: 300px;
  font-size: var(--textFontSm);
  line-height: 1.7;
  letter-spacing: 0.1em;
  color: rgba(0, 0, 0, 0.78);
}
.titem--media.is-active .titem__cap {
  font-size: var(--textFontLg);
}

/* =========================================================
   TIMELINE circle centering + scale (Firefox stable override)
   末尾追記で既存を上書き
========================================================= */

:root {
  --circleScaleActive: 1.433333; /* 215 / 150 */
}

/* is-active側の倍率を固定（calcの相性回避） */
.titem--year.is-active {
  --circleScale: var(--circleScaleActive);
}

/* ▼ ここが最重要：translateXでセンター固定 + scaleで拡大 */
.titem__circle {
  left: 50% !important;

  /* margin-left方式を殺す */
  margin-left: 0 !important;

  /* センター固定しつつ拡大 */
  transform: translateX(-50%) scale(var(--circleScale)) !important;
  transform-origin: 50% 100% !important;
}

/* is-active時の影はそのまま */
.titem--year.is-active .titem__circle {
  box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.15);
}

/* media item も translateXに統一（変なズレ防止） */
.titem--media .titem__circle {
  left: 50% !important;
  margin-left: 0 !important;
  transform: translateX(-50%) scale(var(--mediaScale, 1)) !important;

  top: auto !important;
  bottom: calc(
    (100% - var(--axisY)) + (var(--dotSize) * 0.5) + var(--gapDotCircle)
  ) !important;
}

@media (max-width: 768px) {
  .timeline__bg-orbs {
    background-image: url("assets-sp/timeline_orb_bg_sp.webp");
  }

  .timeline__bg-orbs {
    background-size: 95vw auto;
    background-position: 50% 23%;
  }
  .timeline {
    margin-top: -200px;
    padding-top: 90px;
    padding-bottom: 90px;
  }

  /* SP: edge fade off */
  .timeline__viewport {
    -webkit-mask-image: none;
    mask-image: none;
  }

  .timeline__title {
    padding-bottom: 32px;
    font-size: var(--section-title-size-sp);
  }

  .timeline::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;

    background-color: rgba(255, 255, 255, 0.4);
    background-image: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.4) 15%,
      rgba(255, 106, 0, 0.8) 50%,
      rgba(255, 255, 1, 0.8) 70%,
      rgba(255, 255, 255, 0.4) 85%
    );
    /* background-size: 100% 1040.58px; */
    background-position: 0 -180px;
    background-repeat: no-repeat;
    opacity: 0.25;
  }
  .titem--media {
    margin-left: clamp(24px, 6vw, 80px);
    margin-right: 90px;
  }

  /* ① 年ごとの間隔（=dotStep）を少し広げる：隣同士の間隔を確保 */
  .timeline {
    --dotStep: clamp(240px, 66vw, 320px);
  }

  /* ② トラックの左右余白：少しだけ余裕を戻す */
  .timeline__track {
    padding: 0 clamp(22px, 6vw, 48px);
  }

  /* 円（画像）の基準サイズを下げる */
  .timeline {
    --circleSm: 160px; /* 通常：150px → 小さく */

    --yearFontSm: 34px; /* 年号 */
    --yearFontLg: 45px;

    --textFontSm: 14px; /* テキスト */
    --textFontLg: 17px;

    --dotSize: 15px; /* ドットも少し小さく */

    --yearScaleInactive: 0.7556; /* 34/45 */
    --textScaleInactive: 0.8235; /* 14/17 */
  }

  /* 固定拡大をスマホだけ無効化（ここ重要） */
  .titem--year.is-active {
    --circleScale: 1.3; /* 拡大しない */
  }

  /* media も年と同じ拡大率に揃える */
  .titem--media.is-active {
    --mediaScale: 1.3;
  }

  /* media（material）の丸だけ別途微調整したい場合 */
  .titem--media .titem__circle {
    width: var(--circleSm);
    height: var(--circleSm);
  }

  .titem__cap {
    font-size: 11px;
    width: 220px;
  }

  .timeline__viewport {
    margin-top: 30px;
  }
}