/* --- Opening Animation CSS --- */

/* アニメーション中はページのスクロールバーを一時的に隠す */
body.opening-animation-active {
    overflow: hidden;
}

/* ローディング画面全体 */
#loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000000;
    z-index: 9999;
    display: flex; /* ロゴを中央寄せにするため */
    justify-content: center;
    align-items: center;
}

/* ロゴを囲うコンテナ（これがマスクの役割を果たす） */
.logo-mask {
    width: 80%;
    max-width: 600px;
    /* 最初は画像の下側が100%隠れた状態 */
    clip-path: inset(0 0 100% 0);
    opacity: 0; /* 最初は見えない状態 */
}

.logo {
    width: 100%;
    height: auto;
    display: block;
}

/* アニメーションを開始させるためのクラス */
.reveal-animation {
    /* revealAndHideという名前のキーフレームアニメーションを適用 */
    animation-name: revealAndHide;
    animation-duration: 4s; /* アニメーションの合計時間 */
    animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1); /* 滑らかな動き */
    animation-fill-mode: forwards; /* アニメーション終了時の状態を維持 */
}

/* マスクを使って表示・非表示を制御するアニメーション */
@keyframes revealAndHide {
    /* 0% - 10%: 準備 */
    0% {
        opacity: 1;
        clip-path: inset(0 0 100% 0); /* 下側が100%隠れている */
    }
    /* 10% - 45%: 上から下へ表示 */
    45% {
        opacity: 1;
        clip-path: inset(0 0 0 0); /* 全て表示 */
    }
    /* 45% - 55%: 表示されたまま停止 */
    55% {
        opacity: 1;
        clip-path: inset(0 0 0 0); /* 全て表示 */
    }
    /* 55% - 90%: 上から下へ消える */
    90% {
        opacity: 1;
        clip-path: inset(100% 0 0 0); /* 上側が100%隠れている（結果的に全部消える） */
    }
    /* 90% - 100%: 完全に消えた状態を維持 */
    100% {
        opacity: 0;
        clip-path: inset(100% 0 0 0);
    }
}