/* ========================================================================== motion.css — 読み込み演出とスクロール連動（全ページ共通） DESIGN.md 0.6 temporalQuality: static の但し書きの内側にある動きだけを置く。 演出のタイミング・距離・イージングの変数も、すべてこのファイルに集める。 トップ固有の視差（.intro__mock）は top.css に置く。 ========================================================================== */ /* -------------------------------------------------------------------------- 1. 読み込み直後の導入演出（この節だけで完結させる） DESIGN.md 0.6「読み込み表示以外のアニメーションを設けない」の但し書きの内側。 タイミング・距離・イージングはすべて下の変数で変える。他の場所には書かない。 JS には依存しない（CSS の @keyframes と fill-mode: both だけで組む）。 白50%の膜は .page-bg の中に置く。ヒーローだけに掛けるとスクロール時に 膜の境目が線として見えるため、ページ全体の地図が淡くなる側を採った。 膜は演出後も 0.5 のまま残す（カンプのヒーローの明るさに合わせた最終状態）。 -------------------------------------------------------------------------- */ :root { --intro-bg-delay: 0ms; /* 1 背景 */ --intro-bg-dur: 800ms; --intro-veil-delay: 300ms; /* 2 白の膜 */ --intro-veil-dur: 800ms; --intro-veil-opacity: 0.5; /* 膜の最終濃度。演出後もこの値で残る */ --intro-item-dur: 700ms; /* 3〜4 ロゴ／タグライン */ --intro-item-dur-fast: 450ms; /* 5 検索欄＋ボタン（767px以下は「場所を調べる」ボタン）と、2節のスクロール連動 */ --intro-item-1-delay: 600ms; --intro-item-2-delay: 720ms; --intro-item-3-delay: 840ms; --intro-rise: 24px; /* 下から出る距離 */ --intro-ease-item: cubic-bezier(0, 0.55, 0.45, 1); /* easeOutCirc */ } @keyframes intro-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes intro-veil { from { opacity: 0; } to { opacity: var(--intro-veil-opacity); } } @keyframes intro-rise { from { opacity: 0; transform: translateY(var(--intro-rise)); } to { opacity: 1; transform: translateY(0); } } .page-bg img { animation: intro-fade var(--intro-bg-dur) ease-out var(--intro-bg-delay) both; } .page-bg::after { content: ""; position: absolute; inset: 0; background-color: #FFFFFF; opacity: var(--intro-veil-opacity); animation: intro-veil var(--intro-veil-dur) ease-out var(--intro-veil-delay) both; } .hero__logo { animation: intro-rise var(--intro-item-dur) var(--intro-ease-item) var(--intro-item-1-delay) both; } .hero__tagline { animation: intro-rise var(--intro-item-dur) var(--intro-ease-item) var(--intro-item-2-delay) both; } /* 5 は検索のまとまり。768px以上は検索欄＋ボタン、767px以下は「場所を調べる」ボタン。 どちらも1つの単位として同じ遅延で動かす（一方は display: none で見えない） */ .search--hero, .btn-open--hero { animation: intro-rise var(--intro-item-dur-fast) var(--intro-ease-item) var(--intro-item-3-delay) both; } /* 動きを減らす設定では演出を行わず、最初から終了後の状態を見せる。 膜は opacity: var(--intro-veil-opacity) の指定がそのまま残るので 0.5 で置かれる。 */ @media (prefers-reduced-motion: reduce) { .page-bg img, .page-bg::after, .hero__logo, .hero__tagline, .search--hero, .btn-open--hero { animation: none; } } /* -------------------------------------------------------------------------- 2. スクロールに応じた下層テキストの表示（この節だけで完結させる） 1節の導入演出と同じ距離・イージングを使い回す。距離 --intro-rise、 イージング --intro-ease-item。長さは検索欄＋ボタンと同じ --intro-item-dur-fast。 段の間隔だけここで持つ。 初期状態を透明にするのは が付いているときだけ。 このクラスは のインラインスクリプトが最初の描画より前に付ける。 JS が動かない環境ではクラスが付かず、本文は最初から表示されたままになる。 段数 --reveal-i は site.js がセクションごとに 0 から振り直す。 -------------------------------------------------------------------------- */ :root { --reveal-step: 80ms; /* 同じセクション内で1段ずつ遅らせる量 */ } .js-reveal .reveal { opacity: 0; transform: translateY(var(--intro-rise)); transition: opacity var(--intro-item-dur-fast) var(--intro-ease-item), transform var(--intro-item-dur-fast) var(--intro-ease-item); transition-delay: calc(var(--reveal-i, 0) * var(--reveal-step)); } .js-reveal .reveal.is-revealed { opacity: 1; transform: translateY(0); } /* 動きを減らす設定では発火させず、最初から表示された状態にする */ @media (prefers-reduced-motion: reduce) { .js-reveal .reveal, .js-reveal .reveal.is-revealed { opacity: 1; transform: none; transition: none; } }