/*
 * Layer 1 polish — 横軸 / 右レール / LAUNCH ラベルの意味づけ
 *
 * 背景:
 *  crossroad-future-axis.css は「未来は淡い場であり、正確な軸は注目箇所の
 *  周辺でだけ開示される」という意図で、.prediction-line の地の線を
 *  background:transparent !important で消している。
 *  結果として、局所ハイライト(::after)を載せる土台がなくなり、
 *  横軸そのものが知覚できない状態になっていた。
 *
 *  ここでは「点線の図解に戻す」のではなく、
 *   (1) 地の線を、原点で最も強く右へ減衰する1本として復活させ
 *   (2) 各予想のノードを線の上にピクセル単位で乗せ
 *   (3) 浮いていた +N DAYS を、ティックで軸へ繋留する
 *  の3点だけで軸の連続性を回復させる。
 *
 * すべて後乗せの上書きのみ。マークアップ変更なし。
 */

/* ============================================================
   1. 地の線 — 原点で最も強く、右へ向かって減衰（＝確度の低下）
   ============================================================ */
html[data-crossroad-phase="prelaunch"] .prediction-line {
  background: linear-gradient(
    90deg,
    transparent 0,
    rgba(130, 205, 252, .14) 3%,
    rgba(130, 205, 252, .62) var(--axis-x),
    rgba(130, 205, 252, .36) 52%,
    rgba(130, 205, 252, .15) 84%,
    transparent 99%
  ) !important;
  box-shadow: 0 0 16px rgba(130, 205, 252, .06) !important;
}

/* 「淡い場」も、実際に感じ取れる程度までは持ち上げる（元は最大 .038） */
html[data-crossroad-phase="prelaunch"] .prediction-line::before {
  background: linear-gradient(
    180deg,
    transparent 0,
    rgba(130, 205, 252, .016) 24%,
    rgba(130, 205, 252, .072) 48%,
    rgba(130, 205, 252, .030) 62%,
    transparent 100%
  );
}

/* ============================================================
   2. ノードを軸線の上へ正確に乗せる
      軸線はカード上端から -36px（.prediction-zone の top:50%、実測で安定）。
      既存のノード点は -36px の 3px 上にあり、線から浮いて見えていた。
   ============================================================ */
@media (min-width: 761px) {
  html[data-crossroad-phase="prelaunch"] .prediction-card:not(.add-card)::before {
    top: -44px;
    height: 44px;
    background:
      radial-gradient(
        circle at 50% 8px,
        #e6f5ff 0 1.5px,
        color-mix(in srgb, var(--prediction) 90%, transparent) 2px 3.2px,
        transparent 4.2px
      ),
      linear-gradient(
        color-mix(in srgb, var(--prediction) 66%, transparent),
        color-mix(in srgb, var(--prediction) 14%, transparent)
      ) 50% 12px / 1px calc(100% - 12px) no-repeat;
  }
}

/* ============================================================
   3. +N DAYS を軸へ繋留する
      これまでは軸線の 65px 上に、カード内側の余白基準（left:12px）で
      浮いており、軸ともノードとも列が揃っていなかった。
      ノードと同じ x に置き、短いティックで線まで下ろす。
   ============================================================ */
@media (min-width: 761px) {
  html[data-crossroad-phase="prelaunch"] .prediction-days-ahead {
    left: var(--prediction-anchor-x);
    bottom: calc(100% + 46px);
    letter-spacing: .15em;
  }

  html[data-crossroad-phase="prelaunch"]
  .prediction-card:not(.add-card) .prediction-days-ahead::before {
    content: none;
  }

  /* 過去側（CLOSED）は予想色ではなく公式側の無彩色で沈める */
  html[data-crossroad-phase="prelaunch"] .prediction-days-ahead.is-past {
    color: color-mix(in srgb, var(--actual) 52%, transparent);
  }

  html[data-crossroad-phase="prelaunch"]
  .prediction-card:not(.add-card) .prediction-days-ahead.is-past::before {
    background: linear-gradient(
      color-mix(in srgb, var(--actual) 34%, transparent),
      transparent
    );
  }

  html[data-crossroad-phase="prelaunch"] .prediction-days-ahead.is-edge-clipped::before {
    opacity: 0;
  }
}

/* ============================================================
   4. 右にまだ軸が続くことを示すスクリム
      .has-right-overflow は既存 JS（updateRailNavigator）が付け外しするが、
      初期化直後の 1 回はレール幅が確定する前に走るため、最初のスクロール／
      リサイズまでクラスが付かない。そこで既定を「続きあり」とし、
      「左に溢れているのに右には溢れていない」＝確実に右端、のときだけ畳む。
   ============================================================ */
html[data-crossroad-phase="prelaunch"] .prediction-zone::after {
  content: "";
  position: absolute;
  z-index: 12;
  top: -56px;
  bottom: -56px;
  right: 0;
  width: clamp(42px, 5vw, 88px);
  pointer-events: none;
  opacity: 1;
  transition: opacity .3s ease-out;
  background: linear-gradient(
    90deg,
    rgba(3, 7, 12, 0),
    rgba(3, 7, 12, .34) 54%,
    rgba(3, 7, 12, .72)
  );
  -webkit-mask-image: linear-gradient(
    180deg,
    transparent,
    #000 22%,
    #000 78%,
    transparent
  );
  mask-image: linear-gradient(
    180deg,
    transparent,
    #000 22%,
    #000 78%,
    transparent
  );
}

html[data-crossroad-phase="prelaunch"]
.prediction-zone.has-left-overflow:not(.has-right-overflow)::after {
  opacity: 0;
}

/* ============================================================
   5. 確定と予想を、線種で区別する
      OFFICIAL LAUNCH = 実線 / IF LAUNCH = 破線。
      同じグレーで並んでいた 2 つの発売日が、書式だけで見分けられるようにする。
   ============================================================ */
.surface-launch {
  opacity: 1;
}

.surface-launch strong {
  display: block;
  padding-bottom: 0;
  border-bottom: 0;
}

.launch-count-target {
  padding-bottom: 3px;
  border-bottom: 1px dashed color-mix(in srgb, var(--prediction) 44%, transparent);
}

/* ============================================================
   6. 右上を 1 本のレールとして揃える
      トレーラーアーカイブと 2 つの署名アイコンが別々の基準で浮いていたため、
      上端と右方向のリズム（アイコン 52px + 間隔 18px）を共有させる。
   ============================================================ */
@media (min-width: 761px) {
  :root {
    /* trailer-archive.css の .crossroad-hero > .trailer-archive と同値。
       右レールの上端をここ 1 箇所で持つ。 */
    --right-rail-top: clamp(58px, 8svh, 84px);
    --right-rail-icon: 52px;
    --right-rail-gap: 18px;
  }

  /* プレイヤーが開くとアーカイブが少し上がるので、署名列も同じだけ動かす */
  body:has(.crossroad-hero > .trailer-archive.has-visible-player) {
    --right-rail-top: clamp(52px, 7svh, 76px);
  }

  .vfprep-signature,
  .wdk-signature {
    transition: top .9s cubic-bezier(.22, .72, .24, 1), opacity .3s ease-out;
  }

  .vfprep-signature {
    top: var(--right-rail-top);
  }

  .wdk-signature {
    top: calc(var(--right-rail-top) + var(--right-rail-icon) + var(--right-rail-gap));
  }
}