/* ==========================================================================
   utilities.css — 単機能ユーティリティ + アニメーション
   ----------------------------------------------------------------------------
   ・テキスト寄せ / 表示制御 / 余白の上書き
   ・スクロール連動フェードイン(.fade-in / .is-visible)
   ・画像のロードフェードイン(img[data-fade] + .is-loaded)
   ・prefers-reduced-motion で全アニメーション無効
   ========================================================================== */

/* --------------------------------------------------------------------------
   テキスト寄せ
   -------------------------------------------------------------------------- */
.u-text-center { text-align: center; }
.u-text-left   { text-align: left; }
.u-text-right  { text-align: right; }

/* --------------------------------------------------------------------------
   表示制御
   -------------------------------------------------------------------------- */
.u-hidden { display: none !important; }

/* スマホでだけ非表示 / PCでだけ非表示 */
@media (max-width: 767px) {
  .u-hidden-sp { display: none !important; }
}
@media (min-width: 768px) {
  .u-hidden-pc { display: none !important; }
}

/* リード文・キャッチコピー専用の改行制御
   ・<br class="br-pc">  → PC でだけ改行(SP では自然な折返しに任せる)
   ・<br class="br-sp">  → SP でだけ改行(PC では一行に収める)
   レイアウト幅で読みやすさが変わる箇所に使う。 */
.br-pc { display: inline; }
.br-sp { display: none; }
@media (max-width: 767px) {
  .br-pc { display: none; }
  .br-sp { display: inline; }
}

/* --------------------------------------------------------------------------
   余白の上書き(必要な場合のみ)
   -------------------------------------------------------------------------- */
.u-mt-0 { margin-block-start: 0 !important; }
.u-mb-0 { margin-block-end: 0 !important; }

/* --------------------------------------------------------------------------
   スクロールアンカーのオフセット(固定ヘッダー分)
   -------------------------------------------------------------------------- */
:where([id]) {
  scroll-margin-block-start: var(--header-h, 80px);
}

/* --------------------------------------------------------------------------
   フェードイン(IntersectionObserver で .is-visible が付与される)
   ----------------------------------------------------------------------------
   「ふわっと浮かび上がる」演出:
     ・48px 下からゆっくり上へ移動
     ・blur(8px) → blur(0) で焦点が合うような夢見心地の質感
     ・cubic-bezier(0.4, 0.4, 0, 1)(longleage と同じ柔らかい ease-out)
     ・1400ms と長めに設定し、画面酔いを誘発する急な動きを避ける
   -------------------------------------------------------------------------- */
.fade-in {
  opacity: 0;
  transform: translate3d(0, 48px, 0);
  filter: blur(8px);
  transition:
    opacity 1400ms cubic-bezier(0.4, 0.4, 0, 1),
    transform 1400ms cubic-bezier(0.4, 0.4, 0, 1),
    filter 1100ms cubic-bezier(0.4, 0.4, 0, 1);
  will-change: opacity, transform, filter;
}

.fade-in.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  filter: blur(0);
}

/* 手動指定の遅延(後方互換) */
.fade-in[data-delay="1"] { transition-delay: 160ms; }
.fade-in[data-delay="2"] { transition-delay: 320ms; }
.fade-in[data-delay="3"] { transition-delay: 480ms; }
.fade-in[data-delay="4"] { transition-delay: 640ms; }

/* --------------------------------------------------------------------------
   自動スタガー — グリッド/カラム内の兄弟要素を時間差で出現させる
   data-delay 属性なしでも、自然な「波のように現れる」丁寧なリズムを作る。
   -------------------------------------------------------------------------- */
.grid > .fade-in:nth-child(1),
.access__chips > .fade-in:nth-child(1),
.cluster > .fade-in:nth-child(1) { transition-delay: 0ms; }

.grid > .fade-in:nth-child(2),
.access__chips > .fade-in:nth-child(2),
.cluster > .fade-in:nth-child(2) { transition-delay: 160ms; }

.grid > .fade-in:nth-child(3),
.access__chips > .fade-in:nth-child(3),
.cluster > .fade-in:nth-child(3) { transition-delay: 320ms; }

.grid > .fade-in:nth-child(4),
.cluster > .fade-in:nth-child(4) { transition-delay: 480ms; }

/* article 内(LEGAL / PRIVACY 等の長文)はゆるやかに 80ms 刻み */
.article > .fade-in:nth-child(1) { transition-delay: 0ms; }
.article > .fade-in:nth-child(2) { transition-delay: 80ms; }
.article > .fade-in:nth-child(3) { transition-delay: 160ms; }
.article > .fade-in:nth-child(4) { transition-delay: 240ms; }
.article > .fade-in:nth-child(5) { transition-delay: 320ms; }

/* --------------------------------------------------------------------------
   画像のロードフェードイン
   -------------------------------------------------------------------------- */
img[data-fade] {
  opacity: 0;
  transition: opacity 500ms var(--ease-out, ease-out);
}
img[data-fade].is-loaded {
  opacity: 1;
}

/* --------------------------------------------------------------------------
   モーション抑制(OSの「視差効果を減らす」設定を尊重)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .fade-in,
  .fade-in.is-visible,
  img[data-fade],
  img[data-fade].is-loaded {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }

  html { scroll-behavior: auto !important; }
}