/* ==========================================================
   motion.css
   /page-motion.php 専用スタイル
   functions.php 側で is_page('motion') の時のみ読み込みます
   ========================================================== */

#motion-page{
  --bg-dark:#0c0c0d;
  --panel-dark:#151517;
  --line-dark:#2a2a2d;
  --ink:#141414;
  --demo-shape:#d98b93;
  --muted:#6f6f74;
  --hair:#e7e7e9;
  --accent:#d8a13a;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}
#motion-page *{box-sizing:border-box;}
#motion-page .motion-wrap{max-width:1120px;margin:0 auto;padding:0 24px;}
#motion-page a{text-decoration:none;}
#motion-page img{max-width:100%;display:block;}

/* ---------- PAGE HEADER ----------
   タイトル・ラベルは .wrap / .section-head / .num / .mono という
   テーマ共通クラスを使用しているため、Works等の他ページと
   自動的に同じ見た目になります（このファイルでの追加指定は不要）。
   ここでは、その下に続くリード文のみ調整します。 */
#motion-page #motion-archive{padding:64px 0 88px;}
#motion-page .motion-lead{
  color:var(--muted);font-size:14.5px;line-height:1.9;
  max-width:640px;margin:28px 0 52px;
}

/* ---------- CARD GRID ---------- */
#motion-page .motion-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap: 40px;
}
@media (max-width:760px){ #motion-page .motion-grid{grid-template-columns:1fr;} }

#motion-page .motion-card{
  background:#fff;padding:30px 30px 26px;
  border:1px solid var(--hair);border-radius:12px;
}
#motion-page .motion-card-head{
  display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;
}
#motion-page .motion-card-name{
  font-family:var(--mono);font-size:12.5px;font-weight:600;
  letter-spacing:.04em;color:var(--ink);
}
#motion-page .motion-replay{
  font-family:var(--mono);font-size:11px;color:var(--muted);
  background:none;border:1px solid var(--hair);border-radius:999px;
  padding:5px 12px;cursor:pointer;transition:border-color .2s,color .2s;
}
#motion-page .motion-replay:hover{border-color:var(--accent);color:var(--accent);}

#motion-page .motion-stage{
  height:150px;border:1px solid var(--hair);border-radius:6px;
  background:
    linear-gradient(90deg, #fafafa 1px, transparent 1px) 0 0/16px 16px,
    linear-gradient(#fafafa 1px, transparent 1px) 0 0/16px 16px,
    #fff;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;position:relative;margin-bottom:16px;
}
#motion-page .motion-stage .motion-obj{
  width:64px;height:64px;border-radius:8px;background:var(--demo-shape);
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-family:var(--mono);font-size:11px;
}
#motion-page .motion-stage .motion-obj.round{border-radius:50%;}

#motion-page .motion-card p.motion-desc{font-size:13px;line-height:1.8;color:var(--muted);margin:0;}

/* --- individual demo animations ---
   ※ transition の付け外しではなく @keyframes を使用。
   「run クラスを外す→強制リフロー→run を付け直す」だけで
   毎回確実にアニメーションが最初から再生される方式です。 */

#motion-page .motion-stage.fade .motion-obj{opacity:0;transform:translateY(16px);}
#motion-page .motion-stage.fade.run .motion-obj{animation:motion-fade .7s ease forwards;}
@keyframes motion-fade{
  from{opacity:0;transform:translateY(16px);}
  to{opacity:1;transform:translateY(0);}
}

#motion-page .motion-stage.flip .motion-obj{opacity:0;transform:rotateX(90deg);}
#motion-page .motion-stage.flip.run .motion-obj{animation:motion-flip .6s ease forwards;}
@keyframes motion-flip{
  from{opacity:0;transform:rotateX(90deg);}
  to{opacity:1;transform:rotateX(0);}
}

#motion-page .motion-stage.rotate .motion-obj{opacity:0;transform:rotate(-160deg) scale(.6);}
#motion-page .motion-stage.rotate.run .motion-obj{animation:motion-rotate .7s cubic-bezier(.2,.8,.2,1) forwards;}
@keyframes motion-rotate{
  from{opacity:0;transform:rotate(-160deg) scale(.6);}
  to{opacity:1;transform:rotate(0) scale(1);}
}

#motion-page .motion-stage.zoom .motion-obj{opacity:0;transform:scale(.2);}
#motion-page .motion-stage.zoom.run .motion-obj{animation:motion-zoom .5s cubic-bezier(.34,1.56,.64,1) forwards;}
@keyframes motion-zoom{
  from{opacity:0;transform:scale(.2);}
  to{opacity:1;transform:scale(1);}
}

#motion-page .motion-stage.text .txt{
  font-family:var(--mono);font-weight:700;font-size:15px;letter-spacing:.04em;display:flex;
}
#motion-page .motion-stage.text .txt span{opacity:0;transform:translateY(6px);}
#motion-page .motion-stage.text.run .txt span{animation:motion-text .35s ease forwards;animation-delay:var(--d,0ms);}
@keyframes motion-text{
  from{opacity:0;transform:translateY(6px);}
  to{opacity:1;transform:translateY(0);}
}

#motion-page .motion-stage.sweep .sweep-bg{
  position:absolute;inset:0;background:var(--demo-shape);
  transform:scaleX(0);transform-origin:left;
}
#motion-page .motion-stage.sweep.run .sweep-bg{animation:motion-sweep .55s cubic-bezier(.65,0,.35,1) forwards;}
@keyframes motion-sweep{
  from{transform:scaleX(0);}
  to{transform:scaleX(1);}
}
#motion-page .motion-stage.sweep .sweep-label{
  position:relative;z-index:1;color:#fff;font-family:var(--mono);font-size:12px;
  opacity:0;
}
#motion-page .motion-stage.sweep.run .sweep-label{animation:motion-sweep-label .3s ease .35s forwards;}
@keyframes motion-sweep-label{
  from{opacity:0;}
  to{opacity:1;}
}

/* ---------- CTA ---------- */
#motion-page .motion-cta{background:#3D2B36;;color:#fff;padding:88px 0;text-align:center;}
#motion-page .motion-cta .motion-eyebrow{justify-content:center;display:flex;}
#motion-page .motion-cta h2{font-size:clamp(24px,3.4vw,32px);font-weight:900;margin:0 0 16px;color:#fff;}
#motion-page .motion-cta p{color:#b7b7bb;font-size:14.5px;max-width:480px;margin:0 auto 34px;line-height:1.85;}
#motion-page .motion-cta .motion-btn{
  display:inline-block;font-family:var(--mono);font-size:13px;
  border:1px solid #d98b93;color:#d98b93;
  padding:14px 30px;border-radius:999px;transition:background .2s,color .2s;
}
#motion-page .motion-cta .motion-btn:hover{background:var(--accent);color:#141414;}

/* 補足: 本ページは「動きを見せる」ことが目的のデモページのため、
   OSの視差軽減設定に関わらず、常にアニメーションを表示します。
   （通常のサイト制作では reduced-motion への配慮を行いますが、
   このページの性質上、あえて外しています） */