/**
 * Mobile Navigation - Clean Implementation
 * 全ての競合を排除した完全な実装
 */

/* =============================================================================
   ハンバーガーボタン
============================================================================= */

/* デフォルトで非表示 */
.nav__toggle {
    display: none;
}

/* モバイルでのみ表示 */
@media (max-width: 768px) {
    .nav__toggle {
        display: flex !important;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 30px;
        height: 30px;
        background: none;
        border: none;
        cursor: pointer;
        padding: 0;
        position: relative;
        z-index: 1001;
    }
    
    .nav__toggle span {
        display: block;
        width: 18px;
        height: 2px;
        background-color: #000;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        transform-origin: center center;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        will-change: transform, opacity;
        backface-visibility: hidden; /* Chrome最適化 */
    }
    
    .nav__toggle span:nth-child(1) {
        top: 9px;
    }
    
    .nav__toggle span:nth-child(2) {
        top: 14px;
    }
    
    .nav__toggle span:nth-child(3) {
        top: 19px;
    }
    
    /* ハンバーガー → X アニメーション - 完全に左右対称で中央配置 */
    .nav__toggle.active span:nth-child(1) {
        top: 14px !important;
        transform: translateX(-50%) rotate(45deg) !important;
    }
    
    .nav__toggle.active span:nth-child(2) {
        opacity: 0 !important;
        transform: translateX(-50%) scale(0) !important;
    }
    
    .nav__toggle.active span:nth-child(3) {
        top: 14px !important;
        transform: translateX(-50%) rotate(-45deg) !important;
    }
}

/* =============================================================================
   モバイルメニューオーバーレイ
============================================================================= */

