Adjust makima logo layering

1 files changed, 23 insertions, 22 deletions

diff --git a/makima/frontend/public/index.html b/makima/frontend/public/index.html
index 42e0417..70760d9 100644
--- a/makima/frontend/public/index.html
+++ b/makima/frontend/public/index.html
@@ -110,12 +110,8 @@
         display: inline-flex;
         align-items: center;
         justify-content: center;
-        width: 42px;
-        height: 42px;
-        border: 1px solid #0f3c78;
-        border-radius: 50%;
-        background: #e8f1ff;
-        box-shadow: 0 0 0 3px rgba(117, 170, 252, 0.45);
+        width: 32px;
+        height: 32px;
       }
       .masthead h1 {
         margin: 0;
@@ -239,6 +235,7 @@
         line-height: 1.4;
         border: 1px solid rgba(197, 219, 255, 0.4);
         box-shadow: 0 6px 16px rgba(12, 35, 67, 0.2);
+        z-index: 4;
       }
       .floating-card.top-card {
         top: 6px;
@@ -322,6 +319,7 @@
         display: grid;
         place-items: center;
         filter: drop-shadow(0 10px 26px rgba(12, 35, 67, 0.32));
+        z-index: 1;
       }
       .hero-logo::before {
         content: "data-link// orbital / makima.jp";
@@ -335,6 +333,7 @@
         letter-spacing: 0.08em;
         color: rgba(15, 60, 120, 0.55);
         text-align: center;
+        z-index: 3;
       }
       .logo-shell {
         width: 230px;
@@ -346,6 +345,18 @@
         place-items: center;
         position: relative;
         overflow: hidden;
+        z-index: 1;
+      }
+      .logo-shell::before {
+        content: "";
+        position: absolute;
+        inset: 10px;
+        border-radius: 50%;
+        border: 1px solid rgba(117, 170, 252, 0.5);
+        box-shadow: 0 0 18px rgba(15, 60, 120, 0.25);
+        opacity: 0;
+        transform: scale(0.9);
+        transition: opacity 0.45s ease, transform 0.6s ease;
       }
       .logo-shell::after {
         content: "";
@@ -362,29 +373,18 @@
       .logo-svg {
         width: 160px;
         height: 160px;
-        z-index: 1;
-        transition: transform 0.4s ease, filter 0.4s ease;
+        z-index: 2;
+        transition: filter 0.4s ease;
       }
       .logo-svg circle {
-        transition: transform 0.4s ease, opacity 0.4s ease, stroke-width 0.4s ease;
+        transition: opacity 0.4s ease;
       }
       .logo-shell:hover .logo-svg {
-        transform: scale(1.04);
         filter: drop-shadow(0 0 14px rgba(15, 60, 120, 0.45));
       }
-      .logo-shell:hover .logo-svg circle:nth-child(1) {
-        transform: scale(1.05);
-      }
-      .logo-shell:hover .logo-svg circle:nth-child(2) {
+      .logo-shell:hover::before {
+        opacity: 1;
         transform: scale(1.08);
-        opacity: 0.92;
-      }
-      .logo-shell:hover .logo-svg circle:nth-child(3) {
-        transform: scale(1.12);
-        opacity: 0.92;
-      }
-      .logo-shell:hover .logo-svg circle:nth-child(4) {
-        transform: scale(1.3);
       }
       .halo {
         position: absolute;
@@ -393,6 +393,7 @@
         border-radius: 50%;
         border: 1px dashed rgba(15, 60, 120, 0.5);
         animation: idle-rotate 28s linear infinite;
+        z-index: 0;
       }
       .logo-shell:hover + .halo {
         animation: pulse 1.5s ease-in-out infinite;