/* 中央ラベルとエラー文に使用するIBM公式フォント。 */
@font-face {
    font-family: 'IBM Plex Sans JP';
    src: url('../assets/fonts/IBM_Bold/IBMPlexSansJP-Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/*
 * 画面全体を覆う黒いレイヤー。
 * z-indexは既存のゲームUIやダイアログより前面に表示するための値。
 * transitionの0.2sを変更すると、画面全体のフェード速度を調整できる。
 */
.loading-screen {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: #000000;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.2s ease, visibility 0s linear 0s;
}

/* フェードアウト中／非表示後は、背後のゲームUIを操作できるようにする。 */
.loading-screen.is-leaving,
.loading-screen.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}

/*
 * 上下の半円、中央ラベルをまとめる正方形の表示領域。
 * widthを変更するとローディング表示全体の大きさが変わる。
 */
.loading-screen__indicator {
    position: relative;
    display: grid;
    width: clamp(300px, 42vmin, 540px);
    aspect-ratio: 1;
    place-items: center;
}

/* JavaScriptで生成する20個の扇形パーツを配置する領域。 */
.loading-screen__spinner {
    position: absolute;
    inset: 0;
}

/*
 * 半円を構成する1個分の扇形パーツ。
 * width: パーツの円周方向の幅。
 * height: パーツの半径方向の長さ。
 * background: 通常時の濃い青。
 * translateY: パーツを中心から外側へ離す距離。絶対値を増やすと中央余白が広がる。
 * animationの2s: 一連の発光が一周する時間。
 */
.loading-screen__segment {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8.5%;
    height: 17%;
    border-radius: 2px;
    background: #001d6c;
    /* 上端が円の外側。外側を広く、内側を狭くした扇形にする。 */
    clip-path: polygon(0 0, 100% 0, 80% 100%, 20% 100%);
    transform: translate(-50%, -50%) rotate(var(--segment-angle)) translateY(-244%);
    animation: loading-screen-segment 2s linear infinite;
    animation-delay: var(--segment-delay);
    will-change: background-color, filter;
}

/* 非表示後は発光アニメーションを止め、バックグラウンドでの描画を避ける。 */
.loading-screen.is-hidden .loading-screen__segment {
    animation-play-state: paused;
}

/*
 * リング中央のアプリ名／Room名。
 * font-sizeを変更すると中央文字の大きさを調整できる。
 */
.loading-screen__label {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    width: min(88vw, 760px);
    color: #ffffff;
    font-family: 'IBM Plex Sans JP', sans-serif;
    font-size: clamp(20px, 2.7vmin, 36px);
    font-style: normal;
    font-weight: 700;
    line-height: 1.4;
    overflow-wrap: anywhere;
    text-align: center;
    transform: translate(-50%, -50%);
}

/* Room遷移時は「IBM Spatial Platform |」の部分だけグレーにする。 */
.loading-screen.is-room-transition .loading-screen__label {
    color: #8d8d8d;
}

/* Room遷移時の移動先Room名は白で強調する。 */
.loading-screen__destination {
    color: #ffffff;
}

/* 起動に失敗した場合に、中央ラベルの下へ表示するエラーメッセージ。 */
.loading-screen__error {
    position: absolute;
    top: calc(50% + clamp(42px, 6vmin, 72px));
    left: 50%;
    width: min(88vw, 680px);
    color: #c6c6c6;
    font-family: 'IBM Plex Sans JP', sans-serif;
    font-size: clamp(14px, 1.65vmin, 20px);
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
    transform: translateX(-50%);
}

/* エラー表示中は発光を止め、リングを暗くしてエラー文を目立たせる。 */
.loading-screen.has-error .loading-screen__segment {
    animation-play-state: paused;
    opacity: 0.35;
}

/*
 * 対極にある上下2パーツの発光フェード。
 * 0/50/100%が最も暗い状態、75%が最も明るい状態。
 * 中間値はブラウザが連続補間するため、徐々に明るくなり徐々に暗くなる。
 */
@keyframes loading-screen-segment {
    0%, 50%, 100% {
        background-color: #001d6c;
        filter: brightness(0.82);
    }

    75% {
        background-color: #0f62fe;
        filter: brightness(1.08);
    }
}

/* スマートフォンでは画面幅に合わせてリングとラベルを縮小する。 */
@media (max-width: 640px) {
    .loading-screen__indicator {
        width: min(82vw, 380px);
    }

    .loading-screen__label {
        width: 92vw;
    }
}

/* OSでモーション軽減が指定されている場合はフェード時間と発光を抑える。 */
@media (prefers-reduced-motion: reduce) {
    .loading-screen,
    .loading-screen.is-leaving,
    .loading-screen.is-hidden {
        transition-duration: 0.01ms;
    }

    .loading-screen__segment {
        animation: none;
    }
}