この単一ページのクリエイティブスタジオ・フッターを正確に再現してください。これは再デザインではなく忠実再現のタスクです。提供されたコンテンツ、アセット、CSS、インタラクションをそのまま実装してください。このフッターページのみを構築します。ローカルに保ち、公開・デプロイはしないでください。ヘッダー、ヒーロー、カード、フォーム、セクション、ボタン、リンク、アニメーション、余分なコピーを追加しないでください。 下部に付属するソーススナップショットが正式な仕様です。必要な場合のみインポートパスやフレームワークの配線を調整し、それ以外は正確にコピーしてください。近似的なタイポグラフィ、別のロゴ、ストック動画、汎用の視線追従効果に置き換えないでください。 1. 全体の外観：ページ全体が1つのフッターで、左に情報カラム、中央にスクリプトロゴ、右に3つのソーシャルアイコンを持つ連絡先風テキストカラム、そしてラベンダー色のキャラクター動画があります。デスクトップ幅では動画が全コンテンツの背後でビューポートを埋めます。モバイルではコンテンツが積み重なり、動画は通常フローでその後に現れます。構成はゆったりミニマルで、非常に暗いテキスト、動画を覆うティント・スクリム・グラデーション・ぼかし・オーバーレイは一切なし。外部リンクや実際の連絡先はありません。ナビ風ラベル、連絡先コピー、ソーシャルアイコン、ロゴは静的な表示要素でクリック可能なアンカーではありません。宛先、メール、電話、WhatsApp動作、SNSアカウントを創作しないでください。Truusをどこにも表示しないでください。 2. 正確な表示コピー：綴り、大文字小文字、句読点、カーリーアポストロフィ、アスタリスク、改行を保持。左バッジ：“have a fresh idea?”。左見出し：“imagination” /“meets craft”。ラベル：“Made”、“Story”、“In the lab”、“Say hey”。右バッジ：“say hey”。右見出し：“let’s team up!” /“bring us your idea*”。注記：“*good things start with one spark. let’s make yours.”。ソーシャルアイコンの順：LinkedIn、Instagram、TikTok。付属の正確なSVGを使用し、テキストラベルやリンクは付けない。中央ロゴはBrandLogoのアウトラインスクリプトSVG Logoipsum（viewBox 169×40）。fillはcurrentColorにして#080909を継承。ロゴをトレースや再生成しないでください。 3. 正確なタイポグラフィと色：見出しはEpilogue Black 900、その他はDM Sans Regular 400。実際のフォントファイルとfont-synthesis: noneを使用。DMSans-Regular.woff2とEpilogue-Black.woff2をダウンロードし、@font-faceとfont-display: swapでローカル配信。テキストとロゴ#080909、デスクトップのフォールバック背景#dfe4f2、バッジ#f7f8fa、モバイル背景#f0eefa。影、装飾ボーダー、カード、グラデーションはなし。 4. 正確なデスクトップレイアウト（>700px）：全体にbox-sizing border-box、bodyはmarginゼロ、min-height 100vh。footerはposition relative、min-height 100vh、padding-top 6.54vw、isolation isolate、overflow hidden。左ブロック：margin-left 8.65vw、width 25vw。バッジはpill 100px、高さ1.9vw、padding .39vw .61vw、フォント.88vw。見出しmargin-top 1.45vw、フォント1.66vw weight 900。ナビは縦flex gap .93vw、margin-top 1.3vw、フォント1.075vw。ロゴはabsolute left 40.33vw top 7.7vw width 17vw。右ブロックはabsolute left 74.3vw top 6.54vw、注記margin 1.05vw 0 0 フォント.733vw、ソーシャル行flex gap 1.43vw、アイコン1.71vw。これらvw値と正確な3カラム配置を維持。動画レイヤー：ラッパーabsolute inset 0 z-index -1 pointer-events none、動画object-fit cover center でテキストの背後、瞳のcanvasは別途なし。 5. 正確なモバイルレイアウト（≤700px）、@media(max-width:700px)内のみ：背景#f0eefa、footerは縦flex gap 36px、min-height 100svh、padding 40px 24px 0、表示順ロゴ・左・右・動画、ロゴstatic width 210px max-width 75%、バッジ高さ30px フォント14px、見出しclamp(22px,6.3vw,30px)、ナビは2カラムグリッド column-gap 24px フォント17px 各ラベルmin-height 44px（行1 Made/Story、行2 In the lab/Say hey）、注記max-width 34ch フォント14px 通常折返し、ソーシャル行gap 18px ラッパー44×44px にアイコン30×30px 最初のラッパーmargin-left -7px、動画ラッパーrelative order 3 width calc(100%+48px) aspect-ratio 4/3 margin-top -16px、コンテンツ下でフルブリード。 6. 正確な動画アセット：完全なCloudFront URLをそのまま使用し、別クリップへの置換、パス省略、アンダースコアのエスケープ、ファイル名変更をしない。ソースは1920×1080、24fps、約7.041667秒：淡いラベンダー背景にピンクのハートを持つふわふわのラベンダー色キャラ、目が円を描く。public/footer-background.mp4として保存し、次のコマンドでpublic/footer-scrub.mp4を作成：ffmpeg -hide_banner -loglevel error -i public/footer-background.mp4 -an -c:v libx264 -preset fast -crf 20 -g 1 -pix_fmt yuv420p -movflags +faststart public/footer-scrub.mp4。寸法・fps・尺・色・構成を保持、ランダムシーク用のall-intraエンコード。要素はmuted、playsInline、preload="auto"を持ち、ネイティブコントロール・音声・ポスター・ローディングUIはなし。 7. 正確なデスクトップのマウス操作：動画スクラブ — カーソルを動かすと、記録された瞳がカーソルを向くフレームを選択。瞳の再描画やCSSの目のアニメーションはしない。付属のgaze-frames.jsonを使用。目の中点は1920×1080フレームで(948,418)、coverスケールmax(w/1920,h/1080)、eyeX = rect.left + rect.width/2 + (948-960)*scale、eyeY = rect.top + rect.height/2 + (418-540)*scale、ポインタから引き、8px半径内は無視、atan2(dy,dx)を[0,2π)に正規化、円環角度差が最小の行を探し、time + 1/240秒を使用、差が1/48秒超・フレームデータあり・シーク中でない場合のみシーク、duration - 1/24にクランプ、requestAnimationFrameで結合、補間しない、デスクトップ動画は0で一時停止開始し選択フレームに留まる、resizeとscrollで再計算、パッシブリスナー、アンマウント時に全解除。基本方向：右2.54167s、下0.33333s、左1.0s、上1.70833s。 8. モバイル再生：≤700pxではポインタシークを無効化、コンテンツ下の動画はミュートでループ再生、prefers-reduced-motionを尊重して一時停止、autoplay不可なら見えるフレームを残しエラーやコントロールは出さない。matchMediaのchangeリスナーで700pxブレークポイントを正しく切替。 9. セマンティクスとメタデータ：footerにaria-label="Footer"、動画ラッパーはaria-hidden="true"でpointer-events:none、ロゴラッパーはrole="img" aria-label="Studio logo"でSVGはaria-hidden、ソーシャルラッパーにLinkedIn・Instagram・TikTokのラベル。言語en。タイトル：Studio — Footer。説明：Fresh ideas, imagination, and creative collaboration。ファビコン：同じロゴ/logo.svgでfill #080909。 10. 実装制約：ReactとTypeScript、通常のCSSを使用。参照はApp Router形式のapp/page.tsx、app/layout.tsx、クライアント側動画コンポーネント。環境が許す限り提供ソースを保持。アニメーションライブラリ、UIフレームワーク、canvasは不要。正確なソースファイルを使用し、2つのフォントとソース動画を取得。public/logo.svgはBrandLogoのSVGでfillRule/clipRuleをfill-rule/clip-ruleに戻し#080909を設定、viewBoxとpathを保持。ビルドを成功させ、基本方向の視線マッピング、モバイルの積層、320px/390px幅での折返し、700px超のデスクトップレイアウトを確認。検証中にコンテンツを変更しない。すべてローカルに保ち、公開・デプロイしない。