/*
 * NK Base Theme - hero.css
 * ヒーローセクション：静止画 / スライドショー / 動画 / なし
 * モバイル・PC 両対応レスポンシブ設計
 *
 * @since 1.6.0
 */

/* ============================================================
   ヒーロー ベース
   ============================================================ */
.nk-hero {
    position: relative;
    width: 100%;
    min-height: var(--nk-hero-height, 100vh);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    /* テキストは常に白系（オーバーレイ前提） */
    color: var(--nk-hero-text, #fff);
}

/* ============================================================
   オーバーレイ
   ============================================================ */
.nk-hero__overlay {
    position: absolute;
    inset: 0;
    background-color: var(--nk-hero-overlay, #000);
    opacity: var(--nk-hero-overlay-op, 0.45);
    z-index: 1;
    pointer-events: none;
}

/* ============================================================
   静止画モード（nk-hero--bg-image）
   ============================================================ */
.nk-hero--bg-image {
    background-color: var(--nk-primary, #1a4f8a); /* ロード前フォールバック */
}

/* <img> タグを背景として扱う（object-fit: cover） */
.nk-hero__bg-wrap {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.nk-hero__bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--nk-hero-img-pos, center center);
    display: block;
    /* LCP 画像のアニメーション遅延を防ぐ */
    will-change: auto;
}

/* ============================================================
   スライドショーモード（nk-hero--type-slider）
   JS が nk-hero--slider を追加する。
   ============================================================ */
.nk-hero--type-slider,
.nk-hero--slider {
    background-color: var(--nk-primary, #1a4f8a);
}

/* スライドラッパー */
.nk-hero-track {
    position: absolute;
    inset: 0;
    z-index: 0;
}

/* 各スライド */
.nk-hero-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.8s ease, visibility 0.8s ease;
    will-change: opacity;
}

.nk-hero-slide.is-active {
    opacity: 1;
    visibility: visible;
}

/* ケンバーンズ効果 */
.nk-hero-slide--ken-burns {
    animation: nkKenBurns 8s ease-in-out infinite alternate;
    animation-direction: calc(var(--kb-dir, 1));
}

@keyframes nkKenBurns {
    0%   { transform: scale(1.0) translate(0, 0); }
    100% { transform: scale(1.06) translate(calc(var(--kb-dir, 1) * 1%), 0.5%); }
}

/* スライド エフェクト：slide（横スライド） */
.nk-hero--effect-slide .nk-hero-slide {
    opacity: 1;
    visibility: hidden;
    transform: translateX(100%);
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), visibility 0.6s;
}
.nk-hero--effect-slide .nk-hero-slide.is-active {
    visibility: visible;
    transform: translateX(0);
}

/* スライド エフェクト：zoom（ズームイン） */
.nk-hero--effect-zoom .nk-hero-slide {
    transition: opacity 0.8s ease, transform 0.8s ease, visibility 0.8s;
}
.nk-hero--effect-zoom .nk-hero-slide:not(.is-active) {
    transform: scale(0.95);
}
.nk-hero--effect-zoom .nk-hero-slide.is-active {
    transform: scale(1);
}

/* ドットナビ */
.nk-hero-dots {
    position: absolute;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: .5rem;
    z-index: 10;
}

.nk-hero-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255,255,255,0.5);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: background .3s, transform .3s;
}

.nk-hero-dot.is-active,
.nk-hero-dot:hover {
    background: #fff;
    transform: scale(1.25);
}

/* 矢印ナビ */
.nk-hero-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background: rgba(255,255,255,0.15);
    border: 2px solid rgba(255,255,255,0.6);
    color: #fff;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .3s, border-color .3s, transform .3s;
    backdrop-filter: blur(4px);
}

.nk-hero-arrow:hover {
    background: rgba(255,255,255,0.35);
    border-color: #fff;
    transform: translateY(-50%) scale(1.08);
}

.nk-hero-arrow--prev { left: 1.5rem; }
.nk-hero-arrow--next { right: 1.5rem; }

/* スライドキャプション */
.nk-hero-slide__caption {
    position: absolute;
    bottom: 3.5rem;
    right: 1.5rem;
    background: rgba(0,0,0,.5);
    color: #fff;
    font-size: .75rem;
    padding: .25rem .75rem;
    border-radius: var(--nk-radius-sm, 4px);
    backdrop-filter: blur(4px);
}

/* ============================================================
   動画モード（nk-hero--type-video）
   JS が nk-hero--video を追加する。
   ============================================================ */
