/* ========================================================== Fade Up Scroll Animation — Lit BARBER Vanilla JS / 依存ライブラリなし IntersectionObserver ベース 画像消失バグ対策済み ========================================================== */ /* ---------------------------------------------------------- 1. 初期状態（非表示） .scroll-reveal を付けた要素だけが対象 ロゴ・アイコン等は巻き込まれない ---------------------------------------------------------- */ .scroll-reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); will-change: opacity, transform; } /* ---------------------------------------------------------- 2. 表示状態 ---------------------------------------------------------- */ .scroll-reveal.is-visible { opacity: 1; transform: translateY(0); } /* ---------------------------------------------------------- 3. スタッガー用ディレイ ---------------------------------------------------------- */ .scroll-reveal.delay-1 { transition-delay: 0.1s; } .scroll-reveal.delay-2 { transition-delay: 0.2s; } .scroll-reveal.delay-3 { transition-delay: 0.3s; } .scroll-reveal.delay-4 { transition-delay: 0.4s; } /* ---------------------------------------------------------- 4. セクション別バリエーション ---------------------------------------------------------- */ /* ヒーロー直下 — 移動距離大きめ */ .scroll-reveal--hero { transform: translateY(50px); transition-duration: 1s; } .scroll-reveal--hero.is-visible { transform: translateY(0); } /* スタッフセクション — ゆっくり */ .scroll-reveal--slow { transition-duration: 1.0s; } /* メニュー / プライス — キビキビ */ .scroll-reveal--fast { transition-duration: 0.45s; transform: translateY(20px); } .scroll-reveal--fast.is-visible { transform: translateY(0); } /* ---------------------------------------------------------- 5. JS無効時のフォールバック を付けておく ---------------------------------------------------------- */ .no-js .scroll-reveal { opacity: 1 !important; transform: none !important; transition: none !important; } /* ---------------------------------------------------------- 6. モーション軽減設定を尊重 ---------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .scroll-reveal { opacity: 1 !important; transform: none !important; transition: none !important; } }