/* CSS Document */

/* ========================================= */
/* Charioot AXE: 動的コンテンツ表示用アニメーション */
/* ========================================= */

/* アニメーションの定義 */
@keyframes slide-in-bottom {
  0% {
    transform: translateY(20px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

/* assets/css/axe-frontend.css */

/*
 * 初期状態 (JavaScriptがロードされ、画面に入るまで非表示)
 */
.charioot-axe-dynamic-container.is-hidden {
    opacity: 0;
    transform: translateY(20px);
    /* NEW: 初期状態ではクリックなどを無効化し、要素を占有させない */
    pointer-events: none;
    user-select: none;
}

/*
 * アニメーションが適用される状態
 */
.charioot-axe-dynamic-container {
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

/*
 * 最終的な表示状態
 */
.charioot-axe-dynamic-container.is-visible {
    opacity: 1;
    transform: translateY(0);
    /* NEW: 表示されたらクリックなどを有効化 */
    pointer-events: auto;
    user-select: auto;
}