/*welcome section*/
#welcome {
    min-height: 100vh;

    background-image: url("../images/background.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    background-attachment: fixed;

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

    position: relative;

    text-align: center;

    color: #f9fafb;
}

#welcome::before {
    content: "";

    position: absolute;
    inset: 0;

    background: rgba(0, 0, 0, 0.6);
}

.hero {
    position: relative;
    z-index: 1;
}

.hero {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ★ここから3つの --fade-delay が、上から順に出す待ち時間。
     ハンバーガーメニューと同じ0.07秒刻み。仕掛け(font-fade)は base.css。 */
.hero h1 {
    font-size: 4rem;
    margin-top: 20px;

    --fade-delay: 0.7s;
}

.hero p {
    margin-top: 15px;
    font-size: 2.0rem;

    --fade-delay: 0.7s;
}

.scroll-indicator {
    position: absolute;

    bottom: 20px;
    left: 50%;

    /* ★左右の中央そろえ。left: 50% は「左端を画面中央に置く」だけなので、
         自分の幅の半分だけ左に戻して初めて中央に来る。

       ★下の font-slide-in-centered にも同じ translateX(-50%) が入っているが、
         あれは font-fade が付いているときだけ効くもの。
         index.html の .scroll-indicator は font-fade を付けない方針なので、
         ここに書いておかないと中央から右へずれたままになる。 */
    transform: translateX(-50%);

    display: flex;
    flex-direction: column;
    align-items: center;

    font-size: 15px;
    font-weight: 500;

    z-index: 2;
}

/* ★ここだけ、ずらす動き(base.css の font-slide-in)を差し替えている。

     font-fade は「下から20pxずらして出す」を transform で行うが、
     ここは左右の中央そろえにも transform(translateX(-50%))を使っている。
     transform は1つしか持てないので、そのまま重ねると中央そろえが消えて
     文字が右にずれてしまう。そこで中央そろえを含んだ動きを別に用意する。

   ★差し替えるのは animation-name だけ。
     長さ(0.5秒/0.4秒)・待ち時間・both は base.css の指定がそのまま使われる。
     濃さのほう(font-fade-in)も base.css のものをそのまま並べること。
     省くと、そちらの長さの指定が余ってずれる。 */
@keyframes font-slide-in-centered {
    from {
        transform: translate(-50%, 20px);
    }

    to {
        transform: translate(-50%, 0);
    }
}

html:not(.wf-loading):not(.fade-hold) .scroll-indicator.font-fade {
    animation-name: font-fade-in, font-slide-in-centered;
}

.scroll-indicator::after {
    content: "";

    width: 1px;
    height: 35px;

    background-color: #f9fafb;

    animation: scroll-line 1.4s ease-in-out infinite;
}