@charset "utf-8";
/* ============================================================
   動き
   合同会社ElevenPeat コーポレートサイト
   規範: ../../コンテンツ演出設計.md
   ------------------------------------------------------------
   🔴 ここに書く値は §1 の5つだけ。新しい長さ・イージングを作らない。
      参考にした meson.tokyo が破綻していない理由は、
      使っている数値が異常に少ないことだった。
   ============================================================ */

/* ---------- 1. トークン（これ以外を作らない） ---------- */
:root{
  --ease-in : cubic-bezier(.25,.46,.45,.94);  /* 出現。参考サイトと同値 */
  --dur-in  : .8s;    /* 出現。これ以外の長さを作らない */
  --dur-ui  : .2s;    /* ホバー・フォーカス。これ以外の長さを作らない */
  --rise    : 30px;   /* 下から上がる距離。参考サイトと同値 */
  --stagger : .09s;   /* 1つあたりの遅れ */
}

/* ---------- 2. 出現 ----------
   🔴 隠すのは `.js` が付いているときだけ。
      無条件に opacity:0 にすると、JS が落ちた環境で
      ページが真っ白になる（IntersectionObserver が来ないので永遠に出ない）。 */
.js .rv{
  opacity:0;
  transform:translateY(var(--rise));
  transition:opacity var(--dur-in) var(--ease-in),
             transform var(--dur-in) var(--ease-in);
  /* 🔴 遅れは 8 個目で頭打ち。19枚を素直にずらすと最後が 1.7 秒後になり、
     演出ではなく待ち時間になる。 */
  transition-delay:calc(min(var(--i,0), 8) * var(--stagger));
}
.js .rv.is-in{ opacity:1; transform:none; }

/* ---------- 3. 動きに酔う人を弾かない ----------
   出現も見せ場も止めて、初めから最終状態で描く。 */
@media (prefers-reduced-motion:reduce){
  .js .rv{ opacity:1; transform:none; transition:none; }
}

/* ---------- 4. 見せ場1：進め方に線が引かれる ----------
   「順を追って進める」という文言に「順に引かれる線」を当てる。
   装飾ではなく説明にするのが狙い。 */
.process{ position:relative; }
.process__track{
  position:absolute; left:0; top:0; height:2px; width:100%;
  background:var(--accent);
  transform-origin:left center;
  /* 🔴 width ではなく transform を動かす。width を動かすと毎フレーム再レイアウトが走る */
  transition:transform 1.2s var(--ease-in);
}
/* 🔴 隠すのは `.js` が付いているときだけ（§2 と同じ理由）。
   無条件に scaleX(0) にすると、JS が落ちた環境で線が永久に出ない。 */
.js .process__track{ transform:scaleX(0); }
.js .process.is-in .process__track{ transform:scaleX(1); }

/* 線が通り過ぎた順に STEP 番号が点灯する。
   🔴 白地のままのセクションなので、点灯色は --accent-tx（#6B6C13）。
      生の黄（#CDCF2B）を白地の文字色にすると 1.7:1 で規範を破る。 */
.process .cell__no{ transition:color var(--dur-in) var(--ease-in); }
/* 遅延は Task 2 で各セルに振った --i から出す。
   nth-child を4本並べると同じ宣言の写経になるうえ、ステップが増減すると壊れる。
   線は 1.2s で引かれるので、4等分に近い .3s 刻みで番号が追いかける。 */
.js .process.is-in .cell__no{
  color:var(--accent-tx);
  transition-delay:calc(.15s + var(--i,0) * .3s);
}

/* SP では .grid が1列に積まれる（style.css §16-1）。線も縦に落とす */
@media (max-width:767.98px){
  .process__track{
    width:2px; height:100%; top:0; left:0;
    transform-origin:top center;
  }
  .js .process__track{ transform:scaleY(0); }
  .js .process.is-in .process__track{ transform:scaleY(1); }
  .js .process .grid{ margin-left:14px; }
}

@media (prefers-reduced-motion:reduce){
  /* 🔴 `.js .process__track`（クラス2つ）が §4 で scaleX(0)/scaleY(0) を持つため、
     ここも同じ詳細度で書かないと reduced-motion 下で .is-in が付くまで線が隠れたまま
     になる（§5 の `.js .cards .card.rv` と同じ理由）。 */
  .js .process__track{ transform:none; transition:none; }
  .process .cell__no{ transition:none; }
}

/* ---------- 5. 見せ場2：実績カードが奥から起き上がる ----------
   参考サイトの3Dの質感はここで借りる。
   🔴 横流し（マーキー）はやらない。ピートのカードは「課題／やったこと／結果」の
      読ませる文章（1枚200〜400字）で、流すと読めなくなる。 */
/* 🔴 overflow-x:clip は Task 6 で追加。perspective + rotateX の3D投影は、
   出現前（.rv だけ・.is-in が付く前）の状態で要素の見た目のバウンディングボックスが
   数px にじみ、320px 幅では左右の余白が薄く viewport 外へ横スクロールが出ていた
   （実測: /works/ 320px で scrollW 307 / clientW 305）。.cards 自身でクリップして防ぐ。
   .cards はこの実績カード（3D起き上がり演出）専用のクラスで他ページでは使わないため、
   他の見た目への影響は無い。
   🔴 overflow:hidden ではなく overflow-x:clip にする。hidden は縦横の両軸を切るため、
   出現前・出現途中のカード（translateY(30px) で下に張り出す）の下端が最大 505px
   クリップされていた（レビュー指摘・320px 幅で実測）。止めたいのは横方向の2pxだけ。
   overflow-x:hidden も不可（もう一方の軸が auto に落ちて縦スクロール枠ができる）。
   clip なら overflow-y:visible を保ったまま横だけ切れる。 */
.cards{ perspective:1200px; overflow-x:clip; }
.js .cards .card.rv{ transform:translateY(var(--rise)) rotateX(6deg); transform-origin:center top; }
.js .cards .card.rv.is-in{ transform:none; }

/* 🔴 Task 6 で追加。`.js .cards .card.rv`（クラス4つ）は §3 の reduced-motion リセット
   `.js .rv{transform:none}`（クラス2つ）より詳細度が高く、reduced-motion でも
   is-in が付くまで translateY+rotateX が残ったままだった
   （実測: /works/ で未 is-in の19枚すべてが reduced-motion 下でも傾いたまま）。
   同じ詳細度でここに書き、ソース順で後勝ちさせて必ずリセットする。 */
@media (prefers-reduced-motion:reduce){
  .js .cards .card.rv{ transform:none; }
}