/* ローディング中は背面のスクロール・バウンスを抑止（header.js が body に付与／解除） */
body.loading-scroll-lock {
    overflow: hidden;
    height: 100%;
    overscroll-behavior: none;
    touch-action: none;
}

/* body.loading--skip は header.js が back_forward 時に付与（ローディングを出さない） */
body.loading--skip #js-loading {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.loading__wrap {
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    pointer-events: auto;
    /* 背景パネル: 初動は素早く、終盤は ease-out で締める（初速ののろさ・終盤のキレ過ぎを避ける） */
    --loading-cover-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

.loading__wrap.loading--done {
    pointer-events: none;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s 0.35s, opacity 0.35s ease;
}

    /* 完了時は内側を即非表示（親の opacity トランジション待ちでロゴ・動画が一瞬見えるのを防ぐ） */
    .loading__wrap.loading--done .loading__inner {
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
    }

    .loading__wrap.loading--done .loading__icon video {
        opacity: 0;
    }

    /* 上下は矩形のまま。左右のみ内側の縦境界を clip-path で斜めに切り、中央が平行四辺形に開く */
    .loading__cover {
        position: absolute;
        inset: 0;
        z-index: 0;
        overflow: hidden;
        background: transparent;
        pointer-events: none;
    }

    .loading__cover-panel {
        position: absolute;
        background: #000000;
        transition: transform var(--loading-cover-ms, 3600ms) var(--loading-cover-ease, cubic-bezier(0.4, 0, 0.2, 1));
        will-change: transform;
    }

    .loading__cover-panel--top {
        top: 0;
        left: 0;
        width: 100%;
        height: calc(50% + 3px);
        transform-origin: 50% 100%;
        transform: translate3d(0, 0, 0);
        z-index: 1;
    }

    .loading__cover-panel--bottom {
        bottom: 0;
        left: 0;
        width: 100%;
        height: calc(50% + 3px);
        transform-origin: 50% 0;
        transform: translate3d(0, 0, 0);
        z-index: 1;
    }

    /* 右側の内辺のみ斜め（上端は右、下端は左寄り）→ 右パネルと平行なすきま */
    .loading__cover-panel--left {
        top: 0;
        left: 0;
        width: calc(50% + 3px);
        height: 100%;
        transform-origin: 100% 50%;
        clip-path: polygon(0 0, 0 100%, 82% 100%, 100% 0);
        -webkit-clip-path: polygon(0 0, 0 100%, 82% 100%, 100% 0);
        transform: translate3d(0, 0, 0);
        z-index: 2;
    }

    /* 左側の内辺のみ斜め（左パネルと対称・すきまが平行四辺形） */
    .loading__cover-panel--right {
        top: 0;
        right: 0;
        width: calc(50% + 3px);
        height: 100%;
        transform-origin: 0 50%;
        clip-path: polygon(18% 0, 0 100%, 100% 100%, 100% 0);
        -webkit-clip-path: polygon(18% 0, 0 100%, 100% 100%, 100% 0);
        transform: translate3d(0, 0, 0);
        z-index: 2;
    }

    .loading--cover-out .loading__cover-panel--top {
        transform: translate3d(0, -105%, 0);
    }

    .loading--cover-out .loading__cover-panel--bottom {
        transform: translate3d(0, 105%, 0);
    }

    .loading--cover-out .loading__cover-panel--left {
        transform: translate3d(-105%, 0, 0);
    }

    .loading--cover-out .loading__cover-panel--right {
        transform: translate3d(105%, 0, 0);
    }

    .loading__inner {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 1140px;
        height: 100%;
        margin: 0 auto;
        position: relative;
        z-index: 2;
    }
        .loading__text {
            position: relative;
            z-index: 1;
        }
            .loading__icon {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                z-index: -1;
                width: 500px;
                height: 500px;
                video {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    opacity: 1;
                }
            }

            /* 不透明度はメディア時間に同期して header.js が制御（終了と同時に 0） */
            .loading--out .loading__icon video {
                transition: none;
            }

            .loading__logo {
                display: block;
                clip-path: inset(0 100% 0 0);
                -webkit-clip-path: inset(0 100% 0 0);
            }

            /* 動画フェード完了後に .loading--logo-out を付与（動画 → ロゴの順で消える） */
            .loading__wrap.loading--logo-in:not(.loading--logo-out) .loading__logo {
                animation: loading-logo-reveal var(--loading-logo-in-ms, 1600ms) cubic-bezier(0.4, 0, 0.2, 1) forwards;
            }

            .loading__wrap.loading--logo-out .loading__logo {
                animation: loading-logo-hide var(--loading-logo-hide-ms, 1500ms) cubic-bezier(0.4, 0, 0.2, 1) forwards;
            }

@keyframes loading-logo-reveal {
    from {
        clip-path: inset(0 100% 0 0);
        -webkit-clip-path: inset(0 100% 0 0);
    }
    to {
        clip-path: inset(0 0 0 0);
        -webkit-clip-path: inset(0 0 0 0);
    }
}

@keyframes loading-logo-hide {
    from {
        clip-path: inset(0 0 0 0);
        -webkit-clip-path: inset(0 0 0 0);
    }
    to {
        clip-path: inset(0 0 0 100%);
        -webkit-clip-path: inset(0 0 0 100%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .loading__wrap {
        --loading-logo-in-ms: 1ms;
        --loading-logo-hide-ms: 1ms;
    }

    .loading__wrap.loading--logo-in:not(.loading--logo-out) .loading__logo {
        animation: none;
        clip-path: inset(0 0 0 0);
        -webkit-clip-path: inset(0 0 0 0);
    }

    .loading__wrap.loading--logo-out .loading__logo {
        animation: none;
        clip-path: inset(0 0 0 100%);
        -webkit-clip-path: inset(0 0 0 100%);
    }

    .loading--cover-out .loading__cover {
        opacity: 0;
    }

    .loading--cover-out .loading__cover-panel {
        transition: none;
        transform: none !important;
    }

    .loading--out .loading__icon video {
        opacity: 0;
        transition: none;
    }
}