/* 仮想空間側を全面に敷く */
.hero__virtual-space {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: radial-gradient(circle at 50% 20%, rgba(70, 110, 180, 0.18), transparent 35%), /* 前の色:circle at 50% 20%, rgba(70, 110, 180, 0.18), transparent 35% */
    linear-gradient(to bottom, #D7DBDF 0%, #D7DBDF 45%, #D7DBDF 100%); /* 前の色: #0a0d14 0%, #090c12 45%, #05070d 100% */
}

.hero__grid-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

/* 背景画像用 */
.hero__virtual-background {
    /*    display: none;*/
    position: absolute;
    inset: 0;
    background-image: url("../images/test_background.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
    -webkit-mask-image: linear-gradient( to bottom, #000 0%, #000 45%, rgba(0, 0, 0, 0.8) 60%, rgba(0, 0, 0, 0.3) 75%, transparent 95% );
    mask-image: linear-gradient( to bottom, #000 0%, #000 45%, rgba(0, 0, 0, 0.8) 60%, rgba(0, 0, 0, 0.3) 75%, transparent 95% );
}

.hero__shadow-character {
    /*position: absolute;
    left: 50%;
    bottom: 0;*/
    /*        width: clamp(280px, 38vw, 560px);*/
    /*transform: translateX(-50%);*/
    /*     PNGの透明部分を維持したまま真っ黒にする */
    /*filter: brightness(0);
    z-index: 2;
    pointer-events: none;
    user-select: none;*/

    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center;
    /* 後で黒く戻す */
     filter: brightness(0); 

    z-index: 2;
    pointer-events: none;
    user-select: none;
}

/* ========================================
   顔型マスク
======================================== */

.hero__weapon-mask {
    position: absolute;
    /*
        黒塗り主殿と同じ位置・サイズにする。
        character.png と face-mask.png が
        同じキャンバスサイズならピッタリ重なる。
    */

/*    left: 50%;
    bottom: 0;
    width: clamp(280px, 38vw, 560px);
    height: 100%;
    aspect-ratio: auto;
    transform: translateX(-50%);*/

    inset:0;
    width:100%;
    height:100%;

    /*
        顔マスク画像
        CSSファイルが css/top.css にあるので
        ../images/ になる点に注意。
    */
    -webkit-mask-image: url("../images/NightSky_KAGENEKO_Mask.png");
    mask-image: url("../images/NightSky_KAGENEKO_Mask.png");

     -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;

     -webkit-mask-position: center;
    mask-position: center;

     -webkit-mask-size: cover;
    mask-size: cover;
    /*
        ★ テスト用
        顔の中だけ赤くなれば成功。
    */
    z-index: 3;
    pointer-events: none;
}

.hero__weapon-track,
.hero__weapon {
    /*    display: none;*/
}



/* ========================================
   武器マスク内部
======================================== */

/*.hero__weapon-track {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    width: max-content;
    height: 100%;
}*/


/* 武器画像 */
/*.hero__weapon {
    display: block;
    width: auto;*/
    /*
        顔の中での武器の大きさ。
        ここは後で調整。
    */
    /*height: 55%;
    object-fit: contain;
    flex-shrink: 0;
}*/

/* ========================================
   武器横スクロール
======================================== */

/*.hero__weapon-track {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    height: 100%;
    width: max-content;
    animation: hero-weapon-scroll 10s linear infinite;
}

.hero__weapon-strip {
    display: block;
    flex: none;
    width: auto;
    height: 60%;
}

@keyframes hero-weapon-scroll {

    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d( var(--weapon-loop-distance), 0, 0 );
    }
}*/

/* 新しい形の武器スクロール*/
.hero__weapon-track {
    --weapon-tile-width: 2800px;

    position: absolute;
    inset: 0;

    background-image:
        url("../images/heroSection/Weapon_Scroll_RawRectStyle.png");

    background-repeat: repeat-x;

    background-size:
        var(--weapon-tile-width) auto;

    background-position:
        0 center;

    /* 移動速度の変更はここで可能 */
    animation:
        hero-weapon-scroll 25s linear infinite;

    z-index: 1;
}

@keyframes hero-weapon-scroll {

    from {
        background-position:
            0 center;
    }

    to {
        background-position:
            calc(0px - var(--weapon-tile-width)) center;
    }
}

/* ======================
    武器横スクロールの背景裏グリッド
=======================*/

.hero__weapon-mask::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: 
        linear-gradient( 
        rgba(70, 110, 180, 0.35) 1px,
    transparent 1px 
    ), 
        linear-gradient( 90deg, 
    rgba(70, 110, 180, 0.35) 1px, 
    transparent 1px );

    background-size: 40px 40px;
    animation: hero-mask-grid-scroll 3s linear infinite;
    z-index: 0;
}

@keyframes hero-mask-grid-scroll {
    from {
        background-position: 0 0;
    }

    to {
        background-position: -120px 0;
    }
}
.hero__weapon-track {
    z-index: 1;
}


/* ========================================
   HERO - Mobile
   PC版の構図を維持した横長表示
======================================== */

@media (max-width: 768px) {

    .hero {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
        min-height: 0;
    }


    /* 仮想空間 / 夜空ともに
       横長HEROの領域へ収める */
    .hero__virtual-space,
    .hero__night-sky {
        inset: 0;
        width: 100%;
        height: 100%;
    }


    /* キャラクター画像 */
    .hero__shadow-character,
    .hero__character {
        width: 100%;
        height: 100%;
        max-width: none;
        object-fit: cover;
        object-position: center;
    }


    /* 顔マスクもPC版の比率を維持 */
    .hero__weapon-mask {
        inset: 0;
        width: 100%;
        height: 100%;
        -webkit-mask-size: cover;
        mask-size: cover;
        -webkit-mask-position: center;
        mask-position: center;
    }


    /* PC版の1200px武器帯を
       スマホ向けに縮小 */
    .hero__weapon-track {
        --weapon-tile-width: min(150vw, 620px);
    }
}