/* loader.css — 全置換版 */
:root {
    --loader-blue: var(--darkblue);
    /* common.cssの--darkblueを参照 */
    --loader-bg: var(--white, #fff);
}

/* ページ固定：ローディング中はスクロール不可 */
body.is-loading {
    overflow: hidden;
}

/* ローダー土台 */
#loader {
    position: fixed;
    inset: 0;
    background: var(--loader-bg);
    display: grid;
    place-items: center;
    z-index: 2000;
    opacity: 1;
    transition: opacity .6s ease;
}

/* ロゴ（マスクより上に出す） */
.loader__inner {
    position: relative;
    z-index: 2;
}

.loader__logo {
    display: block;
    width: clamp(120px, 24vw, 220px);
    opacity: 0;
    transform: none;
    transition: opacity .8s ease;
    will-change: opacity, transform;
}

body.is-loading .loader__logo.is-show {
    opacity: 1;
    transform: none;
}

.loader__logo.is-out {
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity .3s ease, transform .3s ease;
    /* 既存より短く */
}

/* 青いマスク：下からせり上げ→全画面→上に抜け */
.loader__mask {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    height: 100vh;
    background: var(--loader-blue);
    transform: translateY(100%);
    transition: transform .7s ease;
    will-change: transform;
    z-index: 1;
    /* ロゴより下 */
}

/* せり上げて全画面表示 */
body.is-loading .loader__mask.is-reveal {
    transform: translateY(0);
}

/* 終了時：上に消える */
.loader__mask.is-hide {
    transform: translateY(-100%);
}

/* 本文フェードイン（#siteはHTML側のラッパ） */
#site {
    opacity: 0;
    transition: opacity .45s ease .1s;
}

body.is-loaded #site {
    opacity: 1;
}

/* ローダー退場 */
body.is-loaded #loader {
    opacity: 0;
    pointer-events: none;
}

/* 既表示タブをスキップしたい場合に備えたクラス（JSが付与する想定） */
html.loader-skip #loader {
    display: none !important;
}

html.loader-skip #site {
    opacity: 1 !important;
}

html.loader-skip body {
    overflow: auto !important;
}

/* アニメ苦手設定 */
@media (prefers-reduced-motion: reduce) {

    .loader__logo,
    .loader__mask,
    #loader,
    #site {
        transition: none !important;
    }
}