/*
 * public/css/pages.css
 *
 * このファイルには、Kamos Design System の特定のページにのみ適用されるスタイルを定義します。
 * 可能な限り、base.css, layout.css, components.css, utilities.css
 * およびTailwind CSSのユーティリティクラスを利用し、
 * ここでの定義は最小限に抑えることを推奨します。
 *
 * kamos-ui.css からのページ固有のスタイルをここに統合します。
 * Vue.js移行時には、これらのスタイルも対応するVueコンポーネントやビューに
 * 統合されることが想定されます。
 */

/* ==========================================================================
   1. ログインページ固有のスタイル (Login Page Specific Styles)
   ========================================================================== */
/*
 * ログインフォームのコンテナに関するアニメーションと基本スタイル。
 * body.login-page のスタイルは base.css にあるが、このコンテナはページ固有のためこちらに。
 */
/* アニメーションをトリガーするためのキーフレーム定義 */
@keyframes loginDialogAppear {
    0% { opacity: 0; transform: translateY(30px) scale(0.98); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

.login-form-container {
    padding: var(--kamos-space-xl);
    text-align: center;
    /* 修正: 初期状態での非表示設定を削除し、常に表示されるようにする */
    /* opacity: 0; */
    /* visibility: hidden; */
    transform: translateY(30px) scale(0.98); /* アニメーション開始時の状態 */
    transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                visibility 0.7s ease-in-out; /* visibility も transition 対象にする */
}

/* JavaScriptで追加されるクラス。このクラスが追加されたときにアニメーションをトリガー */
.login-form-container.animate-in {
    opacity: 1;
    visibility: visible; /* アニメーション開始時に表示する */
    transform: translateY(0) scale(1);
    /* animation-name: loginDialogAppear; /* 必要であればanimation-nameもここで指定 */
    /* animation-duration: 0.7s; */
    /* animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); */
    /* animation-fill-mode: forwards; */
    /* animation-delay: 0.1s; /* 必要であれば遅延もここで指定 */
}


.login-form-container h3 {
    font-family: var(--kamos-font-family-english);
    font-size: 1.4rem;
    color: #111827; /* kamos-ui.css の元の色 */
    margin-top: 0;
    margin-bottom: var(--kamos-space-lg);
    font-weight: 600;
}

.login-form-container #authError {
    margin-top: var(--kamos-space-md);
    font-size: var(--kamos-font-size-small);
    color: var(--kamos-text-color-error);
    min-height: 1.2em;
}

/* ==========================================================================
   2. YouTube Player Container (特定の埋め込み要素)
   ========================================================================== */
/*
 * YouTube プレイヤーのコンテナの背景色。
 * これは特定のページやセクションに埋め込まれることを想定。
 */
#youtubePlayerContainer {
    background-color: var(--kamos-bg-color-table-header); /* kamos-ui.css の元の値 */
}

/* ==========================================================================
   3. レポート関連のH1スタイル (Report-Specific H1 Styles)
   ========================================================================== */
/*
 * #reportContainer 内の h1 に適用される特定のスタイル。
 * これは analysis.html など、レポートを表示するページに固有。
 */
#reportContainer h1 {
    font-size: var(--kamos-font-size-h1);
    color: var(--kamos-primary-color);
    border-bottom-color: var(--kamos-primary-color);
    margin-top: var(--kamos-space-xl);
    margin-bottom: var(--kamos-space-md);
}
h1 span#mainReportTitleText {
    display: block;
}
h1 span.framework-name {
    display: block;
    font-size: var(--kamos-font-size-small);
    color: var(--kamos-text-color-light);
    margin-top: var(--kamos-space-xs);
    font-weight: 500;
}
body.login-page h1 span.framework-name {
    color: #E0E0E0; /* ログインページでの上書き */
}


/* ==========================================================================
   4. Step Block & Report Sections コンテナアニメーション
   ========================================================================== */
/*
 * 特定のセクション（ステップセクション、レポートセクションコンテナ）の表示アニメーション。
 * これらはページ内の特定のコンテンツブロックに適用される。
 */
.step-section {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.4s var(--kamos-transition-timing-function-kamos-organic-bounce),
                transform 0.4s var(--kamos-transition-timing-function-kamos-organic-bounce);
}

.step-section.is-active {
    opacity: 1;
    transform: translateY(0);
}
.step-section h2 { /* base.cssのh2をページ固有で上書き */
    font-size: var(--kamos-font-size-h3);
    color: var(--kamos-primary-color);
    margin-top: 0;
    margin-bottom: var(--kamos-space-md);
    padding-bottom: var(--kamos-space-sm);
    border-bottom: 1px solid var(--kamos-border-color-default);
    display: flex;
    align-items: center;
    font-weight: 600;
}
.step-section h2 .material-symbols-outlined {
    margin-right: var(--kamos-space-sm);
    font-size: 1.2em;
}
.step-description {
    color: var(--kamos-text-color-light);
    margin-bottom: var(--kamos-space-lg);
    font-size: var(--kamos-font-size-small);
}

/* Report Sections Container Animation */
#reportSectionsContainer {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.4s var(--kamos-transition-timing-function-kamos-organic-bounce),
                transform 0.4s var(--kamos-transition-timing-function-kamos-organic-bounce);
}

#reportSectionsContainer.is-active {
    opacity: 1;
    transform: translateY(0);
}