/* ==========================================================
   Motion teaser preview loop (front-page.php #motion-teaser)
   テーマ直下に配置し、functions.phpから is_front_page() 時のみ
   enqueueしてください
   ========================================================== */

.motion-preview-loop{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:28px;
  margin:0 0 40px;
}

.motion-preview-loop .mp-item{
  display:inline-block;
  width:36px;
  height:36px;
  border-radius:9px;
  background:#d98b93; /* サイトのピンク系カラーに合わせて調整可 */
}

.motion-preview-loop .mp-bounce{
  animation:mp-bounce 1.6s ease-in-out infinite;
}
@keyframes mp-bounce{
  0%, 100%{ transform:translateY(0); opacity:.55; }
  50%{ transform:translateY(-10px); opacity:1; }
}

.motion-preview-loop .mp-spin{
  border-radius:50%;
  animation:mp-spin 2.4s linear infinite;
}
@keyframes mp-spin{
  0%{ transform:rotate(0deg) scale(.9); opacity:.6; }
  50%{ transform:rotate(180deg) scale(1.05); opacity:1; }
  100%{ transform:rotate(360deg) scale(.9); opacity:.6; }
}

.motion-preview-loop .mp-pulse{
  animation:mp-pulse 1.8s ease-in-out infinite;
}
@keyframes mp-pulse{
  0%, 100%{ transform:scale(.75); opacity:.5; }
  50%{ transform:scale(1); opacity:1; }
}

@media (prefers-reduced-motion: reduce){
  .motion-preview-loop .mp-item{ animation:none; opacity:1; }
}