/* -----------------------------------------------------------------------------
 * 自作ヒーロースライダー（RevSlider 置換）
 *
 * 設計キャンバス（例 1349x540）上に px 絶対配置したレイヤーを、
 * js/wakamiya-slider.js が算出する --wk-scale で等比スケールして表示する。
 * これにより RevSlider の「幅に応じてレイアウトごと縮小」を忠実に再現する。
 * -------------------------------------------------------------------------- */

.wk-hero-wrap {
    position: relative;
    width: 100%;
    overflow: hidden;
    /* 既定の高さ（＝設計 design_h）は render 側でインライン指定。
       JS が幅に応じて実高さ（design_h × scale）へ上書きする。 */
}

/* 背景は全幅（フルブリード）。RevSlider の fullWidth:on を再現 */
.wk-hero__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
}

/* MasterSlider 置換（boxed）。全幅ではなく最大 940px で中央寄せ */
.wk-ms {
    max-width: 940px;
    margin: 0 auto;
}
.wk-ms-layer {
    display: block;
    /* テーマの img{max-width:100%} が幅を canvas(940px)に制限し縦横比を崩すため打ち消す。
       インライン指定の width/height（採取した正しい縦横比）をそのまま使う。 */
    max-width: none;
    pointer-events: none;
    will-change: opacity, transform;
}
.wk-ms-cover {
    pointer-events: none;
}

/* テキスト層の設計キャンバス。幅 < design_w のときだけ等比縮小し、
   design_w 以上では原寸のまま中央寄せ（拡大しない）。
   left / --wk-scale は js/wakamiya-slider.js が設定する。 */
.wk-hero__canvas {
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: top left;
    transform: scale(var(--wk-scale, 1));
    /* width / height（＝設計キャンバス px）は render 側でインライン指定 */
}

/* 各テキスト/リンク層：初期は透明、is-active でフェードイン */
.wk-hero__layer {
    position: absolute;
    white-space: nowrap;
    opacity: 0;
    will-change: opacity;
}

.wk-hero-wrap.is-active .wk-hero__layer {
    /* RevSlider tp-fade（speed 300ms / start 500ms / Power3.easeInOut）相当。
       個別ディレイは render 側の animation-delay インラインで付与。 */
    animation: wkHeroFadeIn 0.3s cubic-bezier(0.77, 0, 0.175, 1) both;
}

@keyframes wkHeroFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* --- レイヤー書式（旧 RevSlider の動的キャプションCSSを移植） --- */

/* homegreetingtitle 相当 */
.wk-hero__title {
    font-family: Georgia, serif;
    font-size: 40px;
    font-weight: bold;
    line-height: 1;
    color: #001327;
    text-shadow:
        0.5px 0.5px 0 #fff,
        -0.5px 0.5px 0 #fff,
        0.5px -0.5px 0 #fff,
        -0.5px -0.5px 0 #fff;
}

/* homegreetingsubtitle 相当 */
.wk-hero__sub {
    font-family: Georgia, serif;
    font-size: 36px;
    font-weight: bold;
    line-height: 1;
    color: #333;
    text-shadow:
        0.25px 0.25px 0 #fff,
        -0.25px 0.25px 0 #fff,
        0.25px -0.25px 0 #fff,
        -0.25px -0.25px 0 #fff;
}

/* home-greeting-link 相当。ボタン外観は style.css の .home-greeting-link .button-primary を流用 */
.wk-hero__link {
    font-size: 20px;
}

/* 各下層ページの日本語タイトル（旧 RevSlider .toptitle-new）。白文字＋グレーのドロップシャドウ */
.wk-hero__toptitle {
    font-family: "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;
    font-size: 64px;
    font-weight: bold;
    line-height: 1;
    color: #ffffff;
    text-shadow:
        1px 1px 1px rgb(120, 120, 120),
        0 2px 2px rgb(120, 120, 120),
        1px 0 2px rgb(120, 120, 120),
        0 -1px 2px rgb(120, 120, 120);
}

/* 動画一覧ページのタイトル（旧 RevSlider .toptitle）。濃紺文字＋白1pxアウトライン */
.wk-hero__movietitle {
    font-family: Georgia, serif;
    font-size: 48px;
    font-weight: bold;
    line-height: 1;
    color: #001327;
    text-shadow:
        1px 1px 0 #fff,
        -1px 1px 0 #fff,
        1px -1px 0 #fff,
        -1px -1px 0 #fff;
}

/* 英語ページのタイトル（旧 RevSlider .tophomeline3）。濃紺文字＋白アウトライン影 */
.wk-hero__enline {
    font-family: "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;
    font-size: 80px;
    font-weight: bold;
    line-height: 1;
    color: #001327;
    text-shadow:
        0.5px 0.5px 0 #fff,
        -0.5px 0.5px 0 #fff,
        0.5px -0.5px 0 #fff,
        -0.5px -0.5px 0 #fff;
}

/* 動きを減らす設定のユーザーには即時表示 */
@media (prefers-reduced-motion: reduce) {
    .wk-hero-wrap.is-active .wk-hero__layer {
        animation: none;
        opacity: 1;
    }
}