/* ============================================================
   motion.css — 非破壊モーションレイヤー（YOUMEX AUTO trade-in LP）
   - 既存の transform ショートハンド（中央寄せ・斜め配置など50超）と
     衝突しないよう、リビールは個別 translate / opacity プロパティで実装。
     個別 translate は transform と「合成」されるため上書きが起きない。
   - すべて .has-motion 配下にスコープ。JS無効 / reduced-motion 時は
     has-motion が付かない => 最初から全要素が見える（コンテンツが消えない）。
   ============================================================ */

/* ---- スクロールリビール（共通の初期状態） ---- */
.has-motion [data-reveal],
.has-motion [data-reveal-children] > * {
  opacity: 0;
  translate: 0 24px;
  transition:
    opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
    translate 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, translate;
}

.has-motion [data-reveal].is-visible,
.has-motion [data-reveal-children].is-visible > * {
  opacity: 1;
  translate: 0 0;
}

/* ---- FV ロード時の段階リビール（やや大きめ・順番に登場） ---- */
.has-motion [data-fv] {
  opacity: 0;
  translate: 0 30px;
  transition:
    opacity 0.85s cubic-bezier(0.22, 0.61, 0.36, 1),
    translate 0.85s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, translate;
}
.has-motion [data-fv].is-visible {
  opacity: 1;
  translate: 0 0;
}

.has-motion [data-fv-children] > * {
  opacity: 0;
  translate: 0 18px;
  transition:
    opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
    translate 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.has-motion [data-fv-children].is-visible > * {
  opacity: 1;
  translate: 0 0;
}

/* ---- CTAボタンの控えめな脈動（box-shadowのみ／レイアウト・transform非干渉） ---- */
@keyframes ym-cta-pulse {
  0%,
  100% {
    box-shadow: 0 4px 4px rgba(8, 168, 64, 0.35), 0 0 0 0 rgba(69, 198, 70, 0);
  }
  50% {
    box-shadow: 0 4px 4px rgba(8, 168, 64, 0.35), 0 0 0 7px rgba(69, 198, 70, 0.13);
  }
}
.has-motion .c-btn {
  animation: ym-cta-pulse 2.8s ease-in-out infinite;
}

/* ---- 二重防御: reduced-motion では一切動かさない ---- */
@media (prefers-reduced-motion: reduce) {
  .has-motion [data-reveal],
  .has-motion [data-reveal-children] > *,
  .has-motion [data-fv],
  .has-motion [data-fv-children] > * {
    opacity: 1 !important;
    translate: 0 0 !important;
    transition: none !important;
  }
  .has-motion .c-btn {
    animation: none !important;
  }
}