/* * Animations — thai-massage (hydrogen-station からハードコピー / CLAUDE.md ルール7) * Spec: DESIGN.md §5 * * 共通アニメーション: * - fade-in-up: スクロールインで下から立ち上がる * site-runtime/scroll-observer.ts が IntersectionObserver で .is-visible を付与 * - ken-burns: hero.css 内で local 定義 (Hero 専用) * - bounce: hero.css 内で local 定義 (CONTINUE 矢印専用) * * 適用ガイド (どこに fade-in-up を付けるか): * ✅ コンテンツ的に意味のあるセクション: * - .section-header / .faq-item / .therapist-card / .course-card / .voice-card * - .shop-card / .blog-card / .numbered-section / .concept-section * ❌ 付けてはいけない: * - .hero (即視認が必要) * - .site-header (固定配置のヘッダ) * - .gallery-grid (ホバーで動くため) * * a11y: prefers-reduced-motion で完全無効化 */ .fade-in-up { opacity: 0; /* slide-up reveal: 下から立ち上がる。初期 translateY を 24px に */ transform: translateY(24px); transition: opacity 0.8s var(--easing-standard), transform 0.8s var(--easing-standard); will-change: opacity, transform; } .fade-in-up.is-visible { opacity: 1; transform: translateY(0); will-change: auto; } /* * Stagger ユーティリティ（DESIGN.md §5 / §6-3） * * 親に .stagger を付け、その直下に並ぶ .fade-in-up へ段階的な transition-delay を付与する。 * （例: index の Hero 直下 Menu teaser カード群。stagger 配置自体は top ページ側が行う。 * ここではユーティリティを提供する。） * * 1〜6 番目に 0 / 80 / 160 / 240 / 320 / 400ms を付与（80ms 刻み）。 * 7 番目以降は 400ms に頭打ち（待ち時間が長くなりすぎないように）。 * delay は反応性のため opacity/transform の transition にのみ効かせる。 */ .stagger > .fade-in-up { transition-delay: 400ms; } .stagger > .fade-in-up:nth-child(1) { transition-delay: 0ms; } .stagger > .fade-in-up:nth-child(2) { transition-delay: 80ms; } .stagger > .fade-in-up:nth-child(3) { transition-delay: 160ms; } .stagger > .fade-in-up:nth-child(4) { transition-delay: 240ms; } .stagger > .fade-in-up:nth-child(5) { transition-delay: 320ms; } .stagger > .fade-in-up:nth-child(6) { transition-delay: 400ms; } /* prefers-reduced-motion: アニメーション無効化、即可視。delay も無効化 */ @media (prefers-reduced-motion: reduce) { .fade-in-up { opacity: 1; transform: none; transition: none; } .stagger > .fade-in-up, .stagger > .fade-in-up:nth-child(1), .stagger > .fade-in-up:nth-child(2), .stagger > .fade-in-up:nth-child(3), .stagger > .fade-in-up:nth-child(4), .stagger > .fade-in-up:nth-child(5), .stagger > .fade-in-up:nth-child(6) { transition-delay: 0ms; } } /* * no-js フォールバック * * をデフォルトとし、site-runtime bundle が起動成功時に * class を除去する。bundle ロード失敗 (CSP / network / JS error) のときは * no-js が残り続け、fade-in-up 要素は opacity:1 で表示される。 * * 結果: site-runtime 起動失敗時でもコンテンツは見える (アニメは失われる)。 * 原則「コンテンツ可視性 > アニメーション体験」。 */ .no-js .fade-in-up { opacity: 1; transform: none; transition: none; } .no-js .stagger > .fade-in-up { transition-delay: 0ms; }