/* ==========================================================================
   vnトップ・メディアミックスヒーロー（19_・2026-07-13着工）
   figure.hero__main の器（.ph=aspect-ratio 4/5）に重ねる動画/静止画クロスフェード。
   家訓：動きはフェードのみ／写真が主役。撤去＝partial呼び出し1行＋本ファイル群の削除。
   ========================================================================== */

/* 器＝既存 .ph（4/5・max-height 640px）が高さを与える。メディア層はその上に inset:0 で重ねる。
   .ph は position:relative のため hero__main を配置文脈にして絶対配置を効かせる。 */
.hero__main:has(.heromedia){position:relative}

.heromedia{position:absolute;inset:0;z-index:2;overflow:hidden;border-radius:var(--radius)}

/* 各スライドは重ねて交代。シームレス化（2026-07-13 Masami検品反映）：
   入ってくる側（.is-on）だけを上層でフェードインし、出ていく側（.is-prev）は
   フェード完了まで不透明のまま下層に残す＝中間で下地が透けない。 */
.heromedia__slide{position:absolute;inset:0;opacity:0;z-index:0;
  transition:opacity 1.8s cubic-bezier(.4,0,.2,1)}
.heromedia__slide.is-on{opacity:1;z-index:2}
.heromedia__slide.is-prev{opacity:1;z-index:1;transition:none}

/* JS無効時も先頭スライド（mv-01のposter）が見えるよう、素のCSSで先頭を表示。
   退場中（.is-prev）は除外＝先頭が出ていく繋ぎ目で下地（写真準備中）が透けない（2026-07-13検品反映） */
.heromedia__slide:first-child{opacity:1}
.heromedia[data-hm-ready] .heromedia__slide:first-child:not(.is-on):not(.is-prev){opacity:0}

/* メディア本体：枠の縦横比（4/5）を常に勝たせる＝既存 .ph--filled img と同作法 */
.heromedia__media{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;display:block}

/* --- ごく淡いKen Burns（静止画のみ・表示中は is-prev の間も継続＝退場時に絵が跳ねない。
       10秒＝表示8秒＋フェード1.8秒をカバー。秒数変更時はJSのHOLDと揃える）--- */
.heromedia__slide.is-still.is-on .kb-in,
.heromedia__slide.is-still.is-prev .kb-in{animation:hm-kb-in 10s ease-out both}
.heromedia__slide.is-still.is-on .kb-pan,
.heromedia__slide.is-still.is-prev .kb-pan{animation:hm-kb-pan 10s ease-out both}
@keyframes hm-kb-in{from{transform:scale(1.00)}to{transform:scale(1.06)}}
@keyframes hm-kb-pan{from{transform:scale(1.04) translateX(1.5%)}
  to{transform:scale(1.04) translateX(-1.5%)}}

/* --- 動きへの配慮：reduced-motion＝先頭ポスター静止・交代もKen Burnsも止める --- */
@media (prefers-reduced-motion:reduce){
  .heromedia__slide{transition:none}
  .heromedia__slide:not(:first-child){opacity:0 !important}
  .heromedia__slide:first-child{opacity:1 !important}
  .heromedia__media{animation:none !important;transform:none !important}
}

/* スマホ：既存 .hero__grid は1カラムへ折り返す（vn.css @media）。器は 4/5 のまま。
   動画は muted/loop/playsinline で自動再生。被写体が切れる場合は object-position を微調整。 */
@media (max-width:860px){
  .heromedia__media{object-position:center 42%}
}

/* ==========================================================================
   筆記体レタリング「Welcome to Nanjo!」（2026-07-13 Masami決定・案3英語版）
   Caveat 500（SIL OFL）を必要字のみサブセット自己ホスト（caveat-moji.woff2・8.7KB）。
   ペンでなぞられて描かれ、インクが満ちる。初回1度だけ描画し、以降は出したまま。
   ========================================================================== */
@font-face{font-family:"CaveatMoji";
  src:url("../hero-media/caveat-moji.woff2") format("woff2");
  font-display:swap}

/* 配置：ヒーロー画像の右端から海色の色面へまたがる（Masami指示2026-07-13）。
   .heromedia（overflow:hidden）の外・figure.hero__main 直下に置き、右へはみ出す。
   スマホ（1カラム）でははみ出すと横スクロールが出るため、画像内の右下へ自動切替。 */
.heromedia__moji{position:absolute;left:56%;bottom:5%;width:80%;
  pointer-events:none;z-index:3;overflow:visible}
@media (max-width:860px){
  .heromedia__moji{left:8%;width:84%;bottom:4%}
}
.heromedia__moji text{font-family:"CaveatMoji","Caveat",cursive;
  fill:#fff;stroke:#fff;stroke-linejoin:round;
  filter:drop-shadow(0 1px 8px rgba(0,40,50,.38))}
.heromedia__moji .moji-l1{font-size:30px;stroke-width:.5;letter-spacing:.04em}
.heromedia__moji .moji-l2{font-size:62px;stroke-width:.9}

/* 描かれる：輪郭をなぞる→インクが満ちる（初回のみ・forwards） */
.heromedia__moji text{fill-opacity:0;stroke-dasharray:320;stroke-dashoffset:320;
  animation:hm-draw 2.4s cubic-bezier(.4,0,.25,1) forwards,
            hm-ink 1s ease forwards}
.heromedia__moji .moji-l1{animation-delay:.5s,2.2s}
.heromedia__moji .moji-l2{animation-delay:1.2s,3.1s}
@keyframes hm-draw{to{stroke-dashoffset:0}}
@keyframes hm-ink{to{fill-opacity:.97}}

@media (prefers-reduced-motion:reduce){
  .heromedia__moji text{animation:none;fill-opacity:1;stroke-dashoffset:0}
}