/* ==========================================================================
   inview — スクロールで画面に入った要素をふわっと出す（fade up）
   --------------------------------------------------------------------------
   ⚠ inferred: Figmaにモーション定義が無いため実装側で決めた演出。
   速さ・距離・遅延は tokens.css の --inview-* を参照する（姉妹サイト genki-port と同値）。

   型（マークアップ側で使い分ける）:
     data-inview="group" … 帯（背景色・全面写真）を持つセクション向け。**セクション自身は
                           動かさず**、中の [data-inview-child] だけをフェードアップする。
                           セクションごと動かすと、色帯の端が隣のセクションとズレて
                           境目に別の色が覗いてしまうため、背景を持つものは必ずこれ。
     data-inview         … 背景を持たない要素。要素ごとフェード＋下から上へ。
     data-inview="fade"  … 全面写真など、動かすと下端に隙間が見えるもの。フェードのみ。
     data-inview="item"  … カード等の並び。フェードアップし、1枚ずつ順番に出る。
     data-inview="chars" … 中の .c-char（ic_split_chars_html() が出力）を1文字ずつ
                           マスクからスライドインさせる。要素自体は動かさない。
     data-inview="type"  … 同じ .c-char を「タイプしている」ように1文字ずつ即時表示。
                           動きは付けず、遅延だけで打ち出す（カーソルなし）。
     data-inview="rail"  … 装飾レール（c-rail）専用。chars と同じ1文字ずつの動きに
                           加えて、続いて罫線が上から下へ引かれる。
     data-inview="balloons" … 施設マップの吹き出し専用。初期状態・演出は
                           components/facility-map.css 側が持ち、ここは
                           .is-inview を付ける起点（JSの監視対象）としてだけ使う。

   順番（遅延）はどの型も --inview-stagger × --inview-index。
   item は JS が並び順から --inview-index を付ける。group の子は
   style="--inview-index: n" で明示する。

   初期状態（不可視）はこのCSSが持ち、表示は JS（assets/js/inview.js）が
   .is-inview を付けて行う。JSが動かない環境では要素が永久に消えてしまうため、
   ルートに .ic-js（JS有効の目印。wp_head のインラインスクリプトが付ける）が
   ある場合だけ隠す。
   ========================================================================== */

.ic-js [data-inview=""],
.ic-js [data-inview="fade"],
.ic-js [data-inview="item"],
.ic-js [data-inview="group"] [data-inview-child] {
  opacity: 0;
  transition:
    opacity var(--inview-duration) var(--inview-ease),
    translate var(--inview-duration) var(--inview-ease);
  transition-delay: calc(var(--inview-stagger) * var(--inview-index, 0));
}

/* 下から上へ動かす（背景の帯＝group のセクション自身と、全面写真の fade 以外） */
.ic-js [data-inview=""],
.ic-js [data-inview="item"],
.ic-js [data-inview="group"] [data-inview-child] {
  translate: 0 var(--inview-shift);
}

.ic-js [data-inview=""].is-inview,
.ic-js [data-inview="fade"].is-inview,
.ic-js [data-inview="item"].is-inview,
.ic-js [data-inview="group"].is-inview [data-inview-child] {
  opacity: 1;
  translate: 0 0;
}

/* --------------------------------------------------------------------------
   1文字ずつ出す（.c-char）— PHP の ic_split_chars_html() が出力するマークアップ用
   1文字ぶんのマスク（.c-char）の中を、文字（.c-char__inner）がスライドインして現れる。
   フェードを混ぜず「切り出された枠から出てくる」動きにする。
   data-inview="chars"（FVキャッチ等）と data-inview="rail" のどちらでも使う。
   -------------------------------------------------------------------------- */
.ic-js .c-char {
  display: inline-block;
  /* マスクは overflow ではなく clip-path で切る。
     Safari(WebKit) は縦書き(vertical-rl)内の inline-block に overflow≠visible が付くと
     ベースラインの取り方が変わり、文字が横に半行ぶんズレて、解除時に飛び戻る
     （iPhone Safari で出現時に崩れて見える原因）。clip-path はレイアウトに影響しない。 */
  clip-path: inset(0);
}

