.slider-container {
  position: relative;
  width: 100%;
  height: 500px;
  overflow: hidden;
  background: #000; /* 背景が透けないように */
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  
  /* デフォルトは見えない状態 */
  opacity: 0; 
  z-index: 0;
  
  /* ズームアニメーションの設定（すべてのスライドに適用できる準備） */
  transform: scale(1.15); /* 開始時のサイズ（拡大） */
}

/* --- 状態クラス --- */

/* 1. 現在表示中のスライド (最前面) */
.slide.active {
  opacity: 1;
  z-index: 2; /* 最前面 */
  
  /* 登場時のワイプアニメーション */
  animation: 
    wipeIn 1.5s cubic-bezier(0.25, 1, 0.5, 1) forwards, /* 左から右へ開く */
    zoomMove 10s linear forwards; /* 拡大から縮小へ動き続ける */
}

/* 2. 直前のスライド (背面で待機) */
.slide.previous {
  opacity: 1;
  z-index: 1; /* 新しいスライドの下に表示し続ける */
  
  /* ★重要: アニメーションを再定義せず、そのまま維持させるためには
     animationプロパティを上書きしない、あるいは同じzoomMoveを維持する必要があります。
     activeからpreviousになっても zoomMove は継続します。 */
  animation: zoomMove 10s linear forwards;
}

/* --- キーフレーム定義 --- */

/* 左から右へ画像が開く（clip-path） */
@keyframes wipeIn {
  0% {
    clip-path: inset(0 100% 0 0); /* 右側100%が隠れている状態 */
  }
  100% {
    clip-path: inset(0 0 0 0);    /* 全て表示 */
  }
}

/* 拡大→縮小のズームアニメーション */
@keyframes zoomMove {
  0% {
    transform: scale(1.15);
  }
  100% {
    transform: scale(1.0);
  }
}