/* ==========================================================================
   mer-track.css — 「転んだ回数のぶんだけ、数字がある。」
   白い地の上を、歩き、つまずき、転び、松葉杖をつき、そして一気に走り抜ける。
   通り過ぎた数字だけが灯る。
   mer-story.css の後に読み込む（黒地の指定を上書きする）。
   ========================================================================== */

/* ---- 地を白系へ ---- */
.mer-proof {
  position: relative;
  isolation: isolate;
  padding-block: clamp(96px, 13vh, 150px);
  color: var(--mer-ink);
}

.mer-proof::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 66% 58% at 18% 14%, rgba(206, 224, 248, 0.55), transparent 66%),
    radial-gradient(ellipse 54% 50% at 88% 84%, rgba(246, 224, 208, 0.42), transparent 70%),
    linear-gradient(178deg, #fbfcfe 0%, #f4f7fb 54%, #f7f4f1 100%);
}

.mer-proof .mer-heading { color: #1e376f; }
.mer-proof .mer-kicker { color: rgba(60, 82, 128, 0.72); }
.mer-proof .mer-intro { color: var(--mer-ink-soft); }

.mer-track {
  position: relative;
  margin-top: clamp(44px, 6vh, 78px);
  padding-top: clamp(180px, 27vh, 300px);
}

/* ---- 道 ---- */
.mer-track__lane {
  position: absolute;
  inset: 0 0 auto;
  height: clamp(180px, 27vh, 300px);
  pointer-events: none;
}

.mer-track__ground {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(32, 44, 72, 0) 0%,
    rgba(32, 44, 72, 0.24) 10%,
    rgba(32, 44, 72, 0.24) 90%,
    rgba(32, 44, 72, 0) 100%);
}

/* 白い地では、照り返しを敷くと灰色の帯にしか見えない。線1本で足りる。 */

/* ---- 役者 ---- */
.mer-track__actor {
  --x: 2%;
  position: absolute;
  bottom: 0;
  /* transform: translateX(%) は「要素自身の幅」を基準に動く。
     道の幅で動かしたいので left を使う（実際にここで詰まった）。 */
  left: var(--x);
  width: clamp(112px, 13vw, 196px);
  height: clamp(170px, 25vh, 288px);
  will-change: left;
}

.mer-pose {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: auto;
  height: 100%;
  max-width: none;
  opacity: 0;
  transform: translateX(-50%);
  transition: opacity 0.14s linear;
  filter: drop-shadow(0 16px 22px rgba(28, 40, 72, 0.28));
}

.mer-pose.is-on { opacity: 1; }

/* 姿勢ごとに背が違う。同じ高さで並べると接地がそろわず、浮いて見える。 */
.mer-pose[data-pose="fall"] { height: 58%; }
.mer-pose[data-pose="standup"] { height: 70%; }
.mer-pose[data-pose="stumble"] { height: 92%; }
.mer-pose[data-pose="crutch"] { height: 96%; }

/* 姿勢ごとの震え。止まった絵をそのまま置くと「貼り紙」に見える。 */
.mer-pose[data-pose="walk"].is-on { animation: mer-bob 0.62s ease-in-out infinite; }
.mer-pose[data-pose="crutch"].is-on { animation: mer-shiver 0.16s linear infinite; }
.mer-pose[data-pose="fall"].is-on { animation: mer-gasp 1.5s ease-in-out infinite; }
.mer-pose[data-pose="standup"].is-on { animation: mer-strain 0.22s linear infinite; }
.mer-pose[data-pose="run"].is-on { animation: mer-dash 0.19s linear infinite; }
.mer-pose[data-pose="stumble"].is-on { animation: mer-jolt 0.13s linear infinite; }

@keyframes mer-bob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(-4px); }
}

@keyframes mer-shiver {
  0%   { transform: translateX(-50%) translate(0, 0) rotate(0deg); }
  25%  { transform: translateX(-50%) translate(-1.2px, 0.6px) rotate(-0.35deg); }
  50%  { transform: translateX(-50%) translate(1.1px, -0.5px) rotate(0.3deg); }
  75%  { transform: translateX(-50%) translate(-0.8px, 0.4px) rotate(-0.2deg); }
  100% { transform: translateX(-50%) translate(0, 0) rotate(0deg); }
}

@keyframes mer-gasp {
  0%, 100% { transform: translateX(-50%) scale(1); }
  50%      { transform: translateX(-50%) scale(1.018); }
}

@keyframes mer-strain {
  0%   { transform: translateX(-50%) translate(0, 0); }
  50%  { transform: translateX(-50%) translate(1.4px, -1px); }
  100% { transform: translateX(-50%) translate(0, 0); }
}

