/* ============================================================
   「ポピンズ流」モーション体系 — 単一イージング統一×マーキー2文法
   ------------------------------------------------------------
   出典: recruit.poppins.co.jp の全量解剖（2026-08-31・三工程方式初適用）。
   テーマkeyframes 7種（全数一致を作業台帳で証明済み）＋イージング4種＋
   ホバー語彙を、命名付け替え・トークン化して収録。
   使い方: poppins-aura.css の後に読み込む（同じトークンを参照）

   ■ 本家の運用哲学（実測から）
   - 動きの9割を「1つのイージング」で通す（44箇所で同一ベジェ）。
     多彩な動きより「同じ呼吸」で揃えるのがポピンズらしさの正体
   - 標準デュレーション .5s（39箇所）・速い系 .3s
   - keyframesはマーキー系6種+Ken Burns 1種だけ。発火系はtransitionで賄う
============================================================ */

:root{
  /* --- 本家の署名イージング（頻度順・トークン化） --- */
  --pp-ease:       cubic-bezier(.44,.14,.09,1.02);   /* 署名。44箇所。軽いオーバーシュート */
  --pp-ease-pop:   cubic-bezier(.215,.61,.355,1);    /* easeOutCubic系。6箇所 */
  --pp-ease-calm:  cubic-bezier(.43,.23,.55,.75);    /* 等速寄り。6箇所 */
  --pp-ease-swift: cubic-bezier(.58,.12,.4,.89);     /* 立ち上がり鋭め。3箇所 */
  --pp-dur:      .5s;
  --pp-dur-fast: .3s;
}

/* ---------- 1. 全幅マーキー（デュオ・ストリップ文法） ----------
   本家new-graduateの写真帯。2本のストリップを同じ80sで流し、
   1本目だけ -40s（半周分）ずらして継ぎ目を消す。
   構造:
   <div class="pp-marquee">
     <ul class="pp-marquee__strip pp-marquee__strip--a">…写真列…</ul>
     <ul class="pp-marquee__strip pp-marquee__strip--b">…同じ写真列…</ul>
   </div> */
.pp-marquee{display:flex;overflow:clip;width:100%}
.pp-marquee__strip{display:flex;flex:none;gap:16px;width:max-content;padding-right:16px}
.pp-marquee__strip--a{animation:pp-duo-a 80s -40s linear infinite}
.pp-marquee__strip--b{animation:pp-duo-b 80s linear infinite}
@keyframes pp-duo-a{from{transform:translateX(100%)}to{transform:translateX(-100%)}}
@keyframes pp-duo-b{from{transform:translateX(0)}to{transform:translateX(-200%)}}

/* ---------- 2. 縦横マーキー4方向（タイル柱の無限流し） ----------
   本家slideAnimation01-04を移植。⚠台帳検査の事実: 本家では「定義のみで
   全CSS/HTML横断grepしても使用ゼロ」の死んだkeyframesだった（作りかけの名残）。
   構造自体は有用なので蘇生収録。使う時は隣り合う柱を逆方向の対で。
   2周分複製が必須（translateXは-100%までしか動かないため） */
.pp-flow{display:flex;gap:16px;width:max-content;animation:pp-flow-x 40s linear infinite}
.pp-flow--rev{animation-name:pp-flow-x-rev}
.pp-flow--v{flex-direction:column;height:max-content;animation-name:pp-flow-y}
.pp-flow--v-rev{flex-direction:column;height:max-content;animation-name:pp-flow-y-rev}
@keyframes pp-flow-x    {from{transform:translateX(0)}to{transform:translateX(-100%)}}
@keyframes pp-flow-x-rev{from{transform:translateX(-100%)}to{transform:translateX(0)}}
@keyframes pp-flow-y    {from{transform:translateY(0)}to{transform:translateY(-100%)}}
@keyframes pp-flow-y-rev{from{transform:translateY(-100%)}to{transform:translateY(0)}}

/* ---------- 3. Ken Burns（写真の呼吸） ----------
   本家imgAnimation: scale(1.2→1) 25s linear alternate infinite。
   一覧サムネやヒーロー写真に。transform限定なので常時アニメ規約に適合 */
