/* つなぎヒーロー専用CSS（番人裁定 2026-07-13・17_小計画）。JSゼロ＝全演出がここで完結。
 * 構成：①クロスフェード（15秒×6枚＝90秒周期・交代フェード2.5秒）
 *       ②Ken Burns（拡大最大1.08倍・枚ごとに方向を変える＝小計画§2の割り当て表）
 *       ③スクロール沈み込み（Scroll-Driven Animations・@supports＋reduced-motion二重ゲート）
 * フォールバック：reduced-motion＝001静止のみ／Scroll-Driven未対応＝沈み込みなし通常表示／
 *                全画像読込失敗＝透明のまま＝既存プレースホルダが見える。
 * 撤去＝本ファイル＋hero-media.php＋webp6枚＋index.phpのpartial 1行（aria-label 1属性は裁定Aで確定変更）。 */

.hero-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 1;               /* 既存プレースホルダ(shashin__in)より上・紅の三角印(seal)より下 */
}
.shashin .shashin__seal { display: none; }   /* 紅の三角印はプレースホルダ時代の意匠＝写真運用では非表示（Masami指示2026-07-13）。
                                                本ファイル撤去で元どおり復活する（既存CSSは不変更） */

.hero-media__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;               /* 既定＝非表示。motion配慮環境では下のルールで001のみ静止表示 */
}

/* reduced-motion：001を静止表示・他は出さない（アニメーション一切なし） */
.hero-media__img.hm-1 { opacity: 1; }

