/* =========================================================
   slide.css
   - index_slide_test.html の <style> を元に、トップのヒーロー用スライド（#stage）へ移植
   - 既存プロジェクトへ安全に入れるため、基本的に #stage 配下へスコープしています
   ========================================================= */

/* #stage 内でのみ使うCSS変数 */
#stage{
  --radius: 10px;
  --shadow: 0 12px 30px rgba(0,0,0,.18);
}

/* box-sizing は stage 内だけに限定 */
#stage,
#stage *{ box-sizing:border-box; }

/* 左ステージ */
#stage{
  position: relative;
  overflow: hidden;
  background:#eee;
  cursor: pointer;

  /* 既存レイアウト（.hero grid）内でも高さが出るように */
  width: 100%;
  aspect-ratio: 1800 / 1316;
}

/* ベース画像 */
#stage .base{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit: cover;
  display:block;
  transform: translateY(0);
  z-index: 1;
  opacity: 1;
  transition: opacity 120ms linear;
  will-change: transform, opacity;
}

/* ✅ swap4中は base を消す */
html[data-scene="swap4"] #stage .base{
  opacity: 0;
}

/* 写真スタック共通 */
#stage .stack{
  position:absolute; inset:0;
  z-index: 2;
  pointer-events:none;
}

/* card共通（デフォルト） */
#stage .card{
  position:absolute;
  width: 34%;
  height: 72%;
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translateY(-18%);
}
#stage .card img{
  width:100%; height:100%;
  object-fit: cover;
  display:block;
}

/* =========================
   3枚：3分割でピタッと
   ========================= */
#stage .stack--3{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  z-index: 2;
  opacity: 0;
  transition: opacity 160ms linear;
  will-change: opacity;
}
#stage .stack--3 .card{
  position: relative;
  inset: auto;
  left: auto; top: auto;
  width: 100%;
  height: 100%;
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
  opacity: 0;
  transform: translateY(0);
}

/* =========================
   4枚：4分割でピタッと
   ========================= */
#stage .stack--4{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  z-index: 2;
  opacity: 0;
  transition: opacity 160ms linear;
  will-change: opacity;
}
#stage .stack--4 .card{
  position: relative;
  inset: auto;
  left: auto; top: auto;
  width: 100%;
  height: 100%;
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
  opacity: 0;
  transform: translateY(0);
}

#stage-concept{
  z-index: 9;
}

/* =========================
   returnBase：swap4の上に base が下（画面外）からスライドイン
   ========================= */
html[data-scene="returnBase"] #stage .base{
  /* ★スタックより上に出す（swap4の上に被せる） */
  z-index: 3;
  opacity: 1;
  animation: baseReturnFromBottom 900ms ease both;
}
@keyframes baseReturnFromBottom{
  from{ transform: translateY(110%); } /* 画面外の下から */
  to  { transform: translateY(0); }
}

/* =========================
   3枚：登場（1&3 上 / 2 下）
   ========================= */
@keyframes dropInTopFull{
  from{ opacity:0; transform: translateY(-110%); }
  to  { opacity:1; transform: translateY(0); }
}
@keyframes dropInBottomFull{
  from{ opacity:0; transform: translateY(110%); }
  to  { opacity:1; transform: translateY(0); }
}

html[data-scene="drop3"] #stage .stack--3 .c1{
  animation: dropInTopFull 900ms cubic-bezier(.2,.8,.2,1) both;
  animation-delay: 0ms;
}
html[data-scene="drop3"] #stage .stack--3 .c2{
  animation: dropInBottomFull 900ms cubic-bezier(.2,.8,.2,1) both;
  animation-delay: 160ms;
}
html[data-scene="drop3"] #stage .stack--3 .c3{
  animation: dropInTopFull 900ms cubic-bezier(.2,.8,.2,1) both;
  animation-delay: 320ms;
}

/* =========================
   4枚：スライド登場（2&4 下）
   ========================= */
@keyframes slideInTop{
  from{ opacity:0; transform: translateY(-120%); }
  to  { opacity:1; transform: translateY(0); }
}
@keyframes slideInBottom{
  from{ opacity:0; transform: translateY(120%); }
  to  { opacity:1; transform: translateY(0); }
}

