/* =================================================================
   theme.css — theme.html 冒頭の「融合」演出だけを持つ
   黒い円 → 上下2つに分かれる → 完成ロゴ
   形は js/theme.js がスクロール量から毎フレーム作る。
   ================================================================= */

/* JS が形を組み立ててから出す。組み立てられない環境では丸ごと出さない */
.fusion-scroll { display: none; }

/* 高さは中身（貼り付く1画面＋進行のための空き＋説明文）で決まる */
.fusion-scroll.is-ready { display: block; }

/* スクロール量を稼ぐだけの空き。ここを通り抜けるまでが演出 */
.fusion-runway { height: 150vh; }

/* 貼り付く1画面。**ロゴは舞台の中央に置く**。舞台＝1画面なので、貼り付けば
   そのまま画面の中央になる。上下の余白を対称にしないと中央がずれる。
   JS で位置を作らないのが肝で、位置を補間するとスクロールより遅れて動き、
   円が「降りてくる」ように見えてしまう */
.fusion-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  padding-block: var(--header-h);
}

/* 本文と同じ幅いっぱいだと、ロゴだけが主張しすぎる。少し内側に収める。
   節が近づいてくる間に大きくなる（倍率は js/theme.js が渡す） */
.fusion-svg {
  display: block;
  width: min(92vw, 460px);
  height: auto;
  max-height: 100%;          /* 画面が低いときにヘッダーへ食い込ませない */
  transform: scale(0);
  transform-origin: center;
}


/* 説明文。貼り付いたままのロゴの下からせり上がり、空きを埋めてから
   ロゴを押し上げていく。貼り付いた舞台より前に出す必要がある。
   下はページの終わりなので、ゆとりを持たせる（フッターの margin と足し算） */
.fusion-note {
  position: relative;
  z-index: 1;
  background: var(--c-bg);
  padding-top: var(--sp-9);
  padding-bottom: calc(var(--sp-12) + var(--sp-6));
}

/* スクロールを促す表示。黒い円が浮かんでいるだけでは何が起きるのか
   分からないので置く。**画面の下端に固定**する。ロゴに付けて並べると、
   ロゴだけが JS で中央へ動くので置き去りになる。
   **節が画面に入ってきた時点で出す**（円が生まれるより先。連動させると、
   テーマの文章の下に空白だけが見えている間、次があることが分からない）。
   演出のあいだはずっと出し、終わりがけに消える（濃さは js/theme.js が渡す） */
.fusion-cue {
  position: fixed;
  left: 50%;
  bottom: var(--sp-7);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  margin: 0;
  pointer-events: none;
}

.fusion-cue-label {
  font-family: var(--font-display);
  font-size: var(--text-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-blue);
}

/* 細い縦罫を、短い線が繰り返し降りていく。矢印アイコンは置かない */
.fusion-cue-line {
  position: relative;
  width: 1px;
  height: 44px;
  overflow: hidden;
  background: var(--c-line);
}

.fusion-cue-line::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 16px;
  background: var(--c-blue);
  animation: fusion-cue-fall 1.9s ease-in-out infinite;
}

@keyframes fusion-cue-fall {
  0%        { transform: translateY(-16px); }
  55%, 100% { transform: translateY(44px); }
}

/* 変形中の近似ポリゴンと、止まって見せる完成ロゴの素材そのもの。
   色はロゴ素材と同じ墨色（--c-logo）で、本文の見出し色とは別に持つ */
.fusion-shape > *,
.fusion-logo { fill: var(--c-logo); }

/* 動きを減らす設定では、演出を畳んで最終形（融合したロゴ）だけを出す */
@media (prefers-reduced-motion: reduce) {
  /* スクロールで進むものが無くなるので、誘導も空きも出さない */
  .fusion-cue,
  .fusion-runway { display: none; }
  .fusion-stage {
    position: static;
    height: auto !important;
    padding: var(--sp-8) 0;
  }
  .fusion-svg { transform: none; }
  .fusion-note { padding-top: 0; padding-bottom: var(--sp-9); }
}