@media (prefers-reduced-motion: no-preference) {

  /* ①クロスフェード：90秒周期。可視窓15秒・交代フェード2.5秒。
   * 負のdelayで全員が位相済み＝初期表示から正しい状態（001が見えている）。 */
  .hero-media__img {
    animation-duration: 90s, 90s;
    animation-timing-function: linear, ease-in-out;
    animation-iteration-count: infinite, infinite;
  }
  .hero-media__img.hm-1 { opacity: 0; animation-name: hmFadeFirst, hmKb1; animation-delay: -92.5s, -92.5s; }
  .hero-media__img.hm-2 { animation-name: hmFadeMid, hmKb2; animation-delay: -77.5s, -77.5s; }
  .hero-media__img.hm-3 { animation-name: hmFadeMid, hmKb3; animation-delay: -62.5s, -62.5s; }
  .hero-media__img.hm-4 { animation-name: hmFadeMid, hmKb4; animation-delay: -47.5s, -47.5s; }
  .hero-media__img.hm-5 { animation-name: hmFadeMid, hmKb5; animation-delay: -32.5s, -32.5s; }
  .hero-media__img.hm-6 { animation-name: hmFadeLast, hmKb6; animation-delay: -17.5s, -17.5s; }

  /* 交代方式（2026-07-13修正）：出入りの両方が半透明になる瞬間を作らない。
   * 入ってくる写真（DOMで後＝上のレイヤー）が完全に不透明になってから、下の写真をスナップで消す。
   * これで交代中も下地（プレースホルダの三角）が一切透けない。
   * ・hm-2〜hm-5（上に重なる側）＝hmFadeMid：フェードイン→自分の窓＋次の重なりぶん保持→スナップ消灯
   * ・hm-1（最下層）＝hmFadeFirst：006の下で即時点灯（見えない切替）→006のフェードアウトで現れる
   * ・hm-6（最上層・次が最下層001）＝hmFadeLast：従来どおりフェードアウト（下は既に不透明の001） */
  @keyframes hmFadeFirst {
    0%      { opacity: 1; }
    20%     { opacity: 1; }
    20.01%  { opacity: 0; }
    100%    { opacity: 0; }
  }
  @keyframes hmFadeMid {
    0%      { opacity: 0; }
    2.78%   { opacity: 1; }
    20%     { opacity: 1; }
    20.01%  { opacity: 0; }
    100%    { opacity: 0; }
  }
  @keyframes hmFadeLast {
    0%      { opacity: 0; }
    2.78%   { opacity: 1; }
    16.67%  { opacity: 1; }
    19.44%  { opacity: 0; }
    100%    { opacity: 0; }
  }

  /* ②Ken Burns（§2割り当て表）。動きは可視窓(0〜19.44%)で完結し、不可視中に巻き戻る */
  @keyframes hmKb1 { 0% { transform: scale(1); }                              19.44%,100% { transform: scale(1.08); } }                          /* 001 巨岩へズームイン */
  @keyframes hmKb2 { 0% { transform: translateX(-2%) scale(1.04); }          19.44%,100% { transform: translateX(2%) scale(1.04); } }          /* 002 石畳に沿い左→右 */
  @keyframes hmKb3 { 0% { transform: scale(1.08); }                          19.44%,100% { transform: scale(1); } }                             /* 003 水面から引く */
  @keyframes hmKb4 { 0% { transform: translateY(2%) scale(1.04); }           19.44%,100% { transform: translateY(-2%) scale(1.04); } }         /* 004 梢から海へ視線が降りる */
  @keyframes hmKb5 { 0% { transform: translateX(2%) scale(1.04); }           19.44%,100% { transform: translateX(-2%) scale(1.04); } }         /* 005 右→左（002と逆） */
  @keyframes hmKb6 { 0% { transform: scale(1); }                             19.44%,100% { transform: scale(1.06); } }                          /* 006 碑へ弱い寄り */

  /* ③スクロール沈み込み：対応ブラウザのみ。未対応＝この節ごと無視（通常表示） */
  @supports (animation-timeline: scroll()) {
    .hero {
      animation: hmSink linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 80vh;
    }
    @keyframes hmSink {
      to { transform: translateY(12%) scale(0.94); opacity: 0.35; }
    }
    /* 沈み込むヒーローはtransformで描画順が上がり、直下の実務帯（開館時間・入場料・券売所）に
       かぶさって文字を隠す（Masami指摘2026-07-14）。帯を上のレイヤーへ＝ヒーローは帯の下へ沈む。
       背景は地色と同値（tokens.cssの--ishi）＝通常時の見た目は不変。本ファイル撤去で元どおり。 */
    .jitsumu { position: relative; z-index: 2; background: #E7E5DC; }
  }
}

/* ---- モバイル組み替え（Masami差し戻し 2026-07-13）----
 * 「開いた瞬間に森が見える」：写真を全画面ヒーローに敷き、確定ブランド文は横書き・小さめで
 * 写真の上に静かに重ねる（文言はDOM不変＝一字も変えない・CSSのみの組み替え）。
 * 縦書き演出はデスクトップ専用へ。蝶の装飾もモバイルでは非表示（Masami可）。 */
@media (max-width: 768px) {
  .hero {
    display: block;
    position: relative;
    padding: 0;
    min-height: 78vh;
    min-height: 78svh;
  }
  .shashin {
    position: absolute;
    inset: 0;
    min-height: 0;
    border: 0;
    margin: 0;            /* 既存の16px 40pxを打ち消し＝端まで写真 */
    animation: none;      /* fade演出の終端transform(8px)を打ち消し */
    transform: none;
    opacity: 1;
  }
  .tate {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    display: block;
    padding: 18px 20px 22px;
    background: linear-gradient(transparent, rgba(18, 24, 19, .58)); /* 可読用の静かな裾（自前写真の上・帰属とは無関係） */
  }
  .tate__name { writing-mode: horizontal-tb; font-size: .95rem; letter-spacing: .3em; color: #fff; }
  .tate__rule { display: none; }
  .tate__body { writing-mode: horizontal-tb; text-orientation: mixed; margin-top: 6px; }
  .inori { font-size: 1.05rem; letter-spacing: .16em; line-height: 1.8; color: #fff; }
  .tate__sub { writing-mode: horizontal-tb; letter-spacing: .3em; color: rgba(255, 255, 255, .75); margin-top: 6px; align-self: auto; }
  .butterfly { display: none; }
}

/* ---- デスクトップのヒーロー背景＝森の深緑（Masami指示 2026-07-13・「シンプルすぎる」解消）----
 * WORLD HERITAGE節と同じ深緑を全幅に敷き、文字は生成り・金系へ反転。
 * 全幅化は::before疑似要素（レイアウト不変・既存CSS不変・本ファイル撤去で完全復元）。 */
@media (min-width: 769px) {
  .hero { position: relative; }
  .hero::before {
    content: '';
    position: absolute;
    inset: 0 calc(50% - 50vw);
    background: #16271D;   /* --mori-deep相当（変数に依存しない自己完結） */
    z-index: -1;
  }
  .tate__name { color: #EDE8DA; }
  .inori { color: #F7F3E6; }
  .tate__sub { color: rgba(237, 232, 218, .68); }
  .tate__rule { background: linear-gradient(rgba(237, 232, 218, .55), rgba(237, 232, 218, .08)); }
  .shashin { border-color: rgba(237, 232, 218, .25); }
}