1 files changed, 35 insertions, 18 deletions

diff --git a/frontend/src/components/LandingPage.tsx b/frontend/src/components/LandingPage.tsx
index 9c262be..ea8dfbc 100644
--- a/frontend/src/components/LandingPage.tsx
+++ b/frontend/src/components/LandingPage.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, useRef } from 'react'
 import { LoadingScreen } from './LoadingScreen'
 import { HeartLogo } from './HeartLogo'
 
@@ -14,6 +14,7 @@ export function LandingPage({ onLogin }: LandingPageProps) {
   const [energy, setEnergy] = useState(0)
   const [ramped, setRamped] = useState(false)
   const [pendingAction, setPendingAction] = useState<null | 'makima' | 'mission'>(null)
+  const [missionMode, setMissionMode] = useState(false)
 
   // Fade-in landing page content after mount
   useEffect(() => {
@@ -91,8 +92,8 @@ export function LandingPage({ onLogin }: LandingPageProps) {
   }
 
   const handleMission = () => {
-    // Placeholder action for now
-    setPendingAction('mission')
+    // Toggle screen transformation instead of modal/drawer
+    setMissionMode((m) => !m)
   }
 
   return (
@@ -147,7 +148,8 @@ export function LandingPage({ onLogin }: LandingPageProps) {
         </div>
 
         {/* Minimal overlay: masthead, issue badge, and CTA */}
-        <div className="taisho-cover">
+        <div className={`taisho-cover ${missionMode ? 'mission-mode' : ''}`}>
+          <div className="cover-backdrop" aria-hidden="true" />
           <div className="cover-content">
             {/* Masthead + Issue badge (kept) */}
             <div className="masthead">
@@ -158,14 +160,26 @@ export function LandingPage({ onLogin }: LandingPageProps) {
               <div className="issue-badge"><span className="led-heart" aria-hidden="true"></span>かはいい Vol.01</div>
             </div>
 
-            {/* Empty hero area to preserve grid; background sits behind */}
-            <div className="hero" />
+            {/* Hero area becomes Mission content when in mission mode */}
+            {missionMode ? (
+              <div className="mission-screen" role="region" aria-label="Mission">
+                <h1 className="mission-headline">Building real‑time systems for mission-critical observability and surveillance </h1>
+                <img src="/PC98Doukuusei.webp" alt="Mission montage" className="mission-image" />
+                <p className="mission-paragraph">
+                  We deliver low‑latency streaming & infrastructure that turns live data into
+                  reliable, secure insight. Target selection, monitoring and full end to end observability
+                  to make vital decisions where it matters most.
+                </p>
+              </div>
+            ) : (
+              <div className="hero" />
+            )}
 
             {/* CTA row spanning full width: left Mission/Contact, right Login */}
             <div className="cta-area">
               <div className="cta-left">
                 <button className="taisho-cta" onClick={handleMission}>
-                  <span className="cta-text">Mission</span>
+                  <span className="cta-text">{missionMode ? 'Close' : 'Mission'}</span>
                 </button>
                 <button className="taisho-cta" onClick={() => {/* placeholder contact */}}>
                   <span className="cta-text">Contact</span>
@@ -181,20 +195,23 @@ export function LandingPage({ onLogin }: LandingPageProps) {
           </div>
         </div>
 
-        {/* Bottom stats: Velocity + Energy only */}
-        <div className="bottom-stats">
-          <div className="rf-stats">
-            <div className="rf-stat">
-              <span className="label">Velocity</span>
-              <span className="value">{Math.round(velocity)} km/h</span>
-            </div>
-            <div className="rf-stat">
-              <span className="label">Energy</span>
-              <span className="value">{energy.toFixed(1)} MJ</span>
+        {/* Bottom stats: Velocity + Energy only (hidden in mission mode) */}
+        {!missionMode && (
+          <div className="bottom-stats">
+            <div className="rf-stats">
+              <div className="rf-stat">
+                <span className="label">Velocity</span>
+                <span className="value">{Math.round(velocity)} km/h</span>
+              </div>
+              <div className="rf-stat">
+                <span className="label">Energy</span>
+                <span className="value">{energy.toFixed(1)} MJ</span>
+              </div>
             </div>
           </div>
-        </div>
+        )}
       </div>
+      {/* MissionDrawer removed in favor of mission screen transformation */}
     </div>
   )
 }