From c99ad2bcc75e330fc66d78452d604747cf2d3443 Mon Sep 17 00:00:00 2001
From: soryu-co <bot@soryu.co>
Date: Wed, 6 May 2026 15:10:30 +0000
Subject: Drop mission-image ring border; reskin Login hover (no glow)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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.
---
 frontend/src/styles/heisei.css | 62 +++++++++++++++++++++++++++++++++++-------
 1 file changed, 52 insertions(+), 10 deletions(-)

diff --git a/frontend/src/styles/heisei.css b/frontend/src/styles/heisei.css
index c56791a..e90e492 100644
--- a/frontend/src/styles/heisei.css
+++ b/frontend/src/styles/heisei.css
@@ -439,9 +439,9 @@ body { background: var(--hz-night); color: var(--hz-ink); }
 .mission-image {
   border: 0;
   border-radius: 2px;
-  box-shadow:
-    0 24px 60px -24px rgba(8, 10, 24, 0.85),
-    0 0 0 1px var(--hz-line);
+  /* SVG already draws its own hairline frame + corner brackets at the
+     viewBox edge — drop the ring outline so we don't double-frame. */
+  box-shadow: 0 24px 60px -24px rgba(8, 10, 24, 0.85);
   filter: none;                          /* tactical SVG renders flat */
   height: clamp(180px, 36vh, 360px);
   width: 100%;
@@ -482,9 +482,8 @@ body { background: var(--hz-night); color: var(--hz-ink); }
     object-fit: contain;
     object-position: center;
     padding: 0;
-    box-shadow:
-      0 24px 60px -24px rgba(8, 10, 24, 0.85),
-      0 0 0 1px var(--hz-line);
+    /* SVG owns its frame — keep only the soft drop-shadow for elevation */
+    box-shadow: 0 24px 60px -24px rgba(8, 10, 24, 0.85);
   }
   /* Right-column text: each block owns its own accent rule */
   .mission-screen .mission-headline,
@@ -656,7 +655,11 @@ body { background: var(--hz-night); color: var(--hz-ink); }
   box-shadow: 0 0 12px rgba(232, 184, 122, 0.35);
 }
 
-/* Login keeps a primary-action treatment, but compact for the bar */
+/* Login keeps a primary-action treatment, but compact for the bar.
+   The hover effect avoids the amber drop-shadow halo (which read as
+   the same glow language as the active mission/makima nav buttons)
+   and uses an "inverted ink + chevron rule" treatment instead so it
+   stays clearly the primary CTA without overlapping signal. */
 .cta-right .taisho-cta {
   background: linear-gradient(180deg, rgba(232, 184, 122, 0.95) 0%, rgba(217, 106, 138, 0.85) 100%);
   border: 0 !important;
@@ -666,12 +669,51 @@ body { background: var(--hz-night); color: var(--hz-ink); }
   opacity: 1;
   letter-spacing: 0.18em;
   border-radius: 2px;
+  /* Local positioning context for the chevron rule pseudo-element */
+  position: relative;
+  isolation: isolate;
+  transition:
+    background 200ms ease,
+    color 200ms ease,
+    letter-spacing 240ms ease;
 }
 .cta-right .taisho-cta::before { display: none; }
+
+/* Top-edge tactical chevron rule: hidden by default, slides in on hover.
+   Uses ::after so it's independent of the existing ::before underline rule. */
+.cta-right .taisho-cta::after {
+  content: '';
+  position: absolute;
+  inset: 0 0 auto 0;
+  height: 2px;
+  background: var(--hz-ink);
+  transform: scaleX(0);
+  transform-origin: left center;
+  transition: transform 220ms ease-out;
+  pointer-events: none;
+}
+
 .cta-right .taisho-cta:hover {
-  background: linear-gradient(180deg, rgba(232, 184, 122, 1) 0%, rgba(217, 106, 138, 1) 100%);
-  color: #0b1124;
-  box-shadow: 0 8px 24px -10px rgba(232, 184, 122, 0.55) !important;
+  /* Invert: dark plate, light ink — opposite of the resting state.
+     Reads as "armed / pressed" instead of "glowing". */
+  background: #0b1124;
+  color: var(--hz-amber);
+  letter-spacing: 0.22em;             /* subtle ink-spread */
+  /* Explicitly cancel any inherited glow */
+  box-shadow: none !important;
+  filter: none;
+}
+.cta-right .taisho-cta:hover::after {
+  transform: scaleX(1);
+}
+.cta-right .taisho-cta:active {
+  background: #1a2548;
+  color: var(--hz-ink);
+  letter-spacing: 0.20em;
+}
+.cta-right .taisho-cta:focus-visible {
+  outline: 1px solid var(--hz-amber);
+  outline-offset: 2px;
 }
 
 .cta-icon { font-size: 10px; opacity: 0.85; margin-right: 2px; }
-- 
cgit v1.2.3