/* page-loader = トップページを開いたときの読み込み画面

   流れ
     1. index.html の <head> が <html> に page-loading の印を付ける
     2. 読み込みが終わるまで「loading...」を波打たせる(最低1.2回)
     3. page-loader.js が is-leaving を付け、画面が上へ滑りながら消える

   ★印が無いときは何も表示しない。JavaScript が動かない人や
     /#about へ直接来た人には読み込み画面を出さない。 */
#page-loader {
    display: none;

    position: fixed;
    inset: 0;

    /* ★メニュー(1000)やスキップリンク(1100)より手前に出す。 */
    z-index: 2000;

    place-items: center;

    background-color: var(--bg-color);
    color: var(--text-color);

    /* 動く前に描画の準備をしておき、動き出しのコマ落ちを防ぐ。 */
    will-change: transform;
}

html.page-loading #page-loader,
#page-loader.is-leaving {
    display: grid;
}

/* 読み込み中は後ろのページをスクロールさせない。 */
html.page-loading,
html.page-loading body {
    overflow: hidden;
}

/* Scroll の線は、Welcome が見えてから動かす。 */
html.page-loading .scroll-indicator::after {
    animation-play-state: paused;
}

/* ★Webフォント(base.css の body)を使わないこと。
     読み込み画面はフォントの完了を合図に閉じるので、使うと文字の差し替えと
     滑り出しが同時に起きて、閉じる瞬間に文字が崩れて見える。
   ★端末に入っている書体のうち、細字を持つものを先に並べている。
     font-weight を書かないと body の 600 を受け継いで太くなる。 */
.page-loader__text {
    margin: 0;

    font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    font-size: 1.75rem;
    font-weight: 300;
    letter-spacing: 0.08em;
}

/* 読み上げ用の文字。1文字ずつ読まれないよう、見た目の文字は aria-hidden にしてある。 */
.page-loader__label {
    position: absolute;

    width: 1px;
    height: 1px;

    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* 1文字ずつ順に明るくなる波。--i は何文字目か(index.html)。
   ★1周の時間は「波が右端まで流れ切る時間」より長くすること。
     短いと、前の波が終わる前に次の波が始まり、回数が数えられなくなる。
       流れ切る時間 = 1文字の動き(1.1s × 36%) + ずれの合計(0.065s × 9文字) = 0.981s */
.page-loader__wave span {
    opacity: 0.45;

    animation: page-loader-wave 1.1s ease-in-out infinite;
    animation-delay: calc(var(--i) * 0.065s);
}

@keyframes page-loader-wave {
    0%,
    36%,
    100% {
        opacity: 0.45;
    }

    18% {
        opacity: 1;
    }
}

/* iPhone の通知画面を閉じるときのように、背景ごと1枚の板として上へ抜けていく。
   ★透明にはしない。
   ★立ち上がりの速い曲線にしないこと。最初の一瞬でほぼ動ききり、
     滑らずに瞬間的に消えたように見える。
   ★時間を変えたら page-loader.js の片付けの時間も、これより長くすること。 */
#page-loader.is-leaving {
    border-radius: 0 0 28px 28px;

    transform: translateY(-100%);

    transition: transform 1s cubic-bezier(0.5, 0, 0.2, 1);
}

/* 動きを減らす設定の人には、波も滑る動きも付けず、その場で薄く消す。 */
@media (prefers-reduced-motion: reduce) {
    .page-loader__wave span {
        opacity: 1;

        animation: none;
    }

    #page-loader.is-leaving {
        border-radius: 0;

        transform: none;
        opacity: 0;

        transition: opacity 0.3s ease;
    }
}