Replace PC-98 landing aesthetic with Heisei Twilight theme (#127)

* Replace PC-98 landing aesthetic with Heisei Twilight theme

Layered new heisei.css (loaded after pc98.css) over the public landing
page so the late-2000s/early-2010s anime cue lands subtly without a
ground-up rewrite. Internal VN/contracts/daemons screens are untouched.

What changed
- Twilight gradient backdrop (deep night → dusk plum → horizon rose +
  amber) replaces the chunky animated GIF background.
- Soft bokeh plates and a faint scanline overlay sit behind the content
  for atmosphere.
- Floating header is now frosted glass with a 1px hairline; the system
  status pills use Inter-tracked uppercase labels with desaturated
  cyan/magenta indicators.
- Vertical kanji masthead becomes a quiet Noto Serif JP column rather
  than an arcade box; English subtitle picks up a warm amber tone.
- Issue badge is a flat pill; LED heart still pulses but in muted rose.
- Empty hero state shows a faint tactical reticle (corner brackets) and
  bilingual JP/EN tagline — Ghost-in-the-Shell SAC HUD vibe.
- Mission and MAKIMA panels render as Heisei magazine columns with a
  Noto Serif JP headline, accent rule (amber for Mission, magenta for
  MAKIMA), and Inter body copy.
- Buttons are flat with hairline borders and a left-edge amber accent
  sweep on hover; the Login CTA keeps a warm gradient as the primary
  action.
- Bottom Velocity/Energy strip becomes a small HUD pill with corner
  bracket detailing.
- Mobile breakpoint tightens header, padding, headline size, and stacks
  the secondary CTAs back to a column.
- prefers-reduced-motion respected for the heart pulse and image pan.

How to verify
- cd frontend && npm install && npm run dev
- Compare http://localhost:5173 with the live soryu.co (PC-98 build)
- Toggle the Mission and MAKIMA panels; resize to 390x844 for mobile.

Implementation notes
- Single new file: frontend/src/styles/heisei.css (~16 KB).
- main.tsx imports heisei.css after pc98.css so the override wins.
- No JSX/component changes — design lives entirely in CSS, easy to
  revert by removing the import line.
- npm run build passes (vite v5.4, 91 kB CSS gzipped to 17.8 kB).

* Attach before/after screenshots for review

Six viewport/state combinations captured at 2x DPR with Playwright
(desktop 1440x900, mobile 390x844). before-* show the live
soryu.co PC-98 build; after-* show the heisei-twilight branch
served by vite dev. Drop this commit before merge if you'd
rather not carry the assets in tree.

* Move CTA row into a top navbar below the floating header

Per review feedback, lift Mission / MAKIMA / Login from the bottom of
the cover into a fixed navbar that sits flush beneath the floating
header — standard site pattern.

- .cta-area is now position: fixed, top: 72px, height 52px (top: 56px,
  height 48px on mobile), with the same frosted-glass + hairline
  treatment as the header so they read as one stacked nav block.
- Buttons become ghost-link items inside the bar with an animated
  underline-from-center on hover; Login keeps its warm amber→rose
  primary treatment but compact.
- cover-content top padding bumped to 156px (desktop) / 124px (mobile)
  so the masthead and hero clear both stripes.
- bottom-stats no longer needs to dodge a fixed-bottom CTA — pulled
  back to bottom: 24px (desktop) and ~20px + safe-area (mobile).
- npm run build passes (CSS 91.6 kB / 17.9 kB gzip).

Screenshots in docs/heisei-screenshots/after-*.jpg refreshed against
the new navbar layout (1440x900 desktop, 390x844 mobile, 2x DPR).

* Center mobile navbar buttons (kill leftover pc98 margin-top)

The bottom-CTA layout in pc98.css had a mobile-specific
margin-top: 20px on .taisho-cta, which carried over into the new
top navbar and pushed every button 20px below the navbar's
vertical center on mobile (visible misalignment at 390x844 — the
Mission/MAKIMA/Login pills were sitting near the bottom edge of
the bar).

- Add margin: 0 !important to .taisho-cta in heisei.css (and to
  the mobile-block override) so the legacy column-layout margin
  is wiped on both breakpoints.
- Switch buttons to height: 32px + line-height: 32px for stable
  vertical centering inside the 48px (mobile) / 52px (desktop)
  navbar.
- Force align-self: center on .cta-left/.cta-right so they don't
  inherit any stretched height from previously-applied rules.

Verified via Playwright DOM probe at 390x844:
  navbar y=56–104 (centerY 80) · buttons y=64–96 (centerY 80) ✓
And at 1280x720:
  navbar y=72–124 (centerY 98) · buttons y=83–113 (centerY 98) ✓

Screenshots in docs/heisei-screenshots/after-*.jpg refreshed.

* Tighten mission/makima top space and use highlighted nav state

The CTA row is now a top navbar, so the old 'Close' label on the
active panel button is redundant — the button itself should look
like the current page. Two fixes here:

1. Replace 'Close' with a persistent active highlight.
   - LandingPage.tsx: button keeps its label ('Mission' / 'MAKIMA')
     and gains an is-active class + aria-current="page" when its
     panel is open. heisei.css renders the active state as a solid
     amber underline + amber text — same visual language as the
     hover indicator, just persistent.
   - The button still toggles the panel closed when clicked again,
     so the interaction is unchanged; only the labelling moved.

2. Remove the white-space band above mission content.
   - The legacy .modern-landing-page wrapper from pc98.css pinned
     itself at top: 120px and height: calc(100vh - 120px), matching
     the original 120px-tall floating header. The new header is
     72px (56px on mobile), which left ~50px of dead space below
     the navbar before the mission/makima content started.
   - Override the wrapper to top: 72px / height: calc(100vh - 72px)
     on desktop and 56px on mobile so it sits flush under the
     header.
   - Cover-content padding-top retuned for the new wrapper origin:
     desktop default 84px, mission-mode 72px (navbar 52 + 20 gap).
     Mobile default 76px, mission-mode 64px (navbar 48 + 16 gap).

Verified at 1280x720:
  navbar y=72-124 · mission headline starts y=144 · 20px gap ✓
  active Mission button: 'taisho-cta is-active', aria-current=page ✓

npm run build passes (CSS 92.6 kB / 18.1 kB gzip). Screenshots in
docs/heisei-screenshots/after-*.jpg refreshed against the tightened
layout.

* Align mission/makima body, fix mobile bg, add typewriter hero rotator

Three fixes coming out of QA on staging (soryu.eirin.xyz):

1. Mission / MAKIMA body alignment
   - The amber/magenta accent rule + 18px indent used to live on
     .mission-headline only, so paragraphs (and the mission image)
     started 18px to the LEFT of the headline.
   - Move the rule + padding-left onto the .mission-screen wrapper
     itself. Headline, image, and all paragraph(s) now share one
     consistent column edge.
   - Tighten the makima-badge so it doesn't stretch the grid column
     (justify-self: start + width: max-content). Image gets explicit
     width: 100%; display: block to behave inside the column.

2. Mobile background coverage
   - pc98.css mobile-block override ('@media max-width:768px') reset
     .modern-landing-page to position: relative + margin-top: 100px,
     leaving a 100-156px band at the top where only the body color
     showed and pushing the wrapper bottom past the viewport.
   - Force position: fixed on the wrapper at every breakpoint with
     !important. Use 100dvh (dynamic viewport height) so the gradient
     follows iOS Safari's collapsing URL bar rather than getting
     clipped.
   - Mirror the dusk gradient onto <body> as a fallback so any
     sub-pixel rounding gap shows the same colour, not white.

3. Typewriter hero rotator
   - New <TypewriterRotator/> component (frontend/src/components/
     TypewriterRotator.tsx) — types, holds, deletes, gaps, advances.
     Honours prefers-reduced-motion (renders the first phrase static).
   - LandingPage.tsx renders it inside a new .hero-tagline wrapper
     where the old static CSS ::after lived. Five phrases, all
     bilingual JP/EN in the same Heisei tactical voice:
       * 低遅延ストリーミング · LOW-LATENCY OBSERVABILITY
       * リアルタイム監視 · REAL-TIME SURVEILLANCE
       * ミッションクリティカル · MISSION-CRITICAL INFRASTRUCTURE
       * エンドツーエンド可視化 · END-TO-END VISIBILITY
       * 安全な意思決定 · SECURE DECISIONS AT THE EDGE
   - Hide the old .hero::after pseudo-tagline; .hero-tagline keeps
     the same centred position, amber colour, and tracking.
   - Caret blink animation (steps(1), 1s) — separate from the typing
     timing so it always blinks at human speed.

npm run build passes (CSS 94 kB / 18.2 kB gzip, JS 238 kB / 75 kB
gzip — +1.5 kB net for the rotator + new phrases).

Verified at 1280x720 / 390x844 via Playwright DOM probe:
  - mission/makima: headline.x === paragraph.x === image.x ✓
  - mobile: wrapper y=56, h=788, bottom=844 (full coverage) ✓
  - typewriter: types, holds, deletes, advances to phrase 2 ✓

Screenshots in docs/heisei-screenshots/after-*.jpg refreshed.
Staging at soryu.eirin.xyz updated via rsync.

* Center hero on homepage, image-left text-right on mission/makima

- Default homepage now uses single-column grid; the SORYU masthead is
  absolutely positioned in the upper-left of the cover frame, so the
  hero typewriter is genuinely centered on the page (verified
  taglineCenterX === pageCenter at 1280px).
- Mission/MAKIMA on desktop (>=1025px) switch to a flex layout with
  the image absolutely positioned in a 360px left gutter and all body
  text (badge -> headline -> paragraphs) flowing on the right.
- Mobile and tablet (<=1024px) keep the stacked layout; masthead
  returns to inline flow under the navbar.
- MAKIMA badge uses flex `order: -1` so it appears above the headline
  visually, even though the JSX renders headline first.

* Replace PC-98 character image with tactical observability mesh SVG

- New /public/mission-tactical.svg (~9KB, license-clean, hand-crafted):
  amber wireframe globe + magenta mesh links, GitS:SAC-style HUD chrome
  (corner brackets, scanlines, telemetry strip, NODE-001 TYO label,
  pulsing origin node), kanji watermark.
- Uses CSS palette vars (amber #e8b87a / magenta #d96a8a / cyan #9ad7e0).
- .mission-image switched to object-fit:contain with a dark fill so the
  vector renders fully and never crops; pc98 mission-pan animation is
  killed for the SVG path.

* Animate mission tactical SVG: flowing data along mesh links

- Each of 6 mesh arcs now has an id (#arc1..#arc6) with two layered
  animations: a flowing stroke-dashoffset (so the lines themselves
  appear to ripple), and a separate breathing opacity cycle.
- 8 packet circles ride the arcs via <animateMotion> + <mpath>, with
  staggered begin times (0s..2.0s) and varied durations (2.6s..4.0s)
  so traffic feels asynchronous, not metronomic.
- Amber arcs carry amber packets, magenta arcs carry magenta packets.
- Hub nodes now have layered radial pulses (filled core + expanding
  ring) on independent timings; cyan relay dots blink gently.
- REC indicator pulses 1.4s.

All animations are SVG-native (no JS, no external library); browsers
respect prefers-reduced-motion via UA defaults on <animate>.

* chore: gitignore tsconfig.tsbuildinfo (auto-generated incremental build cache)

* Drop mission-image ring border; reskin Login hover (no glow)

- The animated SVG already draws its own hairline frame + corner
  brackets at the viewBox edge. Remove the `box-shadow: 0 0 0 1px`
  ring (in both the base `.mission-image` rule and the
  desktop-min-1025px `.mission-screen .mission-image` override) so
  the image isn't double-framed. Drop-shadow for elevation kept.
- Replace the Login button hover effect. The amber drop-shadow halo
  used the same visual language as the active Mission/MAKIMA nav
  buttons (which also glow amber underneath); on hover Login now
  inverts to a deep-night background with amber ink and a hairline
  ::after rule that slides in from the left along the top edge —
  reads as 'armed' rather than 'glowing'. Letter-spacing widens
  slightly on hover (0.18em → 0.22em) for a subtle ink-spread.
  Added :active and :focus-visible states for keyboard a11y.

* Remove vertical accent rule from Mission/MAKIMA text columns

The 2px amber/magenta border-left + 18px indent on the right-column
text was reading as another border running parallel to the SVG image
on the left. The animated SVG already supplies all the framing the
panels need, so the rule is now redundant noise.

Removed in three places:
- .mission-screen wrapper (base + .makima-screen variant)
- desktop (>=1025px) per-block rule on headline + paragraph
- mobile (<=768px) leftover padding-left: 14px on headline

Verified: borderLeft = 0 on wrapper, headline, and paragraph(s) on
both Mission and MAKIMA. Headline + body now sit flush with the badge
at the same column edge (x=680 at 1280px).

* Mission/MAKIMA backdrop: solid dark plate (no horizon bleed)

The panel backdrop was rgba(11,17,36,0.62→0.85) — semi-transparent —
so the page's dusk-pink horizon at the bottom of the gradient bled
through behind the panel content, drawing the eye to the page edge
and making the background gradient stand out instead of disappearing.

Switched to a near-opaque #0a1024 → #0b1530 vertical gradient (slight
slope kept for depth) and bumped backdrop-filter to blur(20px)
saturate(80%) so any residual ambient is fully diffused. The panel
now reads as its own surface rather than a tinted overlay.

Verified: bottom-center pixel is rgb(10,20,47) — uniform deep night
across the whole panel, no pink bleed at the page bottom.

* Drop dark rounded plate behind Mission/MAKIMA images

The .mission-image and .makima-logo had a semi-opaque dark fill
(rgba(11,17,36,0.55-0.6)) plus border-radius: 2px. Combined with
object-fit: contain (which letterboxes the SVG inside the larger
360px box), the dark fill was visible as a rounded rectangle
'frame' around the artwork — most noticeable on MAKIMA where the
small circular logo sits in a much larger box.

Switched both to transparent background + border-radius: 0 so the
artwork floats directly on the panel backdrop. Drop-shadow kept on
both for elevation; .makima-logo's amber halo + hairline ring
removed too (it was painting the same noise).

Verified by sampling pixels at the four image corners + inner mid:
all read as the same uniform deep-night as the panel backdrop
(rgb(10, 14-18, 30-42)). No plate, no rounded edge.

* Remove box-shadow halo around Mission/MAKIMA image bounding boxes

* Mission/MAKIMA backdrop: slightly translucent (alpha 0.72→0.84, blur 28px)

---------

Co-authored-by: soryu-co <bot@soryu.co>

1 files changed, 0 insertions, 0 deletions

diff --git a/docs/heisei-screenshots/before-05-mobile-default.jpg b/docs/heisei-screenshots/before-05-mobile-default.jpg
new file mode 100644
index 0000000..5bda086
--- /dev/null
+++ b/docs/heisei-screenshots/before-05-mobile-default.jpg