/* =========================================================
   top_animation.css（最適化：演出専用／レイアウトは触らない）
   front-page.css を“通常セクション”で使う前提
   ========================================================= */

:root{
  --fade: 2s;          /* フェード時間（CSSトランジション） */
  --scene: 10s;        /* 1枚のズーム尺（JSのSCENEと同じ10s） */
  --zoom-from: 1.15;   /* 開始スケール（拡大） */
  --zoom-to:   1.00;   /* 終了スケール（等倍） */
}

/* ❌ ここでの #frontBg / .hero-visual のレイアウト指定はしない
   （front-page.css に委ねる。重複/競合防止）
*/

/* 背景レイヤ（演出のみ定義） */
.hero-bg-layer{
  position: absolute; inset: 0;
  background: center/cover no-repeat;
  opacity: 0;
  transition: opacity var(--fade) linear;   /* フェード */
  transform: scale(var(--zoom-from));       /* 初期拡大（ジャンプ防止） */
  will-change: opacity, transform;
  backface-visibility: hidden;
}


/* 一旦ズームを止める　
.hero-bg-layer.is-visible{
  opacity: 1;
  animation: none;
  transform: scale(1);
}
*/

/* 可視化でズーム開始（一定速度 linear）*/
.hero-bg-layer.is-visible{
  opacity: 1;
  animation: heroZoom var(--scene) linear forwards;
}



@keyframes heroZoom{
  0%   { transform: scale(var(--zoom-from)); }
  100% { transform: scale(var(--zoom-to));   }
}

/* 重なり順：表示中を最前面に */
.hero-bg-layer { z-index: 0; }
.hero-bg-layer.is-visible { z-index: 1; }

/* JSが走らなくても1枚目は見せるフェイルセーフ */
.hero-bg-layer.front-layer1{ opacity: 1; }

/* --- デバッグ: どのレイヤが表示中か一目で分かる縁と色（必要時だけ有効化）
.front-layer1 { outline: 3px solid rgba(255,0,0,.6); outline-offset:-6px; background-color: rgba(255,0,0,.10); }
.front-layer2 { outline: 3px solid rgba(0,180,0,.6); outline-offset:-6px; background-color: rgba(0,180,0,.10); }
.front-layer3 { outline: 3px solid rgba(0,128,255,.6); outline-offset:-6px; background-color: rgba(0,128,255,.10); }
*/








/* 一旦1枚目だけ固定表示 
.hero-bg-layer.front-layer1{
  opacity: 1 !important;
  z-index: 2 !important;
  animation: none !important;
  transform: scale(1) !important;
}

.hero-bg-layer.front-layer2,
.hero-bg-layer.front-layer3{
  opacity: 0 !important;
  z-index: 0 !important;
  animation: none !important;
  transform: scale(1) !important;
  pointer-events: none;
}

*/




/* ===============================
   スマホ時：ヒーロー画像のズーム停止
   =============================== */
/*
   @media (max-width: 768px){

  .hero-bg-layer.is-visible{
    animation: none !important;
    transform: scale(1) !important;
  }

  .hero-bg-layer{
    background-size: cover !important;
    background-position: center top !important;
  }

}

*/