/* =============================================================
   信和建設 — 余白 / Margin Motion  |  margin-motion.css
   margin.css の後に読み込む「Motion層」。フェーズ1: パララックス。
   html.m-motion は margin-motion.js が付与するゲート
   （JS無効・reduced-motion 時は付かない＝この層は不活性）。
   ============================================================= */

/* パララックス対象は必ず自身の箱で切り抜く（端切れ・はみ出し防止） */
html.m-motion [data-m-parallax]{
  overflow: hidden;
}

/* =============================================================
   退場幕（.m-exit-veil）— margin.css .m-page-veil の逆再生
   内部リンククリック時に margin-motion.js が body 直下に生成する。
   同じ135度ソフトエッジマスクを使い、光が右下から戻って
   全面を覆う＝入場（m-page-veil-out）の逆方向にマスクを動かす。
   ============================================================= */
.m-exit-veil {
  position: fixed;
  inset: 0;
  z-index: 9600;
  pointer-events: none;
  background: #fff;
  -webkit-mask-image: linear-gradient(
    135deg,
    transparent,
    transparent 30%,
    rgba(0, 0, 0, 0.08) 34%,
    rgba(0, 0, 0, 0.32) 38%,
    rgba(0, 0, 0, 0.5) 40%,
    rgba(0, 0, 0, 0.68) 42%,
    rgba(0, 0, 0, 0.92) 46%,
    #000 50%,
    #000
  );
  mask-image: linear-gradient(
    135deg,
    transparent,
    transparent 30%,
    rgba(0, 0, 0, 0.08) 34%,
    rgba(0, 0, 0, 0.32) 38%,
    rgba(0, 0, 0, 0.5) 40%,
    rgba(0, 0, 0, 0.68) 42%,
    rgba(0, 0, 0, 0.92) 46%,
    #000 50%,
    #000
  );
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 220% 220%;
  mask-size: 220% 220%;
  -webkit-mask-position: 0% 0%;
  mask-position: 0% 0%;
}
.m-exit-veil.is-closing {
  animation: m-exit-veil-in 0.9s cubic-bezier(0.645, 0.045, 0.355, 1) both 1;
}
@keyframes m-exit-veil-in {
  from {
    -webkit-mask-position: 0% 0%;
    mask-position: 0% 0%;
  }
  to {
    -webkit-mask-position: 100% 100%;
    mask-position: 100% 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .m-exit-veil {
    display: none;
  }
}

/* =============================================================
   ヒーロースライドショー（margin-motion.js が .hero-visual を複製）
   クロスフェード 1.9s ＋ 表示中はゆっくりズーム収束（Ken Burns）
   ============================================================= */
@media (prefers-reduced-motion: no-preference) {
  .m-hero .m-hero-slide{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 56%;
    opacity: 0;
    transform: scale(1.1);
    transition: opacity 1.9s ease, transform 8.5s linear;
    will-change: opacity, transform;
  }
  .m-hero .m-hero-slide.is-m-slide-active{
    opacity: 1;
    transform: scale(1.02);
  }

  /* =============================================================
     opening（トップ Philosophy）— 単調なフェードから
     「縦書きの幕開け＋時間差＋呼吸する背景」へ
     ============================================================= */
  /* 縦書きコピー: 上から下へ静かに幕が開く（縦書きの読み順に沿う）
     ※clip-path は必ず「子」に掛ける。観測対象（data-reveal 要素）自身を
       刈り込むと IntersectionObserver の交差率が常に 0 になり、
       is-visible が永遠に付かないデッドロックになる（実測で確認済み） */
  .m-site .opening-vertical-copy[data-reveal]{
    transform: none;
    filter: none;
    transition: opacity 0.6s ease;
  }
  .m-site .opening-vertical-copy[data-reveal].is-visible{
    transform: none;
    filter: none;
  }
  .m-site .opening-vertical-copy[data-reveal] > *{
    opacity: 0;
    transform: none;
    filter: blur(14px);
    transition: opacity 1.4s var(--m-ease) 0.1s, filter 1.4s var(--m-ease) 0.1s;
  }
  .m-site .opening-vertical-copy[data-reveal] > h2{
    transition-delay: 0.3s;
  }
  .m-site .opening-vertical-copy[data-reveal].is-visible > *{
    opacity: 1;
    transform: none;
    filter: blur(0);
  }
  /* 見出しの字間がゆっくり詰まりながら定位置に収まる */
  .m-site .opening-vertical-copy h2{
    transition: letter-spacing 2.6s cubic-bezier(.22,.61,.36,1);
  }
  .m-site .opening-vertical-copy[data-reveal]:not(.is-visible) h2{
    letter-spacing: 0.24em;
  }
  /* 英字ラベル → 本文 → リンク の時間差リビール */
  .m-site .opening-silent-copy[data-reveal]{
    transform: none;
    filter: none;
  }
  .m-site .opening-silent-copy[data-reveal] > *{
    opacity: 0;
    transform: none;
    filter: blur(14px);
    transition: opacity 1.4s var(--m-ease), filter 1.4s var(--m-ease);
  }
  .m-site .opening-silent-copy[data-reveal].is-visible > *{
    opacity: 1;
    transform: none;
    filter: blur(0);
  }
  .m-site .opening-silent-copy[data-reveal] > *:nth-child(2){ transition-delay: 0.18s; }
  .m-site .opening-silent-copy[data-reveal] > *:nth-child(3){ transition-delay: 0.36s; }
  /* 背景動画のゆっくりした呼吸 */
  .m-site .opening-concept-video{
    animation: m-breathe 26s ease-in-out infinite alternate;
  }
}
@keyframes m-breathe{
  from{ transform: scale(1); }
  to{ transform: scale(1.06); }
}

/* =============================================================
   ヒーローKVの初回演出 —「光や空気が抜ける」イメージ
   -------------------------------------------------------------
   黒からのマスク開帳ではなく、白飛びした光とぼかしがすっと引いて
   像を結ぶリビール。終端の filter / transform は定常値
   （margin.css の saturate(.95) brightness(.92) contrast(1.03) と
   .is-ready の scale(1.015)）に一致させ、切り替わりを残さない。
   ============================================================= */
@media (prefers-reduced-motion: no-preference) {
  /* ローディング明け（html.m-intro-done）を合図に開始するイベント連鎖。
     JSが死んで m-intro-done が立たない場合は演出なしで像が普通に見える。
     ※対象は「最初の1枚だけ」（複製スライドに当てない）・fill は backwards
       （終了後は通常のカスケードに返す。both だと opacity/transform が
       固定され、スライドショーのクロスフェードが死ぬ） */
  html.m-intro-done .m-hero img.hero-visual:first-of-type{
    animation: m-hero-kv-air 2.6s cubic-bezier(0.215, 0.61, 0.355, 1) backwards 1;
  }
  /* transform は含めない（ズームは開始時からスライドショーの
     Ken Burns に一任。アニメ終端で transform を返すと、その瞬間の
     ズーム位置へスナップして「かくっ」となるため） */
  @keyframes m-hero-kv-air {
    0% {
      opacity: 0;
      filter: saturate(0.7) brightness(1.9) contrast(0.98) blur(18px);
    }
    30% {
      opacity: 1;
      filter: saturate(0.8) brightness(1.5) contrast(1) blur(10px);
    }
    100% {
      opacity: 1;
      filter: saturate(0.95) brightness(0.92) contrast(1.03) blur(0);
    }
  }

  /* 白い光のレイヤーが、135度の柔らかい斜めエッジで
     「左上 → 右下」へ流れて抜けていく。マスクを2軸で移動させ、
     透明域（光が去った場所）が左上から侵入する。
     テキスト（.hero-vertical, z:3）より上・ヘッダーより下に敷き、
     光が通り過ぎた場所から像と文字が現れる。 */
  html.m-intro-done .m-hero::after{
    content: "";
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    background: #fff;
    -webkit-mask-image: linear-gradient(
      135deg,
      transparent,
      transparent 40%,
      rgba(0, 0, 0, 0.08) 44%,
      rgba(0, 0, 0, 0.32) 48%,
      rgba(0, 0, 0, 0.5) 50%,
      rgba(0, 0, 0, 0.68) 52%,
      rgba(0, 0, 0, 0.92) 56%,
      #000 60%,
      #000
    );
    mask-image: linear-gradient(
      135deg,
      transparent,
      transparent 40%,
      rgba(0, 0, 0, 0.08) 44%,
      rgba(0, 0, 0, 0.32) 48%,
      rgba(0, 0, 0, 0.5) 50%,
      rgba(0, 0, 0, 0.68) 52%,
      rgba(0, 0, 0, 0.92) 56%,
      #000 60%,
      #000
    );
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 220% 220%;
    mask-size: 220% 220%;
    animation: m-hero-kv-light 2.4s cubic-bezier(0.645, 0.045, 0.355, 1) 0.15s both 1;
  }
  @keyframes m-hero-kv-light {
    from {
      opacity: 1;
      -webkit-mask-position: 100% 100%;
      mask-position: 100% 100%; /* 白面（マスクの黒域）が全面を覆う */
    }
    82% {
      opacity: 1;
    }
    to {
      /* 終端で完全に消す。マスク終端(0%0%)は右下に薄い白が残るため */
      opacity: 0;
      -webkit-mask-position: 0% 0%;
      mask-position: 0% 0%; /* エッジが左上→右下へ走り、光が去る */
    }
  }

  /* ---- KVテキスト: 光が抜け切ってから立ち上がる ----
     renewal.css の is-ready 演出（blurフェード）を無効化し、
     こちらで全面的に制御する。初期の隠し状態は描画前に付く
     html.m-img-reveal ゲート配下（JS死亡時は素の表示）、
     発火は html.m-intro-done（光は intro-done の 2.55s 後に抜け切る）。 */
  .m-site .hero-vertical h1,
  .m-site .hero-vertical p,
  .m-site .hero-side-copy {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
  html.m-img-reveal .m-hero .hero-vertical h1 {
    overflow: hidden;
  }
  html.m-img-reveal .m-hero .hero-vertical h1 span {
    opacity: 0;
  }
  html.m-img-reveal .m-hero .hero-vertical p,
  html.m-img-reveal .m-hero .hero-side-copy {
    opacity: 0;
  }
  /* 縦書き2列が時間差でせり上がる */
  html.m-intro-done .m-hero .hero-vertical h1 span {
    animation: m-kv-line-rise 1.6s cubic-bezier(0.165, 0.84, 0.44, 1) both;
  }
  html.m-intro-done .m-hero .hero-vertical h1 span:nth-child(1) {
    animation-delay: 2.45s;
  }
  html.m-intro-done .m-hero .hero-vertical h1 span:nth-child(2) {
    animation-delay: 2.62s;
  }
  /* 英字ラベルは字間が締まりながらフェードイン */
  html.m-intro-done .m-hero .hero-vertical p {
    animation: m-kv-label-in 1.4s cubic-bezier(0.165, 0.84, 0.44, 1) 3s both;
  }
  /* 添えコピーは最後に静かに */
  html.m-intro-done .m-hero .hero-side-copy {
    animation: m-kv-side-in 1.4s cubic-bezier(0.165, 0.84, 0.44, 1) 3.2s both;
  }
  @keyframes m-kv-line-rise {
    from {
      opacity: 0;
      filter: blur(18px);
    }
    to {
      opacity: 1;
      filter: blur(0);
    }
  }
  @keyframes m-kv-label-in {
    from {
      opacity: 0;
      filter: blur(10px);
      letter-spacing: 0.55em;
    }
    to {
      opacity: 1;
      filter: blur(0);
      letter-spacing: 0.4em;
    }
  }
  @keyframes m-kv-side-in {
    from {
      opacity: 0;
      filter: blur(12px);
    }
    to {
      opacity: 1;
      filter: blur(0);
    }
  }
}
@media (prefers-reduced-motion: reduce) {
  .m-hero img.hero-visual{
    animation: none;
  }
  .m-hero::after{
    content: none;
  }
  .m-hero .hero-vertical h1 span,
  .m-hero .hero-vertical p,
  .m-hero .hero-side-copy {
    animation: none;
    opacity: 1;
    transform: none;
  }
}