/* 基本リセットとレイアウト (前回と同じ) */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: sans-serif; background-color: #fcf9f2; overflow: hidden; }
.page-container { display: flex; height: 100vh; }
.content-area { flex: 1; padding: 40px; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.slider-area { width: 300px; height: 100vh; border-left: 1px solid #ddd; background-color: #fff; }
.slider-mask { width: 100%; height: 100%; overflow: hidden; position: relative; }

/* 縦方向の無限ループ (前回と同じ) */
.infinite-slider {
  display: flex;
  flex-direction: column;
  animation: scrollUp 20s linear infinite;
}
@keyframes scrollUp {
  0% { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}
.slider-item {
  width: 100%;
  height: 250px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #eee;
  padding: 20px;
}
.caption { margin-top: 10px; font-size: 12px; color: #666; font-weight: bold; }

/* =========================================
   枠の共通設定
========================================= */
.sprite-animation {
  width: 200px;
  height: 150px;
  background-color: #f0f0f0;
  border: 2px solid #ccc;
  position: relative;
  overflow: hidden;
  border-radius: 8px;
}

/* =========================================
   1. パラパラ漫画風（コマ送りで色が切り替わる）
   CSSのstepsを模倣し、中間色を挟まずにパッパッと色を変えます。
========================================= */
.frame1 {
  animation: colorJump 1s infinite;
}
@keyframes colorJump {
  0%, 24.9% { background-color: #ffb3ba; } /* ピンク */
  25%, 49.9% { background-color: #ffdfba; } /* オレンジ */
  50%, 74.9% { background-color: #ffffba; } /* 黄色 */
  75%, 100% { background-color: #baffc9; } /* 緑 */
}

/* =========================================
   2. 描画風（何もないところから線が伸びて完成する）
   疑似要素の幅を0から100%に伸ばして「描いている」ように見せます。
========================================= */
.frame2::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 10%;
  width: 80%;
  height: 8px;
  background-color: #555;
  border-radius: 4px;
  transform-origin: left;
  animation: drawLine 2s ease-in-out infinite;
}
@keyframes drawLine {
  0% { transform: scaleX(0) translateY(-50%); }
  50%, 100% { transform: scaleX(1) translateY(-50%); }
}

/* =========================================
   3. コマ送り移動（カクカクと右へ進む）
   steps() を使い、滑らかではなく「コマ送り」で要素を移動させます。
========================================= */
.frame3::after {
  content: "🐈"; /* 猫の絵文字で代用 */
  font-size: 40px;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  /* 5つのステップ（コマ）に分けて右へ移動 */
  animation: stepMove 2s steps(5) infinite;
}
@keyframes stepMove {
  0% { left: 10%; }
  100% { left: 80%; }
}

/* =========================================
   4. モーショングラフィック風（図形が滑らかに変化）
   SVGアニメーションやLottieでよくある、滑らかな図形変化の代替です。
========================================= */
.frame4 {
  display: flex;
  align-items: center;
  justify-content: center;
}
.frame4::after {
  content: "";
  width: 50px;
  height: 50px;
  background-color: #bae1ff;
  border-radius: 50%;
  animation: smoothShape 2s ease-in-out infinite alternate;
}
@keyframes smoothShape {
  0% { 
    transform: scale(0.5) rotate(0deg); 
    border-radius: 50%; 
    background-color: #bae1ff;
  }
  100% { 
    transform: scale(1.5) rotate(90deg); 
    border-radius: 10%; 
    background-color: #baabff;
  }
}