/* ホーム初回ロードのオープニング演出。 * 表示の是非は home-loader-gate.js が に付ける data-home-loader が * すべて決める: 属性なし（再訪・JS無効・reduced-motion）なら display:none の * ままで、ちらつきも出ない。演出本体は home-loader.js、動画のソースは * loader-video/（Remotion）。 */ .home-loader { display: none; } html[data-home-loader] .home-loader { display: block; position: fixed; inset: 0; /* サイトチャット(9000)より上。ページ内の何よりも手前に出す */ z-index: 12000; /* 動画がデコードされるまでの数百msはイラストの紙色を見せる */ background: #f4efe6; opacity: 1; /* フェイルセーフ: gate が属性を付けた後に home-loader.js が一切 * 動かなくても、9秒後にはこのキーフレームがオーバーレイを消して * ページを操作可能に戻す。正常系（動画5秒＋フェード、遅くとも * 7.5秒のJSタイマー）より必ず後ろで、かつ先に JS が DOM から * 取り除くので、通常は発火前に消える。 */ animation: home-loader-failsafe 600ms ease 9s forwards; } .home-loader__video { position: absolute; inset: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } /* 奥南会ロゴ。動画には文字を焼き込まず、DOM側で重ねる */ .home-loader__logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(200px, 44vw); height: auto; opacity: 0; animation: home-loader-logo 1200ms ease 400ms forwards; /* イラストの上でも沈まないように、ごく薄い光背 */ filter: drop-shadow(0 0 24px rgba(244, 239, 230, 0.9)); transition: filter 600ms ease, transform 600ms ease, top 600ms ease, bottom 600ms ease, width 600ms ease; } /* フィナーレ: 動画終盤にワイプが画面を深緑に染めるので、黒い書のロゴは * そのままでは溶けて見えない。home-loader.js が動画の残り時間を見て * is-finale を付けた瞬間、紙色に反転させて画面の芯へ寄せ、 * 「奥南会」で締めてからヒーローへ渡す */ .home-loader.is-finale .home-loader__logo { top: 50%; bottom: auto; transform: translate(-50%, -50%); width: min(240px, 56vw); /* 黒→白へ反転し、sepia でわずかに紙の温度を足す */ filter: brightness(0) invert(1) sepia(0.14) drop-shadow(0 0 18px rgba(14, 44, 32, 0.6)); } .home-loader.is-done { opacity: 0; pointer-events: none; transition: opacity 600ms ease; } @keyframes home-loader-failsafe { to { opacity: 0; visibility: hidden; pointer-events: none; } } @keyframes home-loader-logo { to { opacity: 1; } } /* 縦画面（＝電話。閲覧者のほとんど）も画面いっぱいに見せる。 * 見切れ対策は CSS でなく動画側: 縦版は電話の実比率 19.5:9 で書き出し、 * 絵ごとに見せる位置を指定してあるので、cover でも二段目の拡大が * ほぼ起きない（loader-video/Montage.tsx 参照）。 * ロゴだけは絵の芯に重ならないよう下寄りに置く。 */ @media (orientation: portrait) { .home-loader__logo { top: auto; bottom: 8%; transform: translateX(-50%); } /* フィナーレは bottom のまま芯へ滑らかに寄せる（top⇔auto は * トランジションできず飛ぶため）。電話のブラウザ下部バーに * 隠れる位置からも離れる */ .home-loader.is-finale .home-loader__logo { top: auto; bottom: 50%; transform: translate(-50%, 50%); } } /* JS側（gate）でも判定しているが、CSSでも二重に殺しておく。 * 動きを減らす設定の人にはオーバーレイ自体を出さない */ @media (prefers-reduced-motion: reduce) { .home-loader { display: none !important; } }