.nk-hero--type-video,
.nk-hero--video {
    background-color: #000; /* 動画ロード前の黒フォールバック */
    /* iOS Safari: position:relative が必須（子要素の inset:0 が機能するため） */
    position: relative;
    overflow: hidden; /* 動画がはみ出ないようにクリップ */
}

/* バックグラウンド動画要素（JS が動的に生成・挿入する） */
.nk-hero-video {
    /*
     * ── iOS Safari / Android Chrome での "中央だけ表示" バグ修正 ──
     *
     * 問題: position:absolute + inset:0 では iOS Safari で width/height が
     *       ビューポートではなく動画ネイティブ解像度に依存するケースがある。
     *       → min-width/min-height: 100% を追加し、かつ top/left/transform で
     *         強制的に中央揃えにすることで完全にカバー。
     *
     * object-fit:cover だけでは、コンテナより動画が小さい場合に余白が出る。
     * min-width / min-height の組み合わせで確実にコンテナを埋める。
     */
    position: absolute;
    top: 50%;
    left: 50%;
    /* inset:0 より明示的な top/left/transform の方が iOS Safari で安定 */
    transform: translate(-50%, -50%) translateZ(0);
    -webkit-transform: translate(-50%, -50%) translateZ(0);

    /* コンテナを完全に覆う（ネイティブ解像度に関係なく） */
    min-width: 100%;
    min-height: 100%;
    width: auto;   /* アスペクト比を保ちながら min-width で拡大 */
    height: auto;  /* アスペクト比を保ちながら min-height で拡大 */

    /*
     * object-fit:cover + object-position は <video> の描画領域内での
     * 表示位置を制御する。上記の min-width/height と併用することで
     * PC（横長）・スマホ（縦長）どちらのアスペクト比でも中央を表示。
     */
    object-fit: cover;
    object-position: center center;

    z-index: 0;       /* オーバーレイ（z:1）より下、コンテンツ（z:5）より下 */
    pointer-events: none;
    display: block;
    will-change: transform; /* GPU レイヤー昇格でちらつき防止 */
}

/*
 * ── スマホ縦持ち（portrait）専用 ──
 *
 * 【修正 v1.8.3】
 * 以前は width:177.8vh（≒ 16:9 動画を高さ基準で拡大した値）を指定していたが、
 * これがページ全体の横幅を超えてしまい「右側にピンク余白・コンテンツ左寄り」の
 * 横スクロール崩れを引き起こしていた。
 *
 * 修正方針: <video> 自体は transform+min-w/h で十分カバーできる。
 * 明示的な width/height 固定値の指定を除去し、
 * 親要素の overflow:hidden（.nk-hero--type-video で設定済み）で
 * はみ出しをクリップすることで横スクロールを防止する。
 *
 * ※ JS の fitVideoToHero() が loadedmetadata 後に px 単位で計算するため
 *   CSS での固定幅指定は不要になっている。
 */
@media (max-width: 767px) and (orientation: portrait) {
    .nk-hero-video {
        /* transform: translate(-50%,-50%) により中央基準で拡大されるため
           min-width/min-height だけで縦持ちでも確実にカバーできる */
        min-width: 100%;
        min-height: 100%;
        /* width/height は JS(fitVideoToHero)が px で上書きするため auto を維持 */
        width: auto;
        height: auto;
        object-fit: cover;
        object-position: center center;
    }
}

/*
 * ⚠️ z-index 重なり順の設計図（動画モード時）
 *
 * z-index: 0  →  .nk-hero-video（動画背景）
 * z-index: 1  →  .nk-hero__overlay（暗幕オーバーレイ）
 * z-index: 5  →  .nk-hero__content（テキスト・ボタン）
 * z-index: 10 →  .nk-hero-dots / .nk-hero-arrow / .nk-hero__scroll
 */

/* ============================================================
   グラデーション／なしモード（nk-hero--gradient）
   ============================================================ */
