/* ===========================================
   🌟 スムーズスクロール制御CSS（V4 - スライド専用版）
   ===========================================
   ✅ opacityを削除して点滅を防止
   ✅ 純粋なスライドアニメーション
   ✅ 上下からなめらかに出現
   ✅ 自然な速度（0.6秒）
   =========================================== */

/* ===========================================
   🌟 ヘッダー制御（V4 - スライドのみ）
   =========================================== */

.header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 8000 !important;
    
    /* 🚀 GPU アクセラレーション */
    will-change: transform;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
    -webkit-backface-visibility: hidden;
    
    /* 🎯 スムーズなスライドトランジション */
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    
    /* 初期状態：表示 */
    transform: translate3d(0, 0, 0);
}

/* 🎯 ヘッダー表示状態（上から下にスライド） */
.header.header-visible {
    transform: translate3d(0, 0, 0) !important;
    pointer-events: auto !important;
}

/* 🎯 ヘッダー非表示状態（上にスライド） */
.header.header-hidden {
    transform: translate3d(0, -100%, 0) !important;
    pointer-events: none !important;
}

/* ===========================================
   🌟 タブバー制御（V4 - スライドのみ）
   =========================================== */

.native-tab-bar {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 7000 !important;
    
    /* 🚀 GPU アクセラレーション */
    will-change: transform;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
    -webkit-backface-visibility: hidden;
    
    /* 🎯 スムーズなスライドトランジション */
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    
    /* 初期状態：表示 */
    transform: translate3d(0, 0, 0);
}

/* 🎯 タブバー表示状態（下から上にスライド） */
.native-tab-bar.tab-bar-visible {
    transform: translate3d(0, 0, 0) !important;
    pointer-events: auto !important;
}

/* 🎯 タブバー非表示状態（下にスライド） */
.native-tab-bar.tab-bar-hidden {
    transform: translate3d(0, 100%, 0) !important;
    pointer-events: none !important;
}

/* ===========================================
   🌟 スクロール中の視覚効果
   =========================================== */

/* ヘッダー：スクロール中は影を追加 */
body.scrolling .header.header-visible {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
    transition: 
        transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        box-shadow 0.3s ease !important;
}

/* タブバー：スクロール中は影を追加 */
body.scrolling .native-tab-bar.tab-bar-visible {
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15) !important;
    transition: 
        transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        box-shadow 0.3s ease !important;
}

/* ===========================================
   📱 モバイル専用最適化
   =========================================== */

@media (max-width: 768px) {
    /* モバイル：少し速めに（0.5秒） */
    .header,
    .native-tab-bar {
        transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    }
    
    /* 🔥 Safari対策 */
    body {
        overscroll-behavior-y: contain;
        -webkit-overflow-scrolling: touch;
    }
}

/* ===========================================
   🌟 パフォーマンス最適化
   =========================================== */

/* ちらつき防止 */
.header,
.native-tab-bar {
    -webkit-transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000px;
    perspective: 1000px;
}

/* ===========================================
   🎯 アクセシビリティ対応
   =========================================== */

/* フォーカス時は常に表示 */
.header:focus-within,
.native-tab-bar:focus-within {
    transform: translate3d(0, 0, 0) !important;
    pointer-events: auto !important;
}

/* キーボードナビゲーション時 */
body.user-is-tabbing .header,
body.user-is-tabbing .native-tab-bar {
    transition: transform 0.3s ease !important;
}

/* ===========================================
   🌟 ダークモード対応
   =========================================== */

.dark-mode .header {
    background: linear-gradient(135deg, 
        rgba(26, 26, 26, 0.98) 0%, 
        rgba(30, 30, 40, 0.98) 100%) !important;
    backdrop-filter: blur(20px);
}

.dark-mode .native-tab-bar {
    background: rgba(26, 26, 26, 0.98) !important;
    backdrop-filter: blur(20px);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* ===========================================
   🔧 デバッグモード
   =========================================== */

body.debug-scroll .header::after {
    content: 'Header: ' attr(data-state);
    position: fixed;
    top: 70px;
    right: 20px;
    background: rgba(66, 134, 198, 0.95);
    color: white;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: bold;
    z-index: 10000;
    pointer-events: none;
    font-family: monospace;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

body.debug-scroll .native-tab-bar::after {
    content: 'TabBar: ' attr(data-state);
    position: fixed;
    bottom: 70px;
    right: 20px;
    background: rgba(103, 100, 186, 0.95);
    color: white;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: bold;
    z-index: 10000;
    pointer-events: none;
    font-family: monospace;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* ===========================================
   🌟 レスポンシブブレークポイント
   =========================================== */

/* タブレット */
@media (min-width: 769px) and (max-width: 1024px) {
    .header,
    .native-tab-bar {
        transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    }
}

/* デスクトップ */
@media (min-width: 1025px) {
    .native-tab-bar {
        display: none !important; /* デスクトップではタブバー非表示 */
    }
    
    .header {
        transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    }
}

/* ===========================================
   🎯 初期ロード時のアニメーション防止
   =========================================== */

/* ページロード直後はアニメーション無効 */
.header.preload,
.native-tab-bar.preload {
    transition: none !important;
}

/* ===========================================
   📊 V4の特徴（コメント）
   =========================================== */

/*
【V4の改善点】

✅ opacityを完全削除
- 点滅の原因となる透明度変化を排除
- 純粋なスライドアニメーションのみ

✅ translate3dを使用
- GPU加速を最大化
- より滑らかなアニメーション

✅ トランジション速度の最適化
- デスクトップ: 0.6秒
- モバイル: 0.5秒
- 自然な速度で上下からスライド

✅ イージング関数の維持
- cubic-bezier(0.25, 0.46, 0.45, 0.94)
- 自然な減速カーブ

【体感的な変化】
- 点滅がなくなり、スムーズに
- 上から/下からなめらかに出現
- 違和感のない自然な動き
*/