@media (max-width: 768px) {
    /* カーソル無効化 */
    .cursor,
    .cursor-trail {
        display: none !important;
    }
    
    /* Chrome専用の最適化 */
    @supports (-webkit-appearance: none) {
        .nav__menu {
            transition: none !important; /* Chromeでは即座切り替え */
        }
        
        .nav__menu.active {
            transition: none !important; /* Chromeでは即座切り替え */
        }
        
        .nav__toggle span {
            transition: transform 0.2s ease !important; /* アイコンのみアニメーション */
        }
    }
    
    /* WebView専用の最適化 */
    @media screen and (-webkit-min-device-pixel-ratio: 0) {
        .nav__menu {
            /* WebViewでの確実な表示制御 */
            -webkit-backface-visibility: hidden !important;
            backface-visibility: hidden !important;
            -webkit-perspective: 1000px !important;
            perspective: 1000px !important;
            
            /* WebKit特有の強制再描画 */
            -webkit-transform: translateZ(0) !important;
            transform: translateZ(0) !important;
        }
        
        .nav__menu.active {
            /* WebViewでのアニメーション最適化 */
            -webkit-transform: translateZ(0) scale(1) !important;
            transform: translateZ(0) scale(1) !important;
        }
        
        /* WebViewでのタッチ最適化 */
        .nav__toggle {
            -webkit-tap-highlight-color: transparent !important;
            -webkit-touch-callout: none !important;
            -webkit-user-select: none !important;
            user-select: none !important;
        }
    }
    
    /* メニュー開いた時の×ボタン配置調整 */
    body.menu-open .nav__toggle {
        position: fixed !important;
        top: 1.5rem !important;
        right: 1.5rem !important;
        z-index: 1001 !important;
        background: rgba(0, 0, 0, 0.1) !important;
        border-radius: 50% !important;
        width: 40px !important;
        height: 40px !important;
        padding: 0 !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }
    
    /* メニューが開いた時のspan位置調整 */
    body.menu-open .nav__toggle span:nth-child(1) {
        top: 19px !important;
    }
    
    body.menu-open .nav__toggle span:nth-child(2) {
        top: 19px !important;
    }
    
    body.menu-open .nav__toggle span:nth-child(3) {
        top: 19px !important;
    }
    
    /* メニューのベーススタイルをリセット */
    .nav__menu {
        /* 通常のスタイルを完全に上書き */
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        background: rgba(255, 255, 255, 0.98) !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important; /* Safari対応 */
        
        /* フレックスレイアウト */
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 2rem !important;
        
        /* z-index */
        z-index: 1000 !important;
        
        /* 初期状態 - 非表示 - 同期状態管理 */
        opacity: 0 !important;
        visibility: hidden !important;
        transform: scale(0.9) !important;
        pointer-events: none !important;
        
        /* トランジション - より具体的に指定 */
        transition: 
            opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
            visibility 0s linear 0.25s,
            transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
        
        /* 他のスタイルをリセット */
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        box-shadow: none !important;
        
        /* 強制的な初期化 */
        will-change: opacity, visibility, transform !important;
        
        /* Chrome最適化 */
        -webkit-transform: scale(0.9) !important;
        -webkit-backface-visibility: hidden !important;
        backface-visibility: hidden !important;
    }
    
    /* アクティブ状態 - 同期実行 */
    .nav__menu.active {
        opacity: 1 !important;
        visibility: visible !important;
        transform: scale(1) !important;
        -webkit-transform: scale(1) !important;
        pointer-events: auto !important;
        
        /* アクティブ時のトランジション */
        transition: 
            opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
            visibility 0s linear 0s,
            transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
    
    /* メニューが開いた時のnav__controlsの調整 */
    body.menu-open .nav__controls {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        z-index: 1001 !important;
        padding: 1.5rem !important;
        pointer-events: auto !important;
    }
    
    /* メニューが開いた時は言語スイッチャーを非表示 */
    body.menu-open .language-switcher {
        display: none !important;
    }
    
    /* リンクスタイルを完全にリセット */
    .nav__menu .nav__link {
        /* 全てのスタイルをリセット */
        all: unset !important;
        
        /* 疑似要素も無効化 */
        position: relative !important;
        overflow: visible !important;
        
        /* 新しいスタイルを適用 */
        display: block !important;
        font-family: 'Space Grotesk', sans-serif !important;
        font-size: 1.5rem !important;
        font-weight: 500 !important;
        color: #000 !important;
        text-decoration: none !important;
        
        /* レイアウト */
        padding: 1rem 2rem !important;
        margin: 0.5rem 0 !important;
        min-height: 44px !important;
        min-width: 120px !important;
        
        /* 表示 */
        text-align: center !important;
        border-radius: 6px !important;
        
        /* トランジション - より詳細に */
        transition: 
            background-color 0.2s ease,
            opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
            transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        
        /* 初期アニメーション状態 */
        opacity: 0 !important;
        transform: translateY(20px) !important;
        will-change: opacity, transform !important;
    }
    
    /* 疑似要素を完全に無効化 */
    .nav__menu .nav__link::before,
    .nav__menu .nav__link::after {
        display: none !important;
        content: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        position: absolute !important;
        left: -9999px !important;
    }
    
    /* アクティブ時のリンクアニメーション */
    .nav__menu.active .nav__link {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
    
    .nav__menu.active .nav__link:nth-child(1) {
        transition-delay: 0.1s !important;
    }
    
    .nav__menu.active .nav__link:nth-child(2) {
        transition-delay: 0.15s !important;
    }
    
    .nav__menu.active .nav__link:nth-child(3) {
        transition-delay: 0.2s !important;
    }
    
    /* ホバー効果 */
    .nav__menu .nav__link:hover,
    .nav__menu .nav__link:active {
        background-color: rgba(0, 0, 0, 0.05) !important;
    }
    
    /* スクロール無効化 */
    body.menu-open {
        overflow: hidden !important;
    }
}

/* =============================================================================
   デスクトップでは通常表示
============================================================================= */

@media (min-width: 769px) {
    .nav__toggle {
        display: none !important;
    }
}