.nk-hero--gradient {
    background: linear-gradient(
        135deg,
        var(--nk-hero-grad-start, var(--nk-primary, #1a4f8a)),
        var(--nk-hero-grad-end,   var(--nk-secondary, #2d7dd2))
    );
}

/* ============================================================
   コンテンツエリア（全モード共通）
   ============================================================ */
.nk-hero__content {
    position: relative;
    z-index: 5;
    width: 100%;
    padding-block: clamp(3rem, 8vw, 6rem);
    text-align: center;
}

/* コンテンツ配置（JS から style で上書き可） */
.nk-hero__content--left  { text-align: left; }
.nk-hero__content--right { text-align: right; }

.nk-hero__eyebrow {
    font-size: clamp(.7rem, 1.5vw, .875rem);
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--nk-hero-text, #fff);
    opacity: .85;
    margin-bottom: .75rem;
}

.nk-hero__heading {
    font-size: clamp(1.75rem, 5vw, 3.5rem);
    font-weight: 800;
    line-height: 1.25;
    color: var(--nk-hero-text, #fff);
    margin-bottom: 1rem;
    text-shadow: 0 2px 8px rgba(0,0,0,.3);
}

.nk-hero__sub {
    font-size: clamp(.875rem, 2vw, 1.125rem);
    line-height: 1.7;
    color: var(--nk-hero-text, #fff);
    opacity: .92;
    max-width: 640px;
    margin-inline: auto;
    margin-bottom: 2rem;
    text-shadow: 0 1px 4px rgba(0,0,0,.2);
}

/* ボタングループ */
.nk-hero__btns {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    align-items: center;
}

/* ヒーロー専用ボタン上書き */
.nk-hero__btn--primary {
    background-color: var(--nk-hero-btn1-bg, var(--nk-primary, #1a4f8a));
    color: var(--nk-hero-btn1-text, #fff);
    border-color: var(--nk-hero-btn1-bg, var(--nk-primary, #1a4f8a));
}
.nk-hero__btn--primary:hover {
    filter: brightness(1.12);
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(0,0,0,.25);
}

.nk-hero__btn--secondary {
    background-color: transparent;
    color: var(--nk-hero-btn2-text, #fff);
    border-color: var(--nk-hero-btn2-border, #fff);
}
.nk-hero__btn--secondary:hover {
    background-color: rgba(255,255,255,.15);
    transform: translateY(-2px);
}

/* 追加コンテンツ */
.nk-hero__extra {
    margin-top: 2rem;
}

/* ============================================================
   スクロール矢印
   ============================================================ */
.nk-hero__scroll {
    position: absolute;
    bottom: 1.75rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--nk-hero-text, #fff);
    opacity: .75;
    transition: opacity .3s;
    padding: 0;
}

.nk-hero__scroll:hover {
    opacity: 1;
}

.nk-hero__scroll-arrow {
    display: block;
    width: 20px;
    height: 20px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    animation: nkScrollBounce 1.8s ease-in-out infinite;
}

@keyframes nkScrollBounce {
    0%, 100% { transform: rotate(45deg) translateY(0); }
    50%       { transform: rotate(45deg) translateY(5px); }
}

.nk-hero__scroll-label {
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

/* ============================================================
   レスポンシブ：タブレット（〜1024px）
   ============================================================ */
@media (max-width: 1024px) {
    .nk-hero-arrow--prev { left: 1rem; }
    .nk-hero-arrow--next { right: 1rem; }

    .nk-hero-arrow {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }
}

/* ============================================================
   レスポンシブ：モバイル（〜767px）
   ============================================================ */
@media (max-width: 767px) {

    /* ヒーロー高さ：モバイルは最大 85svh に制限（アドレスバー分も考慮） */
    .nk-hero {
        min-height: clamp(420px, 85svh, 100vh);
    }

    /* 矢印は非表示（スワイプで操作） */
    .nk-hero-arrow {
        display: none;
    }

    /* ドットは小さめ */
    .nk-hero-dot {
        width: 8px;
        height: 8px;
    }

    /* ボタンは縦並び */
    .nk-hero__btns {
        flex-direction: column;
        align-items: stretch;
        max-width: 320px;
        margin-inline: auto;
    }

    .nk-hero__btn--primary,
    .nk-hero__btn--secondary {
        text-align: center;
        width: 100%;
    }

    /* スクロールボタンを少し上に */
    .nk-hero__scroll {
        bottom: 1.25rem;
    }

    /* 動画：モバイルで videoMobileFallback = true の場合、
       JS が poster 画像を background に設定するため
       <video> は display:none にしない（JS 側で制御）  */
    .nk-hero--type-video.nk-hero--mobile-fallback .nk-hero-video {
        display: none;
    }
}

/* ============================================================
   アクセシビリティ：アニメーション軽減設定
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .nk-hero-slide,
    .nk-hero-slide--ken-burns,
    .nk-hero__scroll-arrow,
    .nk-hero-dot,
    .nk-hero-arrow {
        animation: none !important;
        transition: none !important;
    }
}

/* ============================================================
   IE11 / 旧ブラウザフォールバック（svh 未対応）
   ============================================================ */
@supports not (min-height: 1svh) {
    .nk-hero {
        min-height: var(--nk-hero-height, 100vh);
    }
}