/* ==========================================================================
   motion.css — 操作の手応えと、控えめな動き

   方針:
   コピーが「気軽に」「無理なく」「自分のペース」で一貫しているので、
   動きも急がない。イージングは減速のみを基本にする。

   例外は 1 つだけ。ヒーローの「ご契約月無料」バッジ。
   意匠自体が「押された印」の形なので、ここだけわずかに行き過ぎてから
   収まる（--ease-stamp）。判子を押す物理を与えるための 1 箇所限りの逸脱。

   このサイトは実質スマホ向けなので、ホバーに依存しない。
   全員が必ず見るのは「読み込み時のヒーロー」と「押したときの反応」の 2 つ。
   ここに予算を寄せている。

   base.css の prefers-reduced-motion 指定が、ここの transition と
   animation をまとめて無効化する。
   ========================================================================== */

:root {
  /* 減速のみ。終点で行き過ぎない（基本） */
  --ease-settle: cubic-bezier(0.16, 0.68, 0.32, 1);
  /* わずかに行き過ぎて収まる。バッジ専用 */
  --ease-stamp: cubic-bezier(0.34, 1.26, 0.64, 1);

  --dur-press: 110ms;
  --dur-state: 240ms;
  /* ヒーローの登場。短めにして締まった印象にする */
  --dur-hero: 520ms;
  /* スクロールで現れるとき。読む速度に合わせて少しゆったり */
  --dur-enter: 620ms;

  /* 並んだ項目を順に出すときの間隔 */
  --stagger: 70ms;

  /* 影は既存パレットの焦茶から起こす */
  --shadow-rest: 0 2px 8px rgba(91, 61, 42, 0.14);
  --shadow-lift: 0 10px 24px rgba(91, 61, 42, 0.24);
}

/* ==========================================================================
   1. 押したときの反応

   スマホではこれが唯一の手応え。前回は 0.985 倍で知覚できなかったので
   0.96 倍まで沈ませ、応答も速くした。
   ========================================================================== */

.hero-primary-cta,
.problem-primary-cta,
.first-primary-cta,
.pricing-campaign-cta,
.access-primary-cta,
.fixed-cta-button,
.nav-reservation-button,
.mobile-menu-cta,
.thanks-back-button,
.trial-form-submit {
  transition:
    transform var(--dur-state) var(--ease-settle),
    box-shadow var(--dur-state) var(--ease-settle),
    filter var(--dur-state) var(--ease-settle);
}

.hero-primary-cta:active,
.problem-primary-cta:active,
.first-primary-cta:active,
.pricing-campaign-cta:active,
.access-primary-cta:active,
.fixed-cta-button:active,
.nav-reservation-button:active,
.mobile-menu-cta:active,
.thanks-back-button:active,
.trial-form-submit:active:not([disabled]) {
  transform: scale(0.96);
  filter: brightness(0.94);
  box-shadow: var(--shadow-rest);
  transition-duration: var(--dur-press);
}

/* ポインタで操作できる環境だけ浮かせる。
   タッチ端末では hover が張り付いてしまうため当てない。 */
@media (hover: hover) and (pointer: fine) {
  .hero-primary-cta:hover,
  .problem-primary-cta:hover,
  .first-primary-cta:hover,
  .pricing-campaign-cta:hover,
  .access-primary-cta:hover,
  .fixed-cta-button:hover,
  .nav-reservation-button:hover,
  .mobile-menu-cta:hover,
  .thanks-back-button:hover,
  .trial-form-submit:hover:not([disabled]) {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lift);
  }

  /* CTA の中の矢印だけ、ホバーで先へ滑る。行き先を示す */
  .hero-primary-cta:hover .first-cta-arrow,
  .problem-primary-cta:hover .problem-cta-arrow,
  .first-primary-cta:hover .problem-cta-arrow,
  .fixed-cta-button:hover .first-cta-arrow,
  .mobile-menu-cta:hover .first-cta-arrow {
    transform: translateX(3px);
  }
}

.first-cta-arrow,
.problem-cta-arrow {
  transition: transform var(--dur-state) var(--ease-settle);
}

.trial-form-submit[disabled] {
  transform: none;
  box-shadow: none;
  filter: none;
}

/* ==========================================================================
   2. そのほかのリンクとカード

   浮かせない。色味だけが動く。
   ========================================================================== */

