/**
 * 強制リフロー（Forced Reflow）最適化用CSS
 * レイアウトスラッシングを防止するためのCSS設定
 */

/* =================================================================
 * 1. CSS Transformsを使用（Reflowを回避）
 * ================================================================= */

/* ページトップボタンのアニメーション */
.page-top {
    /* position: fixed は既に設定されている */
    /* opacityとtransformのみ変更（Reflowなし、Repaintのみ） */
    transition: opacity 0.3s ease, transform 0.3s ease;
    will-change: opacity, transform;
}

.page-top.visible {
    opacity: 1;
    transform: translateY(0);
}

.page-top:not(.visible) {
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;
}

/* =================================================================
 * 2. will-changeプロパティで最適化
 * ================================================================= */

/* アニメーションする要素に事前に通知 */
.keni-header_wrap.sticky,
.keni-gnav_wrap,
.keni-footer-panel,
.page-top,
.sns-btn_wrap {
    will-change: transform;
}

/* アニメーション完了後はwill-changeを解除 */
.animation-complete {
    will-change: auto;
}

/* =================================================================
 * 3. contain プロパティで独立したレイアウト領域を作成
 * ================================================================= */

/* 各セクションを独立させてReflowの影響範囲を限定 */
.keni-header_wrap,
.keni-main_wrap,
.keni-sidebar,
.keni-footer_wrap,
.entry-list_item,
.widget {
    contain: layout style paint;
}

/* 厳密な独立（さらに強力） */
.entry-list_thumb,
.widget img {
    contain: strict;
}

/* =================================================================
 * 4. GPU アクセラレーションの活用
 * ================================================================= */

/* transformとopacityのアニメーションはGPUで処理 */
.animate-gpu {
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
}

/* スクロール時のアニメーション */
.scroll-animate {
    transform: translate3d(0, 0, 0);
    will-change: transform;
}

/* =================================================================
 * 5. position: stickyの最適化
 * ================================================================= */

/* position: sticky は Reflowを最小限に抑える */
.keni-header_wrap.sticky {
    position: sticky;
    top: 0;
    z-index: 1000;
    /* transformではなくstickyを使用 */
}

/* =================================================================
 * 6. display: noneの代わりにvisibilityを使用
 * ================================================================= */

/* display: none → Reflow発生
   visibility: hidden → Reflowなし、Repaintのみ */

.hidden-optimized {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    /* display: noneの代わり */
}

.visible-optimized {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

/* =================================================================
 * 7. CSS Grid/Flexboxの最適化
 * ================================================================= */

/* Grid layoutは一度の計算で完了 */
.entry-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    /* 子要素の変更が親に影響しない */
    contain: layout;
}

/* Flexboxも同様に最適化 */
.keni-gnav_cont {
    display: flex;
    flex-wrap: wrap;
    contain: layout;
}

/* =================================================================
 * 8. font-size: 相対単位の使用（Reflowの連鎖を防ぐ）
 * ================================================================= */

/* rem単位を使用（ルート要素のみ影響） */
body {
    font-size: 16px; /* ベースサイズ */
}

h1 { font-size: 2rem; }   /* 32px */
h2 { font-size: 1.75rem; } /* 28px */
h3 { font-size: 1.5rem; }  /* 24px */
p { font-size: 1rem; }     /* 16px */

/* =================================================================
 * 9. overflow: hiddenの最適化
 * ================================================================= */

/* overflow: hidden は Reflowを引き起こす可能性がある */
/* contain-intrinsic-sizeで事前にサイズを指定 */

.keni-main_wrap {
    overflow: hidden;
    contain: layout;
    contain-intrinsic-size: auto 500px;
}

/* =================================================================
 * 10. Transitionのパフォーマンス最適化
 * ================================================================= */

