/* =========================================================================
   recruit-motion.css — 採用ページ専用の演出
   相方は assets/recruit-motion.js。読むのは recruit/index.html だけ。

   ■ 軸にしたモチーフは「線が伸びる」。
   バラバラの飛び道具を並べると賑やかになって高級感が壊れる（規約4）。
   フロー・数字・写真を、同じ「金の細い線が引かれていく」感覚で通す。

   ■ すべて html.motion 配下に書く。
   .motion は motion.js が GSAP の起動に成功したときだけ付く。
   付かない環境（JS無効・GSAP読み込み失敗）では、このファイルの指定は
   1つも効かず、既存の見た目のまま出る。
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. ページヒーローの巨大英字 "RECRUIT"

   .page-hero::before（evmel.css 816行）は擬似要素なので JS から直接
   触れない。親に書いた CSS 変数を読ませてスクロールで流す。
   ------------------------------------------------------------------------- */
html.motion .page-hero { --ph-x: 0px; }

html.motion .page-hero::before {
  transform: translateY(-50%) translateX(var(--ph-x));
  will-change: transform;
}

/* -------------------------------------------------------------------------
   2. フローを「伸びる線」にする（1日の流れ／採用の流れ）

   evmel.css は .flow-arrow に「→」を入れているが、矢印が最初から全部
   見えていると「もう出来上がっている図」に見える。
   スクロールに追いつく形で線が引かれると、順番に進む話だと伝わる。
   ------------------------------------------------------------------------- */
html.motion .recruit-flow .flow-arrow {
  font-size: 0;                 /* 「→」の文字を消す。装飾なので情報は失われない */
  position: relative;
  min-width: 56px;
  padding: 0;
  align-self: center;
}

html.motion .recruit-flow .flow-arrow::after {
  content: "";
  position: absolute;
  left: 10px; right: 10px; top: 50%;
  height: 1px;
  background: var(--gold);
  transform: scaleX(var(--fl, 0));
  transform-origin: left center;
  will-change: transform;
}

/* 線が到達したステップだけ灯す */
html.motion .recruit-flow .flow-step {
  border-color: rgba(201, 168, 76, 0.12);
  transition: border-color 0.6s var(--ease-smooth);
}
html.motion .recruit-flow .flow-step.lit {
  border-color: var(--gold-border);
}
html.motion .recruit-flow .flow-num {
  color: rgba(201, 168, 76, 0.35);
  transition: color 0.6s var(--ease-smooth);
}
html.motion .recruit-flow .flow-step.lit .flow-num {
  color: var(--gold);
}

/* モバイルは縦並び（evmel.css 2013行）。線も縦にする。
   既存の .flow-arrow{transform:rotate(90deg)} は箱ごと回してしまい
   幅と高さの指定が噛み合わないので、ここで打ち消して縦線を直接描く。 */
@media (max-width: 600px) {
  html.motion .recruit-flow .flow-arrow {
    transform: none;
    min-width: 0;
    width: 1px;
    min-height: 34px;
    margin: 0 auto;
  }
  html.motion .recruit-flow .flow-arrow::after {
    left: 0; right: auto; top: 0; bottom: 0;
    width: 1px; height: auto;
    transform: scaleY(var(--fl, 0));
    transform-origin: top center;
  }
}

/* -------------------------------------------------------------------------
   3. Real Voice の数字

   ½ / ×2.25 / ×4.5 はこのページで一番言いたい数字。
   1つずつ間を置いて立ち上げ、下に金の線を引いて着地させる。
   ------------------------------------------------------------------------- */
html.motion .evmel-stat { position: relative; }

html.motion .evmel-stat::after {
  content: "";
  position: absolute;
  left: 12%; right: 12%;
  bottom: -18px;
  height: 1px;
  background: var(--gold-border);
  transform: scaleX(var(--sl, 0));
  transform-origin: center;
}

html.motion .evmel-stat-num {
  will-change: transform, opacity;
}

/* -------------------------------------------------------------------------
   4. 写真のパララックス

   .px-frame（motion.css）を使うと border と角丸まで持っていかれるので、
   このページの既存の枠を保ったまま中身だけ動かせる薄い版を用意する。
   ------------------------------------------------------------------------- */
/* 🚨 クリップする箱は写真そのものに被せた内側のラッパー（.rc-px）にする。
   .evmel-msg-photo に直接 overflow:hidden を付けると、枠の下へはみ出して
   置いてある .evmel-msg-cap（「代表・盛原 海登」）が切れて消える。
   ラッパーを1枚挟めば、キャプションは外側に残る。 */
html.motion .rc-px {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: 3px;
}

/* 高さは % で決めない。親の高さが画像で決まるので循環する。
   拡大しておいて、その余剰の中で動かす（transform はレイアウトに影響しない）。 */
