@charset "UTF-8";

/* ==========================================================================
   hero-intro.css  ―  PC版（1025px以上）ヒーローのイントロ演出
   --------------------------------------------------------------------------
   ・レンガのアーチの奥へ、気づかない程度に静かに進むイントロ（初回：文字・ボタンは約5.6秒で完成、背景ズームだけ約14秒／再訪問は約2秒の短縮版）。
   ・最終状態は従来と完全に同一（各要素の静的スタイルは変更していません）。
   ・アニメーションするのは transform / opacity のみ。背景の専用レイヤー（.hero__bg）だけを拡大し、
     文字・ボタン・ヘッダーは拡大しません。
   ・クラスの意味
       .hi-prep : イントロ前の初期状態（head内の小さなスクリプトが付与。無ければ完成状態のまま）
       .hi-run  : 文字・白ぼかし・ボタンの再生中（約5.9秒で解除）
       .hi-bg-run: 背景ズーム専用（初回・再訪問とも14秒。文字側とは別に解除し、文字側の解除で背景は止まらない）
       .hi-short: 再訪問の短縮版（文字・白ぼかし・ボタンだけを短縮。背景ズームは短縮しない）
   ・1024px以下・動きを減らす設定では、以下のルールは一切適用されません。
   ========================================================================== */
