/* ===================================================================
   オープニング演出（トップ初回のみ）
   足跡が下から歩いてロゴへ集結 → 羊皮紙の幕が上下に開いて MV へ
   - 演出本体は CSS が担当（JS 無効でも最後は必ず開く forwards 設計）
   - 再生中は html.is-opening でスクロールロック（header.php のインライン script が付与）
   - js/opening.js は再生後の sessionStorage 記録・DOM 除去のみ
=================================================================== */

/* 再生中スクロールロック */
html.is-opening {
  overflow: hidden;
}

/* 再訪時（sessionStorage 済み）は即非表示 */
.opening.is-skip {
  display: none;
}

.opening {
  position: fixed;
  inset: 0;
  z-index: 1000;
  overflow: hidden;
  /* 終盤に非インタラクティブ化（JS が無くても操作を奪わない） */
  animation: opening-finish 0.01s linear 3.1s forwards;
}

/* --- 羊皮紙の幕（上下2枚で全画面を覆う） --- */
/* 両幕とも「ビューポート全体の1枚テクスチャを覗く窓」として描画し、
   境界でテクスチャを連続させる（cover を各幕に効かせると縮尺がズレて隙間に見えるため）。 */
.opening__panel {
  position: absolute;
  left: 0;
  width: 100%;
  height: 50%;
  background-color: var(--color-parchment);
  background-image: url(../images/common/bg.png);
  background-size: 100% 200%;
  background-repeat: no-repeat;
  will-change: transform;
}

.opening__panel--top {
  top: 0;
  /* サブピクセル丸めによる中央のヘアライン隙間を防ぐため 1px 重ねる */
  height: calc(50% + 1px);
  background-position: center top;
  animation: opening-curtain-up 0.6s cubic-bezier(0.7, 0, 0.3, 1) 2.5s forwards;
}

.opening__panel--bottom {
  bottom: 0;
  background-position: center bottom;
  animation: opening-curtain-down 0.6s cubic-bezier(0.7, 0, 0.3, 1) 2.5s forwards;
}

/* --- 足跡＋ロゴのステージ（幕より前面） --- */
.opening__stage {
  position: absolute;
  inset: 0;
  z-index: 2;
  /* 幕が開く直前にステージごとフェードアウト */
  animation: opening-stage-out 0.4s ease 2.2s forwards;
}

/* --- 足跡（footprint.png 1枚を回転・反転で歩行表現） --- */
.opening__paw {
  position: absolute;
  width: 60px;
  height: auto;
  opacity: 0;
  /* 各足跡の回転・反転は --rot / --flip で個別指定し、出現アニメ中も維持する */
  transform: translateY(14px) scale(0.5) rotate(var(--rot, 0deg)) scaleX(var(--flip, 1));
  animation: paw-step 0.42s ease-out forwards;
}

/* 下から中央へジグザグに上る配置。左右交互に反転・回転させて歩みを表現 */
.opening__paw--1 {
  top: 86%;
  left: 43%;
  --rot: -6deg;
  --flip: 1;
  animation-delay: 0.15s;
}

.opening__paw--2 {
  top: 79%;
  left: 52%;
  --rot: 8deg;
  --flip: -1;
  animation-delay: 0.33s;
}

.opening__paw--3 {
  top: 71%;
  left: 44%;
  --rot: -7deg;
  --flip: 1;
  animation-delay: 0.51s;
}

.opening__paw--4 {
  top: 64%;
  left: 53%;
  --rot: 9deg;
  --flip: -1;
  animation-delay: 0.69s;
}

.opening__paw--5 {
  top: 57%;
  left: 45%;
  --rot: -6deg;
  --flip: 1;
  animation-delay: 0.87s;
}

.opening__paw--6 {
  top: 51%;
  left: 52%;
  --rot: 7deg;
  --flip: -1;
  animation-delay: 1.05s;
}

/* --- ロゴ（足跡到達後に中央でフェード＋スケールイン） --- */
.opening__logo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 280px;
  height: auto;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.86);
  animation: logo-in 0.6s cubic-bezier(0.2, 0.8, 0.3, 1) 1.25s forwards;
}

/* ===================== keyframes ===================== */

/* 足跡：ポンと出現して定位置に残る（回転・反転は維持） */
@keyframes paw-step {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.5) rotate(var(--rot, 0deg)) scaleX(var(--flip, 1));
  }
  60% {
    opacity: 1;
    transform: translateY(0) scale(1.08) rotate(var(--rot, 0deg)) scaleX(var(--flip, 1));
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(var(--rot, 0deg)) scaleX(var(--flip, 1));
  }
}

/* ロゴ：中央でふわっと拡大表示 */
@keyframes logo-in {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.86);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

/* ステージ全体のフェードアウト */
@keyframes opening-stage-out {
  to {
    opacity: 0;
  }
}

/* 幕：上半分が上へ、下半分が下へスライドして開く */
@keyframes opening-curtain-up {
  to {
    transform: translateY(-100%);
  }
}

@keyframes opening-curtain-down {
  to {
    transform: translateY(100%);
  }
}

/* 終了：オーバーレイを不可視・非インタラクティブに */
@keyframes opening-finish {
  to {
    visibility: hidden;
    pointer-events: none;
  }
}

/* ===================== SP（1023px 以下） ===================== */
@media (max-width: 1023px) {
  .opening__panel {
    background-image: url(../images/common/bg_sp.png);
  }
  .opening__paw {
    width: 44px;
  }

  /* SP は足跡を4個に間引く（5・6は非表示） */
  .opening__paw--5,
  .opening__paw--6 {
    display: none;
  }

  /* 4個で下から中央へ届くよう配置を調整 */
  .opening__paw--1 {
    top: 82%;
    left: 40%;
  }
  .opening__paw--2 {
    top: 73%;
    left: 55%;
  }
  .opening__paw--3 {
    top: 64%;
    left: 41%;
  }
  .opening__paw--4 {
    top: 56%;
    left: 54%;
  }

  .opening__logo {
    width: 190px;
  }
}

/* ===================== アクセシビリティ（視差効果を減らす） ===================== */
@media (prefers-reduced-motion: reduce) {
  /* 歩行演出は省略。ロゴを静止表示し、短いフェードで MV へ */
  .opening__paw {
    display: none;
  }

  .opening__logo {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    animation: none;
  }

  .opening__stage {
    animation: opening-stage-out 0.4s ease 0.6s forwards;
  }

  .opening__panel--top,
  .opening__panel--bottom {
    animation: none;
  }

  .opening {
    animation: opening-finish 0.01s linear 1s forwards;
  }
}