/* GPUアクセラレーションが効くプロパティのみ変更 */
.optimized-transition {
    /* 推奨: transform, opacity */
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* 非推奨: width, height, top, left, margin, padding */
.slow-transition {
    /* これらはReflowを引き起こす */
    /* transition: width 0.3s ease; ← 使わない */
}

/* =================================================================
 * 11. pointer-events: noneで不要なReflowを回避
 * ================================================================= */

/* 非表示要素はイベント処理をスキップ */
.hidden-element {
    opacity: 0;
    pointer-events: none;
    /* クリックイベントの判定でReflowが発生しない */
}

/* =================================================================
 * 12. content-visibility: auto（モダンブラウザ）
 * ================================================================= */

/* ビューポート外の要素のレンダリングをスキップ */
.entry-list_item,
.widget,
.comment-item {
    content-visibility: auto;
    contain-intrinsic-size: auto 500px;
}

/* =================================================================
 * 13. CSS変数（Custom Properties）の活用
 * ================================================================= */

:root {
    /* レイアウト計算結果をCSS変数に保存 */
    --viewport-height: 100vh;
    --viewport-width: 100vw;
    --header-height: 80px;
    --footer-height: 200px;
    --sidebar-width: 300px;
}

/* JavaScript側で設定した値を利用 */
.full-height {
    height: var(--viewport-height);
}

/* =================================================================
 * 14. アニメーションのハードウェアアクセラレーション
 * ================================================================= */

/* transformを使ったアニメーション */
@keyframes slideIn {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}

/* GPUで処理される */
.slide-animation {
    animation: slideIn 0.3s ease;
    transform: translateZ(0); /* ハードウェアアクセラレーション有効化 */
}

/* =================================================================
 * 15. スクロールパフォーマンスの最適化
 * ================================================================= */

/* スムーズスクロール */
html {
    scroll-behavior: smooth;
}

/* ただしJavaScript制御の場合は無効化 */
html.js-scroll {
    scroll-behavior: auto;
}

/* スクロールコンテナの最適化 */
.scroll-container {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; /* iOS用スムーズスクロール */
    overscroll-behavior-y: contain; /* スクロールの連鎖を防ぐ */
}

/* =================================================================
 * 16. リフロー発生を最小化するためのレイアウトヒント
 * ================================================================= */

/* 固定サイズ要素（Reflowの影響を受けにくい） */
.fixed-size-element {
    width: 300px;
    height: 200px;
    flex-shrink: 0; /* Flexboxでもサイズが変わらない */
}

/* =================================================================
 * 17. ページトップボタンの最適化版スタイル
 * ================================================================= */

.page-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    z-index: 9999;
    
    /* GPU アクセラレーション */
    transform: translateZ(0);
    backface-visibility: hidden;
    
    /* トランジション（transform/opacityのみ） */
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
    will-change: opacity, transform;
    
    /* 初期状態 */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.page-top.visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

/* =================================================================
 * 18. スティッキーヘッダーの最適化
 * ================================================================= */

.keni-header_wrap.sticky {
    position: sticky;
    top: 0;
    z-index: 1000;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    
    /* GPU アクセラレーション */
    transform: translate3d(0, 0, 0);
    will-change: transform;
}

/* =================================================================
 * 19. モバイルメニューのアニメーション最適化
 * ================================================================= */

.keni-gnav_inner {
    /* height変更ではなくtransformを使用 */
    transform: translateY(-100%);
    transition: transform 0.3s ease-out;
    will-change: transform;
}

.keni-gnav_inner.active {
    transform: translateY(0);
}

/* =================================================================
 * 20. パフォーマンス優先モード（低スペックデバイス用）
 * ================================================================= */

@media (prefers-reduced-motion: reduce) {
    /* アニメーション無効化 */
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* 低スペックデバイス用 */
@media (max-width: 768px) and (max-resolution: 1dppx) {
    /* アニメーションを簡素化 */
    .page-top,
    .keni-header_wrap,
    .keni-gnav_inner {
        transition-duration: 0.15s; /* 短縮 */
        will-change: auto; /* GPUメモリ節約 */
    }
}