/* 出現アニメーション（既存） */
html.js-motion [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity .7s ease, transform .7s ease; }
html.js-motion [data-reveal].is-in { opacity: 1; transform: none; }

/* 出現アニメーション（子要素を少しずつ遅らせる） */
html.js-motion [data-reveal-stagger] > * {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s ease, transform .6s ease;
}
html.js-motion [data-reveal-stagger].is-in > * { opacity: 1; transform: none; }
html.js-motion [data-reveal-stagger].is-in > *:nth-child(1) { transition-delay: 0s; }
html.js-motion [data-reveal-stagger].is-in > *:nth-child(2) { transition-delay: .07s; }
html.js-motion [data-reveal-stagger].is-in > *:nth-child(3) { transition-delay: .14s; }
html.js-motion [data-reveal-stagger].is-in > *:nth-child(4) { transition-delay: .21s; }
html.js-motion [data-reveal-stagger].is-in > *:nth-child(5) { transition-delay: .28s; }
html.js-motion [data-reveal-stagger].is-in > *:nth-child(n+6) { transition-delay: .35s; }

/* 見出しの金の下線を左右に伸ばす */
html.js-motion .h2-deco::after {
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
  transition: transform .8s cubic-bezier(.2, .8, .2, 1) .1s;
}
html.js-motion .h2-deco.is-in::after { transform: translateX(-50%) scaleX(1); }

/* 金のボタンに一度だけ光を走らせる（画面に入ったとき） */
html.js-motion .btn-gold { position: relative; overflow: hidden; }
html.js-motion .btn-gold::before {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,.7), rgba(255,255,255,0));
  transform: skewX(-18deg);
  opacity: 0;
  pointer-events: none;
}
html.js-motion .btn-gold.is-shine::before { animation: fdf-shine 1.1s ease-out .1s 2; }
@keyframes fdf-shine {
  0% { left: -60%; opacity: 0; }
  12% { opacity: 1; }
  100% { left: 115%; opacity: 0; }
}

/* スクロール進捗（上端の細い金の線） */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(100%, var(--lp-max));
  height: 2px;
  z-index: 30;
  pointer-events: none;
  background: rgba(9,37,69,.12);
}
.scroll-progress > span {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--gold-d), var(--gold-l));
  transition: width .12s linear;
}

/* FV 末尾のスクロール誘導（スマホは FV の最後に流し込み、PC は pc.css で画面右端に固定） */
.scroll-cue {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  pointer-events: none;
  transition: opacity .4s ease;
}
.scroll-cue-label { font-size: 9px; letter-spacing: .3em; color: var(--gold-l); }
.scroll-cue-line {
  display: block;
  width: 1px;
  height: 34px;
  background: linear-gradient(180deg, rgba(240,215,143,0), var(--gold-l));
  transform-origin: top;
}
html.js-motion .scroll-cue-line { animation: fdf-cue 1.8s ease-in-out infinite; }
@keyframes fdf-cue {
  0% { transform: scaleY(.2); opacity: 0; }
  40% { opacity: 1; }
  100% { transform: scaleY(1); opacity: 0; }
}
.scroll-cue.is-hidden { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  html.js-motion [data-reveal],
  html.js-motion [data-reveal-stagger] > * { opacity: 1; transform: none; transition: none; }
  html.js-motion .h2-deco::after { transform: translateX(-50%) scaleX(1); transition: none; }
  html.js-motion .btn-gold.is-shine::before { animation: none; }
  html.js-motion .scroll-cue-line { animation: none; opacity: .8; }
  .scroll-progress > span { transition: none; }
  [data-parallax] { transform: none !important; }
}