.ic-js .c-char__inner {
  display: inline-block;
  translate: 0 -100%; /* 1文字ぶん上に退避（縦書きなので上から入ってくる） */
  transition: translate var(--inview-duration) var(--ease-out);
  transition-delay: calc(var(--inview-stagger-char) * var(--inview-index, 0));
}

.ic-js .is-inview .c-char__inner {
  translate: 0 0;
}

/* 出終わったらマスクを行方向に広げる（枠のままだと p・g などの下端が切られる）。
   inset 同士は補間できるので、duration 0 ＋ 遅延で「スライド完了後に一気に広げる」。
   discrete 遷移（transition-behavior）に頼らないため、古い Safari でも同じ動きになる。 */
.ic-js .is-inview .c-char {
  clip-path: inset(0 -50%);
  transition: clip-path 0s calc(var(--inview-duration) + var(--inview-stagger-char) * var(--inview-index, 0));
}

/* --------------------------------------------------------------------------
   data-inview="type" — タイプしているように1文字ずつ出す（FVキャッチ）
   スライドやフェードで「動かす」のではなく、打った瞬間に文字が置かれる感じにする。
   duration 0 ＋ 遅延だけで、1文字ずつパッ・パッと現れる（カーソルは出さない）。
   -------------------------------------------------------------------------- */
.ic-js [data-inview="type"] .c-char {
  clip-path: none; /* マスクは使わないのでクリップ不要 */
}

.ic-js [data-inview="type"] .c-char__inner {
  opacity: 0;
  translate: none;
  transition: opacity 0s;
  transition-delay: calc(var(--inview-stagger-char) * var(--inview-index, 0));
}

.ic-js [data-inview="type"].is-inview .c-char__inner {
  opacity: 1;
}

/* --------------------------------------------------------------------------
   data-inview="rail" — 装飾レール（c-rail）専用の演出
   ラベル（.c-char）が出たあと、罫線が上から下へ引かれる。
   レール自体は動かさない（ラベル位置・罫線の長さは他要素の基準になるため）。
   -------------------------------------------------------------------------- */

/* 罫線：上端を起点に伸ばして「線を引く」。文字が出始めた後を追わせる */
.ic-js [data-inview="rail"] .c-rail__line {
  transform-origin: top center;
  scale: 1 0;
  transition: scale var(--inview-duration-long) var(--inview-ease);
  transition-delay: calc(var(--inview-stagger) * 2);
}

.ic-js [data-inview="rail"].is-inview .c-rail__line {
  scale: 1 1;
}

/* モーション低減設定：移動はやめ、短いフェードだけにする */
@media (prefers-reduced-motion: reduce) {
  .ic-js [data-inview=""],
  .ic-js [data-inview="fade"],
  .ic-js [data-inview="item"],
  .ic-js [data-inview="group"] [data-inview-child] {
    translate: none;
    transition: opacity var(--duration-fast) var(--ease-out);
    transition-delay: 0s;
  }

  /* 1文字ずつ・罫線引きはやめ、最初から出ている状態にする */
  .ic-js .c-char {
    clip-path: none;
    transition: none;
  }

  .ic-js .c-char__inner {
    translate: none;
    transition: none;
  }

  .ic-js [data-inview="rail"] .c-rail__line {
    scale: 1 1;
    transition: none;
  }
}

/* 印刷時は必ず見えるようにする（JSが走らないケースの保険も兼ねる） */
@media print {
  .ic-js [data-inview],
  .ic-js [data-inview="group"] [data-inview-child] {
    opacity: 1;
    translate: none;
  }

  .ic-js .c-char {
    clip-path: none;
  }

  .ic-js .c-char__inner {
    translate: none;
  }

  .ic-js [data-inview="rail"] .c-rail__line {
    scale: 1 1;
  }
}