/* ==========================================================================
   アニメーション

   Figmaの注記より
     ・「空間に〜」「未来へ〜」はマスク処理で文字が少しずつ見えてくる
       （参考図では文字の途中でスパッと切れている＝ワイプ）
     ・各ページの大見出しは下からフェードアップ＋マスク処理
       （英字の下部が少し切れている感じ）
     ・写真はフェードアップ＋パララックス
   参考サイト: リアルゲイト（realgate.jp）

   画面に入ったら JS が .is-in を付ける。

   ■ transition ではなく @keyframes を使っている理由
     transition は「変化前の値が一度描画されていること」が再生条件になる。
     読み込み直後はその保証がなく、いきなり最終状態になって動きが出ないことがある。
     animation ならクラスが付いた時点で必ず最初から再生される。

   ■ .js が付いているときだけ隠す理由
     JSが無効な環境で内容が見えなくなるのを防ぐため。
     head内のインラインスクリプトで描画前に付けているので、
     一瞬見えてから消える現象も起きない。
   ========================================================================== */

/* --------------------------------------------------------------------------
   ワイプ（文字が端から少しずつ現れる）
     横書き … 左 → 右   縦書き … 上 → 下
   -------------------------------------------------------------------------- */

.js .js-wipe > * {
  display: block;
  clip-path: inset(0 100% 0 0); /* 右側を全部隠した状態 */
}

.js .js-wipe.is-in > * {
  animation: wipe-h 1.4s var(--ease) forwards;
}

.js .js-wipe--v > * {
  clip-path: inset(0 0 100% 0); /* 下側を全部隠した状態 */
}

/*
 * 縦書きは横書きより少しゆっくり動かし、最後にはっきり減速させる。
 * （デザイナー指摘：「スピード少しゆっくり。イージングで最後遅くなる」）
 * 横書きの --ease は前半でほぼ動き切る曲線なので、
 * 縦書きには終わりの減速が目で追える --ease-out-soft を使う。
 */
.js .js-wipe--v.is-in > * {
  animation: wipe-v 1.9s var(--ease-out-soft) forwards;
}

@keyframes wipe-h {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

@keyframes wipe-v {
  from { clip-path: inset(0 0 100% 0); }
  to   { clip-path: inset(0 0 0 0); }
}

/* --------------------------------------------------------------------------
   マスク処理つきの登場（文字が下からせり上がる）
   大見出しと物件名に使う
   -------------------------------------------------------------------------- */

.js-mask {
  display: block;
  overflow: hidden;
  /* 下端を1.5%詰めることで、英字のディセンダがわずかに隠れる */
  clip-path: inset(0 0 1.5% 0);
}

.js .js-mask > * {
  display: block;
  transform: translateY(110%);
}

.js .js-mask.is-in > * {
  animation: mask-up 1.1s var(--ease) forwards;
}

/* 複数行を順番に出す */
.js .js-mask:nth-of-type(2).is-in > * { animation-delay: 0.12s; }
.js .js-mask:nth-of-type(3).is-in > * { animation-delay: 0.24s; }

@keyframes mask-up {
  from { transform: translateY(110%); }
  to   { transform: translateY(0); }
}

/* --------------------------------------------------------------------------
   フェードアップ（マスクなし。写真や本文ブロック向け）
   -------------------------------------------------------------------------- */

.js .js-fade {
  opacity: 0;
  transform: translateY(40px);
}

.js .js-fade.is-in {
  animation: fade-up 1s var(--ease) forwards;
}

.js .js-fade[data-delay='1'].is-in { animation-delay: 0.15s; }
.js .js-fade[data-delay='2'].is-in { animation-delay: 0.3s; }

@keyframes fade-up {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --------------------------------------------------------------------------
   パララックス

   JSがスクロール量に応じて --parallax（-1〜1）を書き込む。
   data-parallax の値が動きの強さ（px）。
   -------------------------------------------------------------------------- */

.js-parallax {
  --parallax: 0;
  /* transform ではなく translate プロパティを使う。
     フェードアップ(.js-fade)は forwards の animation で transform を最終値に
     固定してしまうため、同じ要素に transform で書くとパララックスが打ち消される。
     translate は transform とは別のプロパティなので両立できる。 */
  translate: 0 calc(var(--parallax) * 1px);
  will-change: translate;
}

/* --------------------------------------------------------------------------
   動きを減らす設定のときは、すべて最初から見えている状態にする
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .js .js-mask > *,
  .js .js-fade {
    transform: none !important;
    opacity: 1 !important;
    animation: none !important;
  }

  .js .js-wipe > * {
    clip-path: none !important;
    animation: none !important;
  }

  .js-parallax {
    translate: none !important;
  }
}