/* slide.css - 画像比較スライダー追加スタイル */

/* タッチデバイス最適化 */
.image-compare {
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

/* キーボード操作時のフォーカス表示 */
.image-compare:focus-visible {
  outline: 3px solid var(--acc, #ff6b35);
  outline-offset: 3px;
}

/* ハンドルアニメーション */
@keyframes pulseHandle {
  0%, 100% { box-shadow: 0 6px 20px rgba(0,0,0,0.3), 0 0 0 3px var(--acc, #ff6b35); }
  50% { box-shadow: 0 6px 20px rgba(0,0,0,0.3), 0 0 0 6px rgba(255,107,53,0.4); }
}
.image-compare:not(.active) .ic-handle {
  animation: pulseHandle 2s ease-in-out infinite;
}
.image-compare.active .ic-handle {
  animation: none;
}