/* =========================================================
   top_animation.css — ヒーロー3枚スライド演出（フェード＋ズーム）
   - レイアウトは front-page.css 側に任せる
   - ここでは「演出（フェード＋ズーム）」だけ定義
   ========================================================= */

:root{
  --hero-fade: 2s;            /* フェード時間 */
  --hero-scene: 10s;          /* 1枚あたりの表示時間（JSの間隔と揃える） */
  --hero-zoom-from: 1.05;     /* 開始ズーム（少し拡大） */
  --hero-zoom-to: 1.0;        /* 終了ズーム（等倍） */
}

/* =========================================================
   PC（769px〜）
   ========================================================= */
@media (min-width: 769px){

  /* 背景レイヤ：演出のみ定義 */
  .hero-bg-layer{
    position: absolute;
    inset: 0;
    background: center / cover no-repeat;
    opacity: 0;
    transform: scale(var(--hero-zoom-from));          /* 最初は少し拡大 */
    transition: opacity var(--hero-fade) linear;      /* フェード用 */
    will-change: opacity, transform;
    backface-visibility: hidden;
    z-index: 0;
  }

  /* 表示中のレイヤ */
  .hero-bg-layer.is-visible{
    opacity: 1;
    animation: heroZoom var(--hero-scene) linear forwards;
    z-index: 1;
  }

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

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

/* =========================================================
   モバイル（〜768px）
   - フェードのみ（ズーム演出は不要）
   ========================================================= */
@media (max-width: 768px){

  .hero-bg-layer{
    opacity: 0;
    transition: opacity 2s ease; /* フェードさせたいなら */
  }

  .hero-bg-layer.is-visible{
    opacity: 1;
  }
}