Fix Safari IntersectionObserver by reducing extreme rootMargin values

[Copilot]

Safari's IntersectionObserver fails to trigger inView callbacks when rootMargin uses extreme negative values like -1000px. This caused sections to not appear on Safari while working correctly on Chrome/Firefox.

Changes

• Reduced rootMargin values to stay within target element heights (~300px):

  • XL (≥1280px): -1000px → -300px
  • SM (≥640px): -350px → -200px
  • Base: -200px → -100px

• Refactored duplicated logic into shared function:

const getResponsiveRootMargin = (): string => {
  if (window.innerWidth >= 1280) return "-300px";
  if (window.innerWidth >= 640) return "-200px";
  return "-100px";
};

const inViewOptions = {
  rootMargin: getResponsiveRootMargin(),
  triggerOnce: true,
};

const [ref1, inView1] = useInView(inViewOptions);
const [ref2, inView2] = useInView(inViewOptions);
// ...

Original prompt

---

This section details on the original issue you should resolve

<issue_title>safari において一部セクションが表示されない</issue_title>
<issue_description># 問題概要

• Safariでのみ、一部セクションが正常に表示されない

詳細

• 該当要素は IntersectionObserver の inView 判定に依存
• rootMargin を -1000px のような大きな負値に設定している
  

  wakaba/src/routes/index.tsx

  Line 18 in 1d3b666

  if (window.innerWidth >= 1280) return "-1000px";

• 対象要素の高さは約 300px

原因

• Safari は IntersectionObserver の rootMargin 設定が極端なマイナス値だと、inView 判定が正常に機能しない
• 他ブラウザ（Chrome/Firefox）では動作するが、Safari では判定ロジックの違い・バグにより発火しない可能性が高い

解決策

• rootMargin の絶対値を（おそらく）対象の高さ以内に抑える必要がある
  • ex) -1000px -> -300px 程度に修正
• 値を調整した上で Safari・他ブラウザ双方で動作確認を行う</issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes safari において一部セクションが表示されない #3

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.