/* ==========================================================================
   Fade-in & POP Animation Utility
   ========================================================================== */

:root {
  /* 共通設定 */
  --fade-duration: 0.8s;
  --fade-timing-smooth: cubic-bezier(0.25, 1, 0.5, 1); /* 通常のフェード用 */
  --fade-distance: 30px;

  /* NEW: POPエフェクト専用設定 */
  --pop-duration: 0.6s; /* ポップ感を出すため少しキレのある速度に */
  --pop-timing-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* 1.56がポイント。一度行き過ぎて戻る弾性 */
}

/* 共通初期設定 */
[data-fade] {
  opacity: 0;
  visibility: hidden;
  will-change: opacity, transform;
}

/* --- 既存のフェードインバリエーション --- */
[data-fade="up"], [data-fade="down"], [data-fade="left"], [data-fade="right"], [data-fade="fade"] {
  transition: opacity var(--fade-duration) var(--fade-timing-smooth),
              transform var(--fade-duration) var(--fade-timing-smooth),
              visibility var(--fade-duration) var(--fade-timing-smooth);
}

[data-fade="up"]    { transform: translateY(var(--fade-distance)); }
[data-fade="down"]  { transform: translateY(calc(var(--fade-distance) * -1)); }
[data-fade="left"]  { transform: translateX(calc(var(--fade-distance) * -1)); }
[data-fade="right"] { transform: translateX(var(--fade-distance)); }
[data-fade="fade"]  { transform: none; }

/* --- NEW: POP（バウンド飛び出し）バリエーション --- */
[data-fade="pop"] {
  transform: scale(0.7); /* 少し縮んだ状態からスタート */
  transition: opacity var(--pop-duration) var(--pop-timing-bounce),
              transform var(--pop-duration) var(--pop-timing-bounce),
              visibility var(--pop-duration) var(--pop-timing-bounce);
}

.animate-pop,
.fadein{
    opacity: 0;
}

#lists-content ul li img{
    opacity: 0;
}
#lists-content ul li.infinite img{
    opacity: 0;
    animation: Fade 1s both ease-in-out;
}
@keyframes Fade {
    0%{
        opacity: 0;
    }
    50%{
        opacity: 1;
    }
    100%{
        opacity: 1;
    }
}


/* ==========================================================================
   Trigger State (JavaScriptで動的に付与される共通クラス)
   ========================================================================== */
[data-fade].is-visible {
  opacity: 1;
  visibility: visible;
  transform: scale(1) translate(0, 0); /* 各スタイルを本来の形に復元 */
}


/* ==========================================================================
   Accessibility
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  [data-fade] {
    transition: none !important;
    transform: none !important;
  }
}