/* ==========================================================================
   トップページ ヒーロー：ポスター版（inc/hero-poster.php がトップページだけで読み込む）
   ・PC（1065px以上）のみ。タブレット・スマホは従来のまま
   ・背景の明るさは OGP 画像（完成版B）と同じ：.page_noizy2 の乗算色を #5D5A5A → #FFF7F7
   ・左右を沈めるグラデーション・四隅の締めは hero-poster-fx.css（自動生成）
   ・文字は js/hero-poster.js が1文字ずつ配置・移動する
   ========================================================================== */

@media screen and (min-width: 1065px) {
    .hp-on .banner-style01 {
        position: relative;
    }

    .hp-on .banner-style01 .item .page_noizy2 {
        background-color: #FFF7F7 !important;
    }

    /* 既存のキャッチ（h1）は見出しとして残し、見た目だけ消す */
    .hp-on .banner-style01 .item > .container {
        opacity: 0 !important;
        pointer-events: none;
    }

    /* .hp に z-index を付けると重ね合わせが閉じて、乗算が写真に掛からなくなる。z-index は子に付ける */
    .hp {
        position: absolute;
        inset: 0;
        pointer-events: none;
        overflow: hidden;
        --hp-u: 1px;           /* 1920px幅を基準にした 1px（JS が設定） */
    }

    /* スライドごとの明暗。スライドの切り替えと同じ 1.7秒 で入れ替える */
    .hp-fx {
        position: absolute;
        inset: 0;
        z-index: 5;
        opacity: 0;
        transition: opacity 1.7s ease;
    }

    .hp-mul {
        mix-blend-mode: multiply;
    }

    .hp[data-slide="0"] .hp-fx--1,
    .hp[data-slide="1"] .hp-fx--2,
    .hp[data-slide="2"] .hp-fx--3 {
        opacity: 1;
    }

    .hp-scrim,
    .hp-lift {
        position: absolute;
        inset: 0;
    }

    .hp-vignette {
        position: absolute;
        inset: 0;
        z-index: 5;
    }

    /* 文字の周りだけ背景を引かせる：写真レイヤーの中に、ぼかした複製を重ねる（ノイズの層より下） */
    .hp-soft {
        position: absolute;
        inset: 0;
        background-image: inherit;
        background-size: inherit;
        background-position: inherit;
        background-repeat: no-repeat;
        filter: blur(6px);
        opacity: 0.85;
        pointer-events: none;
    }

    [data-hp-slide="0"] > .hp-soft {
        -webkit-mask-image: radial-gradient(ellipse 33% 42% at 27% 50%, #000 55%, transparent 100%);
        mask-image: radial-gradient(ellipse 33% 42% at 27% 50%, #000 55%, transparent 100%);
    }

    [data-hp-slide="1"] > .hp-soft {
        -webkit-mask-image: radial-gradient(ellipse 34% 42% at 50% 50%, #000 55%, transparent 100%);
        mask-image: radial-gradient(ellipse 34% 42% at 50% 50%, #000 55%, transparent 100%);
    }

    [data-hp-slide="2"] > .hp-soft {
        -webkit-mask-image: radial-gradient(ellipse 33% 42% at 73% 50%, #000 55%, transparent 100%);
        mask-image: radial-gradient(ellipse 33% 42% at 73% 50%, #000 55%, transparent 100%);
    }

    /* 文字：1文字ずつ絶対配置。影だけの層（.hp-s）と、紙の粒子入りの塗りの層（.hp-f）を重ねる */
    .hp-text {
        position: absolute;
        inset: 0;
        z-index: 6;
    }

    .hp-ch {
        position: absolute;
        left: 0;
        top: 0;
        white-space: pre;
        line-height: 1;
        letter-spacing: 0;
        font-size: var(--hp-fs, 180px);
        transform-origin: 0 0;
        opacity: 0;
    }

    /* 移動中の傾き用（JS が rotate のアニメーションを付ける） */
    .hp-r {
        display: block;
        position: relative;
        transform-origin: 50% 65%;
    }

    .hp-ch--jp {
        font-family: "Noto Sans JP", sans-serif;
        font-weight: 600;
        font-feature-settings: "palt" 1;
    }

    .hp-ch--en {
        font-family: "Bricolage Grotesque", sans-serif;
        font-weight: 600;
        font-variation-settings: "opsz" 96;
        font-kerning: none;
    }

    .hp-ch--sub {
        font-family: "Bricolage Grotesque", sans-serif;
        font-weight: 700;
        font-variation-settings: "opsz" 18;
        font-kerning: none;
        font-size: calc(var(--hp-fs, 180px) * var(--hp-sub, 0.1854));
    }

    .hp-s {
        color: transparent;
        text-shadow:
            0 calc(2 * var(--hp-u)) calc(5 * var(--hp-u)) rgb(30 25 20 / 0.22),
            0 calc(6 * var(--hp-u)) calc(30 * var(--hp-u)) rgb(30 25 20 / 0.20),
            0 calc(12 * var(--hp-u)) calc(90 * var(--hp-u)) rgb(30 25 20 / 0.14);
    }

    .hp-f {
        position: absolute;
        left: 0;
        top: 0;
        color: transparent;
        background-size: 300px 300px;
        -webkit-background-clip: text;
        background-clip: text;
    }

    .hp-c--ink .hp-f {
        background-image: url(../img/hero-poster/ink.jpg);
    }

    .hp-c--accent .hp-f {
        background-image: url(../img/hero-poster/accent.jpg);
    }

    .hp-ch--sub .hp-f {
        opacity: 0.9;
    }
}

@media screen and (max-width: 1064px) {
    .hp {
        display: none;
    }
}