@media (min-width: 1025px) and (prefers-reduced-motion: no-preference) {

  /* 1) 従来のPC用イントロ（一斉フェード等）と、ヘッダーの初回フェードを停止。
        各要素は完成状態（不透明・移動なし）の静的スタイルで表示されます。 */
  .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,
  .site-logo,
  .global-nav__list { animation: none; }

  /* 2) イントロ前の初期状態：白ベールなし・コピーとボタンは未表示・背景は少し引いた位置 */
  /* 背景ズームの値はここ1か所だけで管理（初回・再訪問とも 0.949 → 1 / 14s / linear）。.hi-short は文字側の短縮にだけ使う */
  html.hi-prep,
  html.hi-bg-run { --hi-bg-start: 0.949; --hi-bg-duration: 14s; }
  html.hi-prep .hero__bg { opacity: 1; transform: scale(var(--hi-bg-start)); transform-origin: 50% 52%; }
  html.hi-prep .hero__media::before,
  html.hi-prep .hero__scrim,
  html.hi-prep .hero__title::before,
  html.hi-prep .hero__title::after { opacity: 0; }
  /* 上昇量は共通変数（開始位置とキーフレームの両方が参照するため、値が食い違って飛ぶことはない） */
  .hero__eyebrow,
  .hero__line-mask,
  .hero__lead-group,
  .hero__area { --hi-rise-y: 8px; }
  .hero__actions .btn { --hi-rise-y: 6px; }
  html.hi-prep .hero__eyebrow,
  html.hi-prep .hero__lead-group,
  html.hi-prep .hero__area,
  html.hi-prep .hero__line--1 .hero__line-mask,
  html.hi-prep .hero__actions .btn { opacity: 0; transform: translateY(var(--hi-rise-y)); }
  html.hi-prep .hero__line--2 .hero__line-mask { transform: translateY(var(--hi-rise-y)); }
  html.hi-prep .hero__word--kanji,
  html.hi-prep .hero__word--particle2 { opacity: 0; }
  html.hi-prep .hero__actions { visibility: hidden; }   /* 非表示の間はマウス・タッチ・Tabの対象外 */

  /* 3) 再生（タイミングは変数。短縮版は下で上書き） */
  html.hi-run {
    --hi-ease: cubic-bezier(0.22, 0.75, 0.3, 1);
    --hi-d-v1: 0.7s;  --hi-t-v1: 3.7s;   /* 中央・左右の白ベール（最初の約0.7秒は写真だけ） */
    --hi-d-v2: 1.1s;  --hi-t-v2: 3.2s;   /* コピー背後の白ぼかし */
    --hi-d-eb: 1.5s;  --hi-t-eb: 1s;
    --hi-d-l1: 2.05s; --hi-t-l1: 1.15s;
    --hi-d-l2: 2.7s;  --hi-t-l2: 1.15s;
    --hi-d-l3: 3.25s; --hi-t-l3: 1.15s;
    --hi-d-ld: 3.9s;  --hi-t-ld: 1s;
    --hi-d-b1: 4.65s; --hi-t-b1: 0.8s;
    --hi-d-b2: 4.95s; --hi-t-b2: 0.65s;
  }
  /* 再訪問：総尺約2秒。順序は初回と同じ */
  html.hi-run.hi-short {
    --hi-d-v1: 0.15s; --hi-t-v1: 1.55s;
    --hi-d-v2: 0.3s;  --hi-t-v2: 1.35s;
    --hi-d-eb: 0.35s; --hi-t-eb: 0.6s;
    --hi-d-l1: 0.6s;  --hi-t-l1: 0.65s;
    --hi-d-l2: 0.9s;  --hi-t-l2: 0.65s;
    --hi-d-l3: 1.1s;  --hi-t-l3: 0.65s;
    --hi-d-ld: 1.3s;  --hi-t-ld: 0.55s;
    --hi-d-b1: 1.55s; --hi-t-b1: 0.4s;
    --hi-d-b2: 1.62s; --hi-t-b2: 0.38s;
  }

  /* 背景ズームは文字側（.hi-run）から独立。写真は最初から完全表示で、transform だけを線形に動かす */
  html.hi-bg-run .hero__bg {
    will-change: transform;
    animation: hi-forward var(--hi-bg-duration) linear both;
  }
  html.hi-run .hero__media::before,
  html.hi-run .hero__scrim {
    animation: hi-fade var(--hi-t-v1) cubic-bezier(0.4, 0, 0.25, 1) var(--hi-d-v1) both;
  }
  html.hi-run .hero__title::before,
  html.hi-run .hero__title::after {
    animation: hi-fade var(--hi-t-v2) cubic-bezier(0.4, 0, 0.25, 1) var(--hi-d-v2) both;
  }
  html.hi-run .hero__eyebrow { animation: hi-rise var(--hi-t-eb) var(--hi-ease) var(--hi-d-eb) both; }
  html.hi-run .hero__line--1 .hero__line-mask { animation: hi-rise var(--hi-t-l1) var(--hi-ease) var(--hi-d-l1) both; }
  /* 2行目：行全体は同じ8pxだけ上がり、「人生を」→「整える。」を既存spanごとに約100ms差でフェード */
  html.hi-run .hero__line--2 .hero__line-mask { animation: hi-move var(--hi-t-l2) var(--hi-ease) var(--hi-d-l2) both; }
  html.hi-run .hero__word--jinsei,
  html.hi-run .hero__word--particle2 { animation: hi-fade var(--hi-t-l2) var(--hi-ease) var(--hi-d-l2) both; }
  html.hi-run .hero__word--totonoeru { animation: hi-fade var(--hi-t-l3) var(--hi-ease) var(--hi-d-l3) both; }
  /* 地域・対応方法（サービス情報）：サブコピー（ld）とボタン（b1）の中間で立ち上げる（順序：メイン→サブ→地域・対応方法→CTA） */
  html.hi-run .hero__area { animation: hi-rise var(--hi-t-ld) var(--hi-ease) calc((var(--hi-d-ld) + var(--hi-d-b1)) / 2) both; }
  html.hi-run .hero__lead-group { animation: hi-rise var(--hi-t-ld) var(--hi-ease) var(--hi-d-ld) both; }
  html.hi-run .hero__actions { visibility: visible; }
  html.hi-run .hero__actions .btn--primary { animation: hi-rise var(--hi-t-b1) var(--hi-ease) var(--hi-d-b1) both; }
  html.hi-run .hero__actions .btn--outline { animation: hi-rise var(--hi-t-b2) var(--hi-ease) var(--hi-d-b2) both; }

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