/* アニメーションのフォールバック - JavaScriptが動作しない場合の対策 */

/* デスクトップではアニメーションを無効化して即座に表示 */
@media (min-width: 769px) {
  .animate-on-scroll {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* モバイルでもJavaScriptが無効な場合のフォールバック */
@media (max-width: 768px) {
  /* noscriptまたはJavaScriptエラー時の対策 */
  .no-js .animate-on-scroll,
  html:not(.js-enabled) .animate-on-scroll {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* プログレッシブエンハンスメント対応 */
@supports (animation: none) {
  /* アニメーションがサポートされている場合のみ初期状態を非表示に */
  .js-enabled .animate-on-scroll:not(.is-visible) {
    opacity: 0;
    transform: translateY(20px);
  }
}

/* セーフティネット - 3秒後に強制表示 */
@keyframes forceShow {
  to {
    opacity: 1 !important;
    transform: none !important;
  }
}

.animate-on-scroll {
  animation: forceShow 0s ease-in 3s forwards;
}