.pp-kenburns{animation:pp-kenburns 25s linear infinite alternate}
@keyframes pp-kenburns{from{transform:scale(1.2)}to{transform:scale(1)}}

/* ---------- 4. 発火系リビール（本家はkeyframesでなくtransition運用） ----------
   .is-in を付与して発火（IntersectionObserver側は自前実装）。
   署名イージングのオーバーシュートが「ぽわん」と着地する */
.pp-reveal{opacity:0;transform:translateY(24px);transition:opacity var(--pp-dur) var(--pp-ease),transform var(--pp-dur) var(--pp-ease)}
.pp-reveal.is-in{opacity:1;transform:none}
.pp-reveal--d1{transition-delay:.08s}
.pp-reveal--d2{transition-delay:.16s}
.pp-reveal--d3{transition-delay:.24s}

/* ---------- 5. ホバー語彙 ---------- */
/* 5a. ピルの浮き（標準.5s×署名イージング） */
.pp-hover-lift{transition:transform var(--pp-dur) var(--pp-ease),box-shadow var(--pp-dur) var(--pp-ease)}
.pp-hover-lift:hover{transform:translateY(-3px)}
/* 5b. 色スワップ（Q&A型: 地色⇄文字色が入れ替わる） */
.pp-hover-swap{transition:background-color var(--pp-dur-fast) var(--pp-ease-calm),color var(--pp-dur-fast) var(--pp-ease-calm)}
.pp-hover-swap:hover{background-color:var(--pp-ink);color:var(--pp-white)}
/* 5c. 矢印円のスライド（ピル内の矢印が右へ逃げて戻る） */
.pp-pill:hover .pp-pill__arrow{animation:pp-arrow-hop var(--pp-dur) var(--pp-ease)}
@keyframes pp-arrow-hop{0%{transform:translateX(0)}49%{transform:translateX(120%);opacity:0}50%{transform:translateX(-120%);opacity:0}100%{transform:translateX(0);opacity:1}}
/* 5d. 写真ズーム（タイル内画像がゆっくり寄る） */
.pp-hover-zoom img{transition:transform var(--pp-dur) var(--pp-ease)}
.pp-hover-zoom:hover img{transform:scale(1.06)}

/* ---------- 6. オーラの漂い（任意・transformのみ＝規約適合） ----------
   ⚠ blur値の常時アニメは禁止。動かすのは位置(transform)だけ */
.pp-aura--drift .pp-aura__orb{animation:pp-drift 26s var(--pp-ease-calm) infinite alternate}
.pp-aura--drift .pp-aura__orb:nth-child(2){animation-duration:31s;animation-delay:-9s}
.pp-aura--drift .pp-aura__orb:nth-child(3){animation-duration:37s;animation-delay:-17s}
@keyframes pp-drift{from{transform:translate(0,0)}to{transform:translate(4%,-6%)}}

/* ---------- 7. 初回ロード3段発火（本家js-load/02/03） ----------
   ページ表示直後に 500/800/1100ms の3段で .is-in を付与（JS側は
   setTimeout3本だけ。jQuery不要）。スクロール発火(.pp-reveal)と同じ見た目 */
.pp-load{opacity:0;transform:translateY(24px);transition:opacity var(--pp-dur) var(--pp-ease),transform var(--pp-dur) var(--pp-ease)}
.pp-load.is-in{opacity:1;transform:none}
/* 発火側の最小実装例:
   [500,800,1100].forEach((t,i)=>setTimeout(()=>document
     .querySelectorAll('.pp-load[data-step="'+(i+1)+'"]')
     .forEach(el=>el.classList.add('is-in')),t)); */

/* ---------- 停止保証 ---------- */
@media (prefers-reduced-motion:reduce){
  .pp-marquee__strip,.pp-flow,.pp-kenburns,.pp-aura--drift .pp-aura__orb{animation:none}
  .pp-reveal,.pp-load{opacity:1;transform:none;transition:none}
  .pp-hover-lift,.pp-hover-swap,.pp-hover-zoom img{transition:none}
}