@keyframes mer-dash {
  0%   { transform: translateX(-50%) translate(0, 0) rotate(0deg); }
  50%  { transform: translateX(-50%) translate(-2.6px, -3px) rotate(-0.8deg); }
  100% { transform: translateX(-50%) translate(0, 0) rotate(0deg); }
}

@keyframes mer-jolt {
  0%   { transform: translateX(-50%) translate(0, 0) rotate(0deg); }
  33%  { transform: translateX(-50%) translate(2px, -1.5px) rotate(0.8deg); }
  66%  { transform: translateX(-50%) translate(-1.6px, 1px) rotate(-0.6deg); }
  100% { transform: translateX(-50%) translate(0, 0) rotate(0deg); }
}

/* 走り出したら、速度線を後ろへ引く */
.mer-track__actor::after {
  content: "";
  position: absolute;
  right: 76%;
  bottom: 20%;
  width: 0;
  height: 30%;
  opacity: 0;
  background:
    linear-gradient(90deg, transparent, rgba(32, 44, 72, 0.34) 62%, transparent),
    linear-gradient(90deg, transparent, rgba(32, 44, 72, 0.18) 72%, transparent);
  background-size: 100% 2px, 100% 2px;
  background-position: 0 28%, 0 70%;
  background-repeat: no-repeat;
  transition: opacity 0.18s ease, width 0.3s var(--mer-ease);
}

.mer-track.is-dash .mer-track__actor::after {
  width: clamp(80px, 10vw, 170px);
  opacity: 1;
}

/* ---- 数字のマイルストーン ---- */
.mer-track__marks {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 40px);
  margin: 0;
  padding: clamp(26px, 3.4vh, 42px) 0 0;
  list-style: none;
}

.mer-mark {
  position: relative;
  padding-top: clamp(20px, 2.6vh, 30px);
  border-top: 1px solid rgba(32, 44, 72, 0.14);
  opacity: 0.30;
  transition: opacity 0.6s var(--mer-ease), border-color 0.6s ease;
}

.mer-mark::before {
  content: "";
  position: absolute;
  top: -4px;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(32, 44, 72, 0.26);
  transition: background 0.5s ease, box-shadow 0.5s ease, transform 0.5s var(--mer-ease);
}

.mer-mark.is-lit {
  opacity: 1;
  border-top-color: rgba(176, 126, 22, 0.55);
}

.mer-mark.is-lit::before {
  background: #b07e16;
  box-shadow: 0 0 0 5px rgba(176, 126, 22, 0.14);
  transform: scale(1.15);
}

.mer-mark__figure {
  display: flex;
  align-items: baseline;
  gap: 0.28em;
  margin: 0 0 10px;
  color: #1e376f;
  font-family: var(--mer-latin);
  line-height: 0.92;
}

.mer-mark__figure span {
  font-size: clamp(2.4rem, 4.4vw, 4.2rem);
  font-weight: 800;
  letter-spacing: -0.045em;
}

.mer-mark__figure small {
  font-family: var(--mer-display);
  font-size: clamp(0.78rem, 1vw, 0.95rem);
  font-weight: 700;
  color: rgba(60, 82, 128, 0.78);
  white-space: nowrap;
}

.mer-mark__note {
  margin: 0;
  color: var(--mer-ink-soft);
  font-size: 0.82rem;
  line-height: 1.8;
  text-wrap: pretty;
}

.mer-mark__note time { color: rgba(78, 86, 100, 0.60); }

/* 動きを止めている環境では、道を薄くして数字を読ませる */
.mer-track.is-static .mer-track__ground { opacity: 0.5; }
.mer-track.is-static .mer-pose { animation: none !important; }

@media (prefers-reduced-motion: reduce) {
  .mer-pose { animation: none !important; }
}

@media (max-width: 860px) {
  .mer-track__marks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mer-track { padding-top: clamp(150px, 28vh, 210px); }
  .mer-track__lane { height: clamp(150px, 28vh, 210px); }
  .mer-track__actor { width: clamp(86px, 18vw, 126px); height: clamp(138px, 26vh, 196px); }
}

@media (max-width: 520px) {
  .mer-track__marks { grid-template-columns: 1fr; gap: 20px; }
}

/* 数字の上に置く小さなラベル（貯金通帳／累計／月収／これから） */
.mer-mark__label {
  margin: 0 0 6px;
  color: rgba(60, 82, 128, 0.62);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

/* 「これから」は数字ではなく記号。同じ視覚の重さに揃える */
.mer-mark__inf {
  font-size: clamp(2.8rem, 5vw, 4.8rem);
  line-height: 0.8;
}