/**
 * JINテーマ パフォーマンス改善CSS
 *
 * 対象: rin-pedia.com (wp-theme-jin / jin-child)
 * 目的:
 *   - LCP改善: animate クラスによる opacity:0 初期状態を解除し即時描画
 *   - CLS改善: ヘッダー・ピックアップ・ナビの高さ安定化で
 *              下流コンテンツへの連鎖シフトを防ぐ
 *
 * 影響範囲:
 *   - すべてのセレクターを body.wp-theme-jin でスコープしているため
 *     JINテーマ以外のページ・プラグインには一切影響しない
 */

/* ==========================================================================
   1. フォールド上部の animate クラスを即時表示（LCP / CLS 対策）
      - JINテーマは .animate 要素を opacity:0 で初期化し JS でフェードインさせる
      - ヘッダー等が opacity:0 → 1 に遷移する間、高さ計算が変動して
        以下の全コンテンツが押し下げられる（連鎖CLS の根本原因）
   ========================================================================== */

/* ヘッダー全体 */
body.wp-theme-jin #header-box.animate,
body.wp-child-theme-jin-child #header-box.animate {
    opacity: 1 !important;
    animation: none !important;
    transform: none !important;
    transition: none !important;
}

body.wp-theme-jin #header.animate,
body.wp-child-theme-jin-child #header.animate {
    opacity: 1 !important;
    animation: none !important;
    transform: none !important;
    transition: none !important;
}

/* グローバルナビ本体 */
body.wp-theme-jin #nav-container.animate,
body.wp-child-theme-jin-child #nav-container.animate {
    opacity: 1 !important;
    animation: none !important;
    transform: none !important;
    transition: none !important;
}

/* ドロワーナビ（.ef クラスも JIN のアニメーション対象） */
body.wp-theme-jin #drawernav.ef,
body.wp-child-theme-jin-child #drawernav.ef {
    opacity: 1 !important;
    animation: none !important;
    transform: none !important;
    transition: none !important;
}

/* ピックアップコンテンツ */
body.wp-theme-jin .pickup-contents-box.animate,
body.wp-child-theme-jin-child .pickup-contents-box.animate {
    opacity: 1 !important;
    animation: none !important;
    transform: none !important;
    transition: none !important;
}

/* ピックアップリスト（ul 自体にも独立したアニメーションが適用される場合がある） */
body.wp-theme-jin ul.pickup-contents,
body.wp-child-theme-jin-child ul.pickup-contents {
    opacity: 1 !important;
    animation: none !important;
    transform: none !important;
    transition: none !important;
}

/* スクロールコンテンツ全体ラッパー */
body.wp-theme-jin #scroll-content.animate,
body.wp-child-theme-jin-child #scroll-content.animate {
    opacity: 1 !important;
    animation: none !important;
    transform: none !important;
    transition: none !important;
}

/* メインコンテンツ（記事本文・LCP候補を含む）
   #main-contents も .animate を持ち opacity:0 で初期化されるため別途指定 */
body.wp-theme-jin #main-contents.animate,
body.wp-child-theme-jin-child #main-contents.animate {
    opacity: 1 !important;
    animation: none !important;
    transform: none !important;
    transition: none !important;
}

/* ==========================================================================
   2. ロゴ画像の CLS 対策
      - ロゴ <img> に width/height 属性がないため height: auto を明示
   ========================================================================== */

body.wp-theme-jin .tn-logo-size img,
body.wp-child-theme-jin-child .tn-logo-size img {
    height: auto;
    max-width: 100%;
    display: block;
}

/* ==========================================================================
   3. ピックアップ画像のアスペクト比を明示（CLS対策）
      - 画像には width="269" height="151" があるが
        レスポンシブCSSで幅変動するため aspect-ratio を補足する
   ========================================================================== */

body.wp-theme-jin .pickup-image,
body.wp-child-theme-jin-child .pickup-image {
    aspect-ratio: 269 / 151;
    overflow: hidden;
}

body.wp-theme-jin .pickup-image img,
body.wp-child-theme-jin-child .pickup-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ==========================================================================
   4. アーカイブ・カテゴリページの記事カード個別アニメーションを無効化（LCP対策）
      - JINテーマはカード単位にも .animate を付与するため
        #main-contents の opacity:1 だけでは LCP 候補画像が非表示になる場合がある
      - card-large-box / card-small-box / post-list 等が対象
   ========================================================================== */

body.wp-theme-jin .card-large-box.animate,
body.wp-child-theme-jin-child .card-large-box.animate,
body.wp-theme-jin .card-small-box.animate,
body.wp-child-theme-jin-child .card-small-box.animate,
body.wp-theme-jin .post-list-mag.animate,
body.wp-child-theme-jin-child .post-list-mag.animate,
body.wp-theme-jin .post-list.animate,
body.wp-child-theme-jin-child .post-list.animate,
body.wp-theme-jin .card-articles.animate,
body.wp-child-theme-jin-child .card-articles.animate {
    opacity: 1 !important;
    animation: none !important;
    transform: none !important;
    transition: none !important;
}

/* ==========================================================================
   5. 記事本文（cps-post / cps-post-main）の animate 無効化（CLS 0.1467 対策）
      - article.cps-post と .cps-post-main にも独立した .animate が付与される
      - #main-contents.animate の抑制だけでは記事要素自体のシフトが残る
   ========================================================================== */

body.wp-theme-jin article.cps-post.animate,
body.wp-child-theme-jin-child article.cps-post.animate,
body.wp-theme-jin .cps-post.animate,
body.wp-child-theme-jin-child .cps-post.animate {
    opacity: 1 !important;
    animation: none !important;
    transform: none !important;
    transition: none !important;
}

body.wp-theme-jin .cps-post-main.animate,
body.wp-child-theme-jin-child .cps-post-main.animate {
    opacity: 1 !important;
    animation: none !important;
    transform: none !important;
    transition: none !important;
}

/* 記事本文内の画像 CLS 対策
   - width/height 属性がない img が多いため height:auto を補足
   - max-width:100% でレスポンシブ幅変動時もアスペクト比を維持 */
body.wp-theme-jin .cps-post-main img,
body.wp-child-theme-jin-child .cps-post-main img {
    height: auto;
    max-width: 100%;
}

/* ==========================================================================
   6. アイキャッチ画像（eyecatch）を非表示
      - .cps-eye-catch : figure 要素（JIN標準）
      - .post-eye-catch: 旧バージョン・子テーマ向けの別クラス
   ========================================================================== */

body.wp-theme-jin .cps-eye-catch,
body.wp-child-theme-jin-child .cps-eye-catch,
body.wp-theme-jin .post-eye-catch,
body.wp-child-theme-jin-child .post-eye-catch {
    display: none !important;
}

/* ==========================================================================
   7. アニメーション削減設定（prefers-reduced-motion）への配慮
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    body.wp-theme-jin .animate,
    body.wp-child-theme-jin-child .animate {
        opacity: 1 !important;
        animation: none !important;
        transform: none !important;
        transition: none !important;
    }
}