@charset "UTF-8";

/* ==========================================================================
   mobile-hero-intro.css  ―  スマートフォン（767px以下）ヒーローのイントロ演出
   --------------------------------------------------------------------------
   ・背景写真が、レンガの入口の奥へ静かに進む（scale 1 → 1.057 / 12s / linear）。
     写真の基準サイズはズーム後に元の構図（320.29vw）へ戻る 303.02vw（下の「2)」参照）。
   ・アニメーションするのは transform / opacity のみ。背景写真の background-size / position / inset は動かさない。
   ・768px以上（タブレット・PC）には一切適用されません。PC用の hi-* クラス・変数も使いません。
   ・クラスの意味
       .mhi-prep        : 文字・白ぼかし・ボタンの初期状態（head内スクリプトが付与。無ければ完成状態のまま）
       .mhi-run         : 文字・白ぼかし・ボタンの再生中
       .mhi-short       : 再訪問の短縮版（文字・白ぼかし・ボタンだけを短縮。背景ズームは短縮しない）
       .mhi-content-ready: 文字側の演出完了（ボタン操作可能）
       .mhi-bg-run      : 背景ズーム専用（初回・再訪問とも12秒）
       .mhi-bg-done     : 背景ズーム完了後の静的な最終状態（scale 1.057 のまま。1へ戻さない）
   ========================================================================== */