.hero-quick-link,
.access-media-card,
.access-sns-link,
.mobile-menu-link,
.footer-privacy-link,
.link {
  transition:
    background-color var(--dur-state) var(--ease-settle),
    border-color var(--dur-state) var(--ease-settle),
    transform var(--dur-state) var(--ease-settle),
    opacity var(--dur-state) var(--ease-settle);
}

@media (hover: hover) and (pointer: fine) {
  .hero-quick-link:hover {
    background-color: #fffaf6;
    border-color: #e2c9b8;
  }

  .access-media-card:hover,
  .access-sns-link:hover {
    opacity: 0.9;
  }

  .mobile-menu-link:hover {
    background-color: #fff4ec;
  }

  .footer-privacy-link:hover,
  .link:hover {
    opacity: 0.7;
  }
}

.hero-quick-link:active,
.access-media-card:active,
.access-sns-link:active,
.mobile-menu-link:active {
  transform: scale(0.975);
  transition-duration: var(--dur-press);
}

/* ==========================================================================
   3. ヒーローの登場

   ページを開いた誰もが見る唯一の瞬間。ばらばらに動かすのではなく、
   上から順に置かれていく 1 つの流れとして組む。

   opacity: 0 はキーフレームの中にだけ書く。基本の指定には書かない。
   こうしておけば、アニメーションが走らない環境でも要素は見えたままになる。
   ========================================================================== */