html.motion .rc-px > img {
  display: block;
  width: 100%;
  transform: scale(1.24);       /* recruit-motion.js の PX_SCALE と必ず揃える */
  will-change: transform;
}

/* 代表写真：枠線はラッパーへ移す（画像に付けたままだと一緒に動いて切れる） */
html.motion .evmel-msg-photo .rc-px { border: 1px solid var(--gold-border); }
html.motion .evmel-msg-photo .rc-px > img { border: 0; border-radius: 0; }

/* -------------------------------------------------------------------------
   4-b. 代表写真を「下から開く」

   この区画はスクロール連動（パララックス）しか無く、スクロールを止めると
   何も起きないため「動いていない」と見える。到着した瞬間の"出来事"を作る。

   --rv は上からの切り取り量。100% で全部隠れ、0% で全部見える。
   ------------------------------------------------------------------------- */
html.motion .evmel-msg-photo { --rv: 0%; }

html.motion .evmel-msg-photo .rc-px {
  clip-path: inset(var(--rv) 0 0 0);
}

/* 開く縁を金の線が走る。
   🚨 線は .rc-px の中に置いてはいけない（clip-path で一緒に切られて消える）。
   切り取られない親（.evmel-msg-photo）に置く。 */
html.motion .evmel-msg-photo::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: var(--rv);
  height: 1px;
  background: var(--gold-light);
  opacity: var(--rvo, 0);
  pointer-events: none;
}

/* 🚨 .evmel-shot img の transition:transform .8s（recruit/index.html のインラインCSS）は、
   毎フレーム transform を書き換えるスクラブと衝突して動きが遅れて濁る。
   hover の scale(1.04) も GSAP と同じプロパティの奪い合いになる。
   パララックスを付けた写真では、transition も hover も明るさで返す。 */
html.motion .evmel-shot .rc-px > img { transition: filter 0.6s var(--ease-smooth); }
html.motion .evmel-shot:hover .rc-px > img { filter: brightness(1.12); }

/* -------------------------------------------------------------------------
   5. Why カードの番号
   スクロールに合わせてゆっくり上下し、面に奥行きを出す。
   ------------------------------------------------------------------------- */
html.motion .value-card .value-num { will-change: transform; }

/* -------------------------------------------------------------------------
   6. 「EVMELの、一週間」— 動画の脇の3点

   li::before の金の短い線（7px）を、行が出るのに合わせて左から引く。
   ページ全体の「線が引かれる」モチーフをここでも使う。
   ------------------------------------------------------------------------- */
html.motion .evmel-movie-points li::before {
  transform: scaleX(var(--pl, 0));
  transform-origin: left center;
}

/* -------------------------------------------------------------------------
   7. 募集職種のカード

   長い dl が並ぶだけの区画。左端に金の線を上から引いて、
   「ここから読む」という視線の起点を作る。
   ------------------------------------------------------------------------- */
html.motion .job-card { position: relative; }

html.motion .job-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 1px;
  background: var(--gold);
  transform: scaleY(var(--jl, 0));
  transform-origin: center top;
}

/* -------------------------------------------------------------------------
   8. CTA のボタン

   周りが完全に静止している区画。ボタンの輪郭を上→右→下→左と描く。
   （border を直接アニメーションできないので、擬似要素の2本で代用する）
   ------------------------------------------------------------------------- */
html.motion .cta .btn-gold { position: relative; }

html.motion .cta .btn-gold::after {
  content: "";
  position: absolute;
  left: -1px; right: -1px; bottom: -1px;
  height: 1px;
  background: var(--gold-light);
  transform: scaleX(var(--cl, 0));
  transform-origin: left center;
  pointer-events: none;
}

/* -------------------------------------------------------------------------
   9. reduced-motion — 静止した最終状態に固定する（消さない）
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html.motion .page-hero::before { transform: translateY(-50%); }

  html.motion .recruit-flow .flow-arrow { font-size: 18px; }
  html.motion .recruit-flow .flow-arrow::after { display: none; }
  html.motion .recruit-flow .flow-step { border-color: var(--gold-border); }
  html.motion .recruit-flow .flow-num { color: var(--gold); }

  html.motion .evmel-stat::after { transform: scaleX(1); }
  html.motion .evmel-stat-num { transform: none !important; opacity: 1 !important; }

  html.motion .rc-px > img { transform: none !important; }
  html.motion .value-card .value-num { transform: none !important; }

  html.motion .evmel-msg-photo .rc-px { clip-path: none; }
  html.motion .evmel-msg-photo::after { display: none; }

  html.motion .evmel-movie-points li::before { transform: scaleX(1); }
  html.motion .job-card::before { transform: scaleY(1); }
  html.motion .cta .btn-gold::after { transform: scaleX(1); }
}