@charset "UTF-8";
/* ==========================================================================
   animations.css — アニメーション・トランジション定義／reduced-motion
   合資会社 田野モータース 様 デザイン提案用デモサイト

   担当範囲（設計書 §7 アニメーション定義 準拠）
     1. スクロールイン         [data-reveal]
     2. ヒーロー写真ズーム      .p-hero__img（オーバーレイは静止させたまま触らない）
     3. ヘッダー縮小            .l-header / .is-scrolled のトランジション定義
     4. 下部固定バー出現        .l-bottombar のトランジション定義
     5. FAQ開閉                .c-faq__a のトランジション定義
     6. モーダル                .c-modal のトランジション定義
     7. トースト                .c-toast のトランジション定義
     8. prefers-reduced-motion  上記すべての無効化

   ⚠️ このファイルは「値そのもの」（色・高さ・余白など）を再定義しない。
      色や寸法の実値は l-*／c-* の各コンポーネントファイルが持つ。ここでは
      「状態が変わったときにどう動くか（duration・easing・transform）」だけを扱う。
   ⚠️ variables.css 以外でCSSカスタムプロパティを新規定義しないこと（付録B-2）。
      §7 の表にある 200ms（モーダル・トースト）は variables.css の
      --dur-fast(150ms) / --dur-base(300ms) のどちらとも一致しないため、
      新規トークンを作らず整数値のリテラルとしてそのまま書く。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. スクロールイン [data-reveal]
   ⚠️ 最重要：JS不発時に不可視で固まる事故を防ぐため、初期 opacity:0 は
      html.js-enabled が付与されているときのみ適用する。
      .js-enabled は main.js が <html> に付与する（本ファイルの担当外）。
      IntersectionObserver 側の実装は js/scroll-reveal.js（本ワーカー担当）。
   -------------------------------------------------------------------------- */
.js-enabled [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity var(--dur-slow) var(--ease),
    transform var(--dur-slow) var(--ease);
}

.js-enabled [data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* JSが動かない場合、あるいは .js-enabled 付与前は常に可視。
   デフォルトで opacity は 1 のため本来は不要だが、他ファイルからの
   意図しない上書きに備えて明示的に固定する。 */
html:not(.js-enabled) [data-reveal] {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------------------------
   2. ヒーロー写真レイヤーのズーム
   ⚠️ 適用先は .p-hero__img（写真そのもの）のみ。
      .p-hero__overlay には一切のtransform/animationを与えないこと
      （設計書 §4.3：オーバーレイが動くと実効αが時間変化し検証が成立しなくなる）。
   読み込み後に1回だけ再生し、ループしない（animation-fill-mode: forwards）。
   -------------------------------------------------------------------------- */
@keyframes tm-hero-zoom {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.05);
  }
}

.p-hero__img {
  transform-origin: center center;
  animation: tm-hero-zoom var(--dur-hero-zoom) linear forwards;
  will-change: transform;
}

/* --------------------------------------------------------------------------
   3. ヘッダー縮小
   ⚠️ 高さ・背景色・backdrop-filter の実値は l-header を定義するファイルが持つ。
      ここでは .is-scrolled 切り替え時の動き方だけを定義する。
   -------------------------------------------------------------------------- */
.l-header {
  transition:
    height var(--dur-base) var(--ease),
    background-color var(--dur-base) var(--ease),
    backdrop-filter var(--dur-base) var(--ease),
    box-shadow var(--dur-base) var(--ease);
}

/* --------------------------------------------------------------------------
   4. 下部固定バー出現（モバイルのみ）
   ⚠️ 表示・非表示そのものは [hidden] 属性（JS担当）で切り替える。
      .is-visible は [hidden] 解除後にJSが1フレーム遅れて付与する想定。
      ここでは「隠れている位置 → 定位置」への動き方だけを定義する。
   -------------------------------------------------------------------------- */
.l-bottombar {
  transform: translateY(100%);
  transition: transform var(--dur-base) var(--ease);
}

.l-bottombar.is-visible {
  transform: translateY(0);
}

/* --------------------------------------------------------------------------
   5. FAQ開閉（ネイティブ <details>／<summary>）
   ⚠️ ブラウザ既定では details:not([open]) の中身は display:none になり、
      grid-template-rows のトランジションが成立しない。
      author通常優先度のCSSはUA通常優先度のCSSに常に勝つため、
      .c-faq__a に display:grid を明示するだけで既定の非表示を上書きできる。
      これにより js/faq.js が無くてもネイティブ open 属性の切り替えだけで
      開閉アニメーションが成立する（JS不発時のグレースフルデグラデーション）。
   -------------------------------------------------------------------------- */
.c-faq__a {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition: grid-template-rows var(--dur-base) var(--ease);
}

.c-faq__a > * {
  /* グリッドアイテムの min-height:auto を打ち消し、0fr まで完全に潰れるようにする */
  min-height: 0;
}

.c-faq__item[open] > .c-faq__a {
  grid-template-rows: 1fr;
}

/* --------------------------------------------------------------------------
   6. モーダル（デモ告知専用 <dialog class="c-modal">）
   フェード＋scale(.98)→1／200ms／ease-out（設計書 §7）。
   @starting-style + transition-behavior: allow-discrete により、
   <dialog> の display:none ⇔ 表示 の切り替え自体もアニメーションの対象にする。
   ⚠️ 非対応ブラウザでは単に瞬時表示になるだけで、機能は損なわれない。
   -------------------------------------------------------------------------- */
.c-modal {
  opacity: 0;
  transform: scale(.98);
  transition:
    opacity 200ms ease-out,
    transform 200ms ease-out,
    overlay 200ms ease-out allow-discrete,
    display 200ms ease-out allow-discrete;
}

.c-modal[open] {
  opacity: 1;
  transform: scale(1);
}

@starting-style {
  .c-modal[open] {
    opacity: 0;
    transform: scale(.98);
  }
}

.c-modal::backdrop {
  opacity: 0;
  transition:
    opacity 200ms ease-out,
    overlay 200ms ease-out allow-discrete,
    display 200ms ease-out allow-discrete;
}

.c-modal[open]::backdrop {
  opacity: 1;
}

@starting-style {
  .c-modal[open]::backdrop {
    opacity: 0;
  }
}

/* --------------------------------------------------------------------------
   7. トースト（電話番号コピー通知）
   フェード＋translateY(8px)→0／200ms／ease-out（設計書 §7）。
   表示位置・背景色などの実値は c-toast の静的スタイルを持つファイルが担当。
   [hidden] の解除は js/tel-copy.js（本ファイルの担当外）。
   -------------------------------------------------------------------------- */
.c-toast {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 200ms ease-out, transform 200ms ease-out;
}

.c-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================================
   8. prefers-reduced-motion
   設計書 §7.1 準拠。全アニメーション・全トランジションを実質ゼロにし、
   スムーススクロールも無効化する。
   ⚠️ ヒーローズームは animation の transform を !important で明示的に
      打ち消す（!important 付き通常優先度の宣言は animation の計算値より
      常に強いため、8000ms アニメーションの終端値に取り残される事故を防げる）。
   ⚠️ *::backdrop は擬似要素のため *, *::before, *::after には含まれない。
      モーダル背景のフェードも確実に止めるため個別に追加する。
   ⚠️ CSS側の対応だけでは [data-reveal] の初期 opacity:0 は消せない
      （.is-visible が付くまでは 0 のまま）。js/scroll-reveal.js 側でも
      matchMedia が真の場合は Observer を張らず全要素を即座に可視化する。
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after,
  *::backdrop {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }

  .p-hero__img {
    animation: none !important;
    transform: none !important;
  }
}