@charset "UTF-8";

/*=============================================
JavaScriptやアニメーションで使うCSS
=============================================*/

/*------------------------------------
ローディングアニメ
------------------------------------*/
.loading-bg {
    background-color: var(--grey-bg);
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
    transition: opacity 0.8s ease; /* 背景はスッと消える */
}

.loading-screen {
    background-color: var(--green-bg);
    position: fixed;
    inset: 0;
    z-index: 9998;
    transform: translateY(100vh); /* 初期状態は下 */
}

/* JSで追加するアニメーション */
@keyframes slideUp {
    0% {
        transform: translateY(100vh);
    }
    40% {
        transform: translateY(0); /* 一瞬画面を覆う */
    }
    100% {
        transform: translateY(-100vh);
    }
}

.loading-text img {
    max-width: 100px;
    animation: balloonFloat 3s ease-in-out forwards, balloonDrift 4s ease-in-out 3s infinite;
}

/* 出現時のふんわり浮上 */
@keyframes balloonFloat {
    0% {
        opacity: 0;
        transform: translateY(20px) scale(0.9);
    }
    40% {
        opacity: 1;
        transform: translateY(-10px) scale(1.05);
    }
    70% {
        transform: translateY(5px) scale(0.98);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ふわふわ上下に漂う動き（無限ループ） */
@keyframes balloonDrift {
    0% {
        transform: translateY(0) scale(1);
    }
    50% {
        transform: translateY(-6px) scale(1.02);
    }
    100% {
        transform: translateY(0) scale(1);
    }
}