html[data-scene="slide4"] #stage .stack--4 .card{
  animation: slideInTop 900ms cubic-bezier(.2,.8,.2,1) both;
}
html[data-scene="slide4"] #stage .stack--4 .c2,
html[data-scene="slide4"] #stage .stack--4 .c4{
  animation-name: slideInBottom;
}
html[data-scene="slide4"] #stage .stack--4 .c1{ animation-delay: 0ms; }
html[data-scene="slide4"] #stage .stack--4 .c2{ animation-delay: 130ms; }
html[data-scene="slide4"] #stage .stack--4 .c3{ animation-delay: 260ms; }
html[data-scene="slide4"] #stage .stack--4 .c4{ animation-delay: 390ms; }

/* slide4→swap4でもカード見えたまま */
html[data-scene="swap4"] #stage .stack--4 .card{
  opacity: 1;
  transform: translateY(0);
  animation: none;
}

/* =========================
   swap4：フリップ
   ========================= */
#stage .stack--4 .card{ perspective: 1000px; }

#stage .stack--4 .flip{
  position:absolute;
  inset:0;
  transform-style: preserve-3d;
  transition: transform 1000ms ease;
  transform: rotateY(0deg);
}

#stage .stack--4 .back,
#stage .stack--4 .front{
  position:absolute;
  inset:0;
  backface-visibility: hidden;
}
#stage .stack--4 .front{ transform: rotateY(180deg); }

html[data-scene="swap4"] #stage .stack--4 .flip{
  transform: rotateY(180deg);
}

@media (prefers-reduced-motion: reduce){
  #stage .card,
  #stage .base,
  #stage .stack--4 .flip{
    animation:none !important;
    transition:none !important;
  }
}

@media (max-width: 720px){
  #stage .headline .small{ font-size: 36px; }
  #stage .headline .big{ font-size: 46px; }
}

/* =========================
   シーン切替の空白回避：displayで消さない
   「今」または「直前(0.2秒)」のスタックを表示
   ========================= */

/* 今 or 直前 が drop3 なら 3枚を見せる */
html[data-scene="drop3"] #stage .stack--3,
html[data-prev-scene="drop3"] #stage .stack--3{
  opacity: 1;
}

/* 今 or 直前 が slide4/swap4 なら 4枚を見せる */
html[data-scene="slide4"] #stage .stack--4,
html[data-scene="swap4"]  #stage .stack--4,
html[data-prev-scene="slide4"] #stage .stack--4,
html[data-prev-scene="swap4"]  #stage .stack--4{
  opacity: 1;
}

/* ✅ returnBase中も swap4(=4枚) は表示したままにする */
html[data-scene="returnBase"] #stage .stack--4{
  opacity: 1;
}

/* returnBase中は3枚は消す */
html[data-scene="returnBase"] #stage .stack--3{
  opacity: 0;
}

/* prevの間はカードを「最終状態」に固定 */
html[data-prev-scene="drop3"] #stage .stack--3 .card{
  opacity: 1 !important;
  transform: translateY(0) !important;
  animation: none !important;
}
html[data-prev-scene="slide4"] #stage .stack--4 .card{
  opacity: 1 !important;
  transform: translateY(0) !important;
  animation: none !important;
}

/* prevがswap4のときは、フリップ後の面のまま固定 */
html[data-prev-scene="swap4"] #stage .stack--4 .card{
  opacity: 1 !important;
  transform: translateY(0) !important;
  animation: none !important;
}
html[data-prev-scene="swap4"] #stage .stack--4 .flip{
  transform: rotateY(180deg) !important;
}

/* ✅ returnBase中も swap4の最終状態で固定（prevが外れても残るように） */
html[data-scene="returnBase"] #stage .stack--4 .card{
  opacity: 1 !important;
  transform: translateY(0) !important;
  animation: none !important;
}
html[data-scene="returnBase"] #stage .stack--4 .flip{
  transform: rotateY(180deg) !important;
}