/* =====================================================
   スクロール連動フェードインアニメーション
   style.css の末尾に追記、または <link rel="stylesheet" href="fadein.css"> で読み込む
   ===================================================== */

/* --- 初期状態（非表示） --- */
.js-fadein {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

/* --- 表示状態 --- */
.js-fadein--visible {
  opacity: 1;
  transform: translateY(0);
}

/* -------------------------------------------------------
   個別チューニング
   要素ごとに少し動きを変えると自然な印象になります
------------------------------------------------------- */

/* 見出し：やや大きく動かす */
.SemiCircle.js-fadein,
.backCircle.js-fadein {
  transform: translateY(6px);
  transition-duration: 0.9s;
}

/* ギャラリーカード：横スライド気味に */
.galleyBox.js-fadein {
  transform: translateY(20px);
  transition-duration: 0.65s;
}

/* スキルの dt/dd ペア：dt は左から、dd は普通に */
#skill dl dt.js-fadein {
  transform: translateX(-16px) translateY(12px);
}
#skill dl dd.js-fadein {
  transform: translateX(8px) translateY(12px);
}

/* フッター */
footer .footerBoxLeft.js-fadein {
  transform: translateX(-20px);
}
footer .footerBoxRight.js-fadein {
  transform: translateX(20px);
}

/* -------------------------------------------------------
   アクセシビリティ対応
   ユーザーが「動きを減らす」設定をしている場合はアニメーションなし
------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .js-fadein {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}