@keyframes settle-up {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes rays-open {
  from {
    opacity: 0;
    transform: scale(0.68) rotate(-14deg);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes stamp-press {
  from {
    opacity: 0;
    transform: scale(0.84);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* backwards を使う理由:
   待機中は from（opacity 0）を保つが、終わったあとは通常の指定に戻る。
   both だと終了状態が残り、通常の宣言より優先されるため、
   CTA の :active（押し込み）が効かなくなる。

   遅延は短くまとめてある。ここで隠れている時間がそのまま
   「表示が遅い」体感になるため、最後でも 0.6 秒に収める。 */
.hero-location-pill,
.hero-gym-chip,
.hero-main-copy,
.campaign-card,
.hero-primary-cta,
.hero-quick-link {
  animation: settle-up var(--dur-hero) var(--ease-settle) backwards;
}

/* 画面下に固定される CTA は interactions.css で translateX(-50%) して
   中央に寄せている。settle-up を当てるとその指定が上書きされ、
   アニメーション中だけ横にずれる。X 方向の中央寄せを保った専用の動きを使う。 */
@keyframes bar-settle {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%);
  }
}

.fixed-cta {
  animation: bar-settle var(--dur-hero) var(--ease-settle) backwards;
}

.hero-location-pill { animation-delay: 30ms; }
.hero-gym-chip      { animation-delay: 90ms; }
.hero-main-copy     { animation-delay: 140ms; }
.campaign-card      { animation-delay: 300ms; }
.hero-primary-cta   { animation-delay: 380ms; }

.hero-quick-link:nth-child(1) { animation-delay: 440ms; }
.hero-quick-link:nth-child(2) { animation-delay: 480ms; }
.hero-quick-link:nth-child(3) { animation-delay: 520ms; }
.hero-quick-link:nth-child(4) { animation-delay: 560ms; }

.fixed-cta { animation-delay: 600ms; }

/* ---- 見せ場：キャンペーンの印 ----
   放射線が背後から開き、少し遅れてバッジがわずかに行き過ぎて収まる。 */

.badge-rays {
  animation: rays-open 620ms var(--ease-settle) 200ms backwards;
}

.hero-free-month-badge {
  animation: stamp-press 480ms var(--ease-stamp) 260ms backwards;
}

/* ヒーロー写真は動かさない。
   最初に描画される大きな画像なので、動かすと表示が遅く見える。 */

/* ==========================================================================
   4. モバイルメニュー
   ========================================================================== */

@keyframes menu-settle {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.mobile-menu-panel.is-open {
  animation: menu-settle var(--dur-state) var(--ease-settle) backwards;
}

/* パネル内の項目も順に出す */
.mobile-menu-panel.is-open > * {
  animation: settle-up 320ms var(--ease-settle) backwards;
}
.mobile-menu-panel.is-open > *:nth-child(1) { animation-delay: 60ms; }
.mobile-menu-panel.is-open > *:nth-child(2) { animation-delay: 100ms; }
.mobile-menu-panel.is-open > *:nth-child(3) { animation-delay: 140ms; }
.mobile-menu-panel.is-open > *:nth-child(4) { animation-delay: 180ms; }
.mobile-menu-panel.is-open > *:nth-child(5) { animation-delay: 220ms; }
.mobile-menu-panel.is-open > *:nth-child(6) { animation-delay: 260ms; }

.nav-menu-button .icon svg {
  transition: opacity var(--dur-state) var(--ease-settle);
}

.nav-menu-button:active {
  transform: scale(0.9);
  transition: transform var(--dur-press) var(--ease-settle);
}

/* ==========================================================================
   5. FAQ
   ========================================================================== */

.faq-question-inner {
  transition: background-color var(--dur-state) var(--ease-settle);
}

.faq-dropdown.is-open .faq-question-inner {
  background-color: #fff8f4;
}

.faq-question:active .faq-question-inner {
  background-color: #fdf1ea;
  transition-duration: var(--dur-press);
}

.faq-arrow {
  transition: transform var(--dur-state) var(--ease-settle);
}

.faq-answer-wrap .faq-answer {
  opacity: 0;
  transform: translateY(-4px);
  transition:
    opacity var(--dur-state) var(--ease-settle),
    transform var(--dur-state) var(--ease-settle);
}

.faq-dropdown.is-open .faq-answer {
  opacity: 1;
  transform: none;
  transition-delay: 130ms;
}

/* ==========================================================================
   6. 申込フォーム
   ========================================================================== */

.trial-form-input,
.trial-form-textarea {
  transition:
    border-color var(--dur-state) var(--ease-settle),
    box-shadow var(--dur-state) var(--ease-settle);
}

.trial-form-input:focus,
.trial-form-textarea:focus {
  border-color: #bf6e4c;
  box-shadow: 0 0 0 3px rgba(191, 110, 76, 0.14);
  outline: none;
}

.field-error,
.form-status {
  transition: opacity var(--dur-state) var(--ease-settle);
}

.checkbox-input {
  transition: transform var(--dur-press) var(--ease-settle);
}

.checkbox-input:active {
  transform: scale(0.9);
}

/* 申込フォームのカードも、開いたときに一度だけ置かれる */
.trial-form-card,
.thanks-container {
  animation: settle-up var(--dur-enter) var(--ease-settle) 80ms backwards;
}

/* ==========================================================================
   7. スクロールに合わせた出現

   隠す指定は html.js-reveal の下にしか無い。このクラスを付けるのは
   reveal.js だけなので、JS が動かない環境では最初から全部見えている。
   ========================================================================== */

.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity var(--dur-enter) var(--ease-settle),
    transform var(--dur-enter) var(--ease-settle);
}

/* 終点で transform を残さない。
   translateY(0) のままだと、内側の position:absolute の基準がずれる。 */
.js-reveal [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

/* ---- 並んだ項目を順に出す ----
   容器が現れたら、中の項目が --stagger-i の順に続く。
   順序が意味を持つところ（体験の流れ、レビューの STEP）と、
   読み進めるリズムがある一覧（お悩みリスト）にだけ当てている。 */

.js-reveal [data-reveal-group] > * {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity var(--dur-enter) var(--ease-settle),
    transform var(--dur-enter) var(--ease-settle);
  transition-delay: calc(var(--stagger-i, 0) * var(--stagger));
}

.js-reveal [data-reveal-group].is-revealed > * {
  opacity: 1;
  transform: none;
}

/* 比較表の矢印は「問題が解決に変わる」ことを表している。
   現れたあと一度だけ右へ押し出して、その意味を読ませる。 */
@keyframes arrow-nudge {
  0%   { transform: translateX(0); }
  45%  { transform: translateX(4px); }
  100% { transform: translateX(0); }
}

.js-reveal [data-reveal-group].is-revealed .comparison-arrow-text {
  animation: arrow-nudge 620ms var(--ease-settle) backwards;
  animation-delay: calc(var(--stagger-i, 0) * var(--stagger) + 380ms);
}

/* 料金セクションの放射線は、ヒーローの印と同じ素材。
   ここでも同じ開き方をさせて呼応させる。 */
.js-reveal [data-reveal].is-revealed .pricing-free-rays {
  animation: rays-open 720ms var(--ease-settle) 220ms backwards;
}