@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {

  /* 1) 従来のスマホ用イントロ（背景のフェード、一斉フェード等）を停止。静的スタイルは完成状態のまま */
  .hero__bg,
  .hero__media::before,
  .hero__scrim,
  .hero__title::before,
  .hero__title::after,
  .hero__eyebrow,
  .hero__line--1 .hero__line-mask,
  .hero__line--2 .hero__line-mask,
  .hero__word--kanji,
  .hero__word--particle2,
  .hero__lead-group,
  .hero__area,
  .hero__actions .btn--primary,
  .hero__actions .btn--outline { animation: none; }

  /* 2) 背景ズームの値（初回・再訪問共通。.mhi-short からは上書きしない） */
  html.mhi-prep,
  html.mhi-bg-run,
  html.mhi-bg-done {
    --mhi-bg-start: 1; --mhi-bg-end: 1.057; --mhi-bg-duration: 12s;
    /* 背景写真の基準サイズと位置（すべて画面幅[vw]基準。高さ・svh・vh には依存しない）。
       ズーム前の静的な構図は「auto 320.29vw / 上端 -99.72vw」。1.057倍に拡大しても同じ大きさに戻るよう、
       基準サイズは 320.29 ÷ 1.057 ＝ 303.02vw。
       基準点 O（縦）＝155vw、上端 P ＝ O + (P0 − O) ÷ k ＝ 155 + (−99.72 − 155) ÷ 1.057 ＝ −85.98vw
       → 拡大後の上端は O + k×(P − O) ＝ −99.72vw に戻る。
       O を下寄り（155vw）にしているのは、0秒時点で縦長の端末（393×852など）でも背景の下端（P＋303.02＝217.04vw）が画面下端（216.8vw）に届くため。 */
    --mhi-bg-size: 303.02vw;
    --mhi-bg-top: -85.98vw;
    --mhi-bg-origin-y: 155vw;
  }
  html.mhi-prep .hero__bg,
  html.mhi-bg-run .hero__bg,
  html.mhi-bg-done .hero__bg {
    background-size: auto max(var(--mhi-bg-size), calc(100% + 85.98vw));   /* ヒーローが写真より高い場合は上端固定のまま拡大して下端まで写真を続ける */
    background-position: center var(--mhi-bg-top);
    transform-origin: 50% var(--mhi-bg-origin-y);
  }

  /* 3) 文字・白ぼかし・ボタンの初期状態（背景写真は最初から完全表示） */
  html.mhi-prep .hero__media::before,
  html.mhi-prep .hero__scrim,
  html.mhi-prep .hero__title::before,
  html.mhi-prep .hero__title::after { opacity: 0; }
  .hero__eyebrow,
  .hero__lead-group,
  .hero__area { --mhi-rise-y: 6px; }
  .hero__line-mask { --mhi-rise-y: 7px; }
  .hero__actions .btn { --mhi-rise-y: 5px; }
  html.mhi-prep .hero__eyebrow,
  html.mhi-prep .hero__lead-group,
  html.mhi-prep .hero__area,
  html.mhi-prep .hero__line--1 .hero__line-mask,
  html.mhi-prep .hero__actions .btn { opacity: 0; transform: translateY(var(--mhi-rise-y)); }
  html.mhi-prep .hero__line--2 .hero__line-mask { transform: translateY(var(--mhi-rise-y)); }
  html.mhi-prep .hero__word--kanji,
  html.mhi-prep .hero__word--particle2 { opacity: 0; }
  html.mhi-prep .hero__actions { visibility: hidden; }   /* 非表示の間はタッチ・Tabの対象外 */

  /* 4) 再生（タイミングは変数。短縮版は下で上書き） */
  html.mhi-run {
    --mhi-ease: cubic-bezier(0.22, 0.75, 0.3, 1);
    --mhi-d-v1: 0.2s;  --mhi-t-v1: 2.2s;    /* 白ぼかし（最終濃度は現在のまま） */
    --mhi-d-eb: 0.65s; --mhi-t-eb: 0.65s;
    --mhi-d-l1: 1.05s; --mhi-t-l1: 0.75s;
    --mhi-d-l2: 1.5s;  --mhi-t-l2: 0.8s;    /* 人生を */
    --mhi-d-l3: 1.95s; --mhi-t-l3: 0.8s;    /* 整える。 */
    --mhi-d-ld: 2.55s; --mhi-t-ld: 0.75s;
    --mhi-d-b1: 3.15s; --mhi-t-b1: 0.65s;
    --mhi-d-b2: 3.35s; --mhi-t-b2: 0.65s;
  }
  /* 再訪問：文字・白ぼかし・ボタンだけを約2.1秒へ短縮（順序は初回と同じ） */
  html.mhi-run.mhi-short {
    --mhi-d-v1: 0.1s;  --mhi-t-v1: 1.3s;
    --mhi-d-eb: 0.3s;  --mhi-t-eb: 0.5s;
    --mhi-d-l1: 0.5s;  --mhi-t-l1: 0.55s;
    --mhi-d-l2: 0.75s; --mhi-t-l2: 0.6s;
    --mhi-d-l3: 0.95s; --mhi-t-l3: 0.6s;
    --mhi-d-ld: 1.2s;  --mhi-t-ld: 0.6s;
    --mhi-d-b1: 1.55s; --mhi-t-b1: 0.45s;
    --mhi-d-b2: 1.65s; --mhi-t-b2: 0.45s;
  }

  html.mhi-run .hero__media::before,
  html.mhi-run .hero__scrim { animation: mhi-fade var(--mhi-t-v1) cubic-bezier(0.4, 0, 0.25, 1) var(--mhi-d-v1) both; }
  html.mhi-run .hero__title::before,
  html.mhi-run .hero__title::after { animation: mhi-fade var(--mhi-t-v1) cubic-bezier(0.4, 0, 0.25, 1) calc(var(--mhi-d-v1) + 0.3s) both; }
  html.mhi-run .hero__eyebrow { animation: mhi-rise var(--mhi-t-eb) var(--mhi-ease) var(--mhi-d-eb) both; }
  html.mhi-run .hero__line--1 .hero__line-mask { animation: mhi-rise var(--mhi-t-l1) var(--mhi-ease) var(--mhi-d-l1) both; }
  /* 2〜3行目：行全体は同じ7pxだけ上がり、「人生を」→「整える。」を既存spanごとに別時刻でフェード */
  html.mhi-run .hero__line--2 .hero__line-mask { animation: mhi-move var(--mhi-t-l2) var(--mhi-ease) var(--mhi-d-l2) both; }
  html.mhi-run .hero__word--jinsei,
  html.mhi-run .hero__word--particle2 { animation: mhi-fade var(--mhi-t-l2) var(--mhi-ease) var(--mhi-d-l2) both; }
  html.mhi-run .hero__word--totonoeru { animation: mhi-fade var(--mhi-t-l3) var(--mhi-ease) var(--mhi-d-l3) both; }
  /* 地域・対応方法（サービス情報）：サブコピー（ld）とボタン（b1）の中間で立ち上げる（順序：メイン→サブ→地域・対応方法→CTA） */
  html.mhi-run .hero__area { animation: mhi-rise var(--mhi-t-ld) var(--mhi-ease) calc((var(--mhi-d-ld) + var(--mhi-d-b1)) / 2) both; }
  html.mhi-run .hero__lead-group { animation: mhi-rise var(--mhi-t-ld) var(--mhi-ease) var(--mhi-d-ld) both; }
  html.mhi-run .hero__actions { visibility: visible; }
  html.mhi-run .hero__actions .btn--primary { animation: mhi-rise var(--mhi-t-b1) var(--mhi-ease) var(--mhi-d-b1) both; }
  html.mhi-run .hero__actions .btn--outline { animation: mhi-rise var(--mhi-t-b2) var(--mhi-ease) var(--mhi-d-b2) both; }

  /* 5) 背景ズーム：transform だけ・線形・12秒。終了後は 1.057 のまま静的に維持（1へ戻さない） */
  html.mhi-bg-run .hero__bg {
    will-change: transform;
    animation: mhi-forward var(--mhi-bg-duration) linear both;
  }
  html.mhi-bg-done .hero__bg {
    animation: none;
    transform: scale(var(--mhi-bg-end));
    will-change: auto;
  }

  @keyframes mhi-fade { from { opacity: 0; } to { opacity: 1; } }
  @keyframes mhi-rise {
    from { opacity: 0; transform: translateY(var(--mhi-rise-y)); }
    to   { opacity: 1; transform: translateY(0); }
  }
  @keyframes mhi-move {
    from { transform: translateY(var(--mhi-rise-y)); }
    to   { transform: translateY(0); }
  }
  @keyframes mhi-forward {
    from { transform: scale(var(--mhi-bg-start)); }
    to   { transform: scale(var(--mhi-bg-end)); }
  }
}