/* --- Page Transition CSS (Improved) --- */

/* ページ遷移オーバーレイのコンテナ */
#transition-overlay {
    position: fixed;
    top: 0;
    left: 0;
    /* 変更点：width/heightの代わりにright/bottomを使い、画面サイズへの追従性を向上 */
    right: 0;
    bottom: 0;
    z-index: 9998;
    pointer-events: none;
    overflow: hidden;
}

/* 遷移パネル */
.transition-panel {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #000000;
    transform: translateX(0);
}

/* ページを表示する時（中央から左へスライドアウト） */
body.is-entering .transition-panel {
    animation: slideOutToLeft 0.8s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}

/* ページを離れる時（右から中央へスライドイン） */
body.is-leaving .transition-panel {
    animation: slideInFromRight 0.8s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}


/* キーフレームアニメーション */

/* 右から中央へ */
@keyframes slideInFromRight {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

/* 中央から左へ */
@keyframes slideOutToLeft {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-100%);
    }
}