/* 全螢幕載入覆蓋層 */
.loading-animation-container {
    position: fixed;
    top: 0;
    left: 0;

    width: 100vw;
    height: 100vh;
    height: 100dvh; /* iPhone Safari 修正 */

    z-index: 9999;
    overflow: hidden;

    opacity: 1;
    visibility: visible;
    transition: opacity 0.6s ease, visibility 0.6s ease;
}

/* 最終淡出後的狀態（連背景一起消失） */
.loading-animation-container.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* 內層：背景圖 + 置中容器 */
.loading-animation-wrapper {
    position: relative;
    width: 100%;
    height: 100%;

    background-image: url('https://cdn.akimia.com.tw/shopline/2025double11/img/animation/awaken_1111_background_compress.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    display: flex;
    justify-content: center;
    align-items: center;
}

/* 中央這一組動畫 */
.animation-content-box {
    position: relative;
    display: inline-block;
}

/* 三個圖層共同的初始狀態：先隱藏，等進場時淡入 */
.animation-content-box .screen-frame,
.animation-content-box .loading-animation-video,
.animation-content-box .logo-type {
    opacity: 0;
    transition: opacity 0.5s ease;
}

/* 最底層：螢幕框（決定整組大小） */
.animation-content-box .screen-frame {
    display: block;
    max-width: 5000px; /* 可依實際畫面調整 */
    height: auto;
}

/* 中間層：MP4 動畫 */
.animation-content-box .loading-animation-video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;

    width: 100%;
    height: auto;
    object-fit: cover;

    mix-blend-mode: screen;
    will-change: opacity, transform;
    pointer-events: none;
}

/* 最上層：Logo */
.animation-content-box .logo-type {
    position: absolute;
    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%) scale(1);
    z-index: 3;

    width: 300px;
    height: auto;
    transition: opacity 0.5s ease, transform 0.5s ease;
}

/* 進場狀態：加上 .is-entered 後，三個圖層依序淡入 */

/* 1️⃣ 螢幕框最先淡入 */
.animation-content-box.is-entered .screen-frame {
    opacity: 1;
    transition-delay: 0.1s; /* 網頁載入後 0.1 秒出現 */
}

/* 2️⃣ 影片接著淡入 */
.animation-content-box.is-entered .loading-animation-video {
    opacity: 1;
    transition-delay: 0.25s;
}

/* 3️⃣ Logo 最晚出現，更有主角感 */
.animation-content-box.is-entered .logo-type {
    opacity: 1;
    transition-delay: 0.4s;
}

/* 退出狀態：加上 .is-exiting 時，控制淡出順序與效果 */

/* 先讓螢幕框 & 影片淡出（畫面收乾淨） */
.animation-content-box.is-exiting .screen-frame,
.animation-content-box.is-exiting .loading-animation-video {
    opacity: 0;
    transition: opacity 0.4s ease;
}

/* Logo 最後：漸大 + 淡出 */
.animation-content-box.is-exiting .logo-type {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.2);
    transition: opacity 0.6s ease, transform 0.6s ease;
    transition-delay: 0s; /* 這裡你之後可以再微調延遲 */
}

/* ------------ 手機版（<= 700px） ------------ */

@media screen and (max-width: 700px) {
    .animation-content-box .screen-frame {
        max-width: 142vw;
        height: auto;
    }

    .animation-content-box .loading-animation-video {
        width: 142vw;
        height: auto;
    }

    .animation-content-box .logo-type {
        width: 56vw;
        height: auto;
    }
}

/* ===== 載入期間禁止滾動 ===== */
.body-no-scroll {
    overflow: hidden !important;
    height: 100vh !important;
    touch-action: none !important;
}