/* バントゥ：セクション用アニメーション。既存CSSの末尾に追記、または別ファイルで読み込み。 */
/* 本文を隠す初期スタイルは設けません。JavaScriptがなくてもすべて読めます。 */

@media (prefers-reduced-motion: no-preference) {
  /* 前回の納品実績パネルの上辺に、図面を引くようなライン演出 */
  .results .result-groups article.bantwo-motion-entering::before {
    transform-origin: left center;
    animation: bantwo-result-rule .56s cubic-bezier(.22, 1, .36, 1)
      var(--bantwo-enter-delay, 0ms) both;
  }

  @keyframes bantwo-result-rule {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
  }
}

/* 実際にクリックできる問い合わせボタンだけに、小さな反応を付ける */
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .contact-section .contact-button > svg {
    transition: transform .22s cubic-bezier(.22, 1, .36, 1);
  }

  .contact-section .contact-button:hover > svg,
  .contact-section .contact-button:focus-visible > svg {
    transform: translate(5px, -50%);
  }
}

/* 動きを減らす設定・印刷時は、アニメーション中でも本文をすぐ表示 */
@media (prefers-reduced-motion: reduce), print {
  .bantwo-motion-entering {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }

  .results .result-groups article.bantwo-motion-entering::before {
    animation: none !important;
    transform: none !important;
  }

  .contact-section .contact-button > svg {
    transition: none;
  }
}