Update README.md

README.md

@@ -1,39 +1,6 @@
----
-title: README
-emoji: 😻
-colorFrom: green
-colorTo: green
-sdk: static
-pinned: true
----
-
-<div class="luminia">
-  <div class="grid-layer"></div>
-  <div class="glow"></div>
-  <div class="glow glow-2"></div>
-  <div class="ring ring-1"></div>
-  <div class="ring ring-2"></div>
-  <div class="noise"></div>
-  <div class="content">
-    <div class="sigil">✧</div>
-    <h1>🌱 Luminia ✨</h1>
-    <p>Community-driven AI</p>
-    <div class="divider">
-      <span class="line"></span>
-      <span class="dot"></span>
-      <span class="line"></span>
-    </div>
-    <div class="team">
-      <a class="member" href="https://huggingface.co/Nekochu">
-        <span class="pulse-ring"></span>
-        <span class="avatar">🍀</span>
-        <span class="name">Nekochu</span>
-      </a>
-    </div>
-  </div>
-</div>
-
 <style>
+@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;900&family=JetBrains+Mono:wght@400;700&display=swap');
+
 @keyframes pulse{0%,100%{opacity:.4;transform:scale(1)}50%{opacity:.7;transform:scale(1.03)}}
 @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
 @keyframes shimmer{0%{background-position:200% center}100%{background-position:-200% center}}
@@ -43,66 +10,100 @@ pinned: true
 @keyframes sigil-glow{0%,100%{opacity:.25}50%{opacity:.5}}
 @keyframes dot-pulse{0%,100%{transform:scale(1);opacity:.4}50%{transform:scale(1.3);opacity:.7}}
 @keyframes ripple{0%{transform:scale(1);opacity:.4}100%{transform:scale(2.5);opacity:0}}
+@keyframes title-glow{
+  0%,100%{text-shadow:0 0 8px rgba(144,238,144,.3),0 0 18px rgba(76,175,80,.15),0 0 36px rgba(76,175,80,.05)}
+  50%{text-shadow:0 0 18px rgba(144,238,144,.7),0 0 40px rgba(76,175,80,.4),0 0 70px rgba(76,175,80,.12)}
+}
+@keyframes text-glow{
+  0%,100%{text-shadow:0 0 6px rgba(144,238,144,.4),0 0 14px rgba(144,238,144,.2)}
+  50%{text-shadow:0 0 14px rgba(144,238,144,.8),0 0 30px rgba(76,175,80,.5),0 0 50px rgba(76,175,80,.15)}
+}
 
 .luminia{position:relative;max-width:380px;margin:0 auto;padding:35px 25px 28px;text-align:center;font-family:'Segoe UI',system-ui,sans-serif;background:linear-gradient(145deg,#0a1a0a,#142814,#0c200c);border-radius:20px;border:1px solid rgba(144,238,144,.15);overflow:hidden;box-shadow:0 15px 50px rgba(0,0,0,.5),0 0 80px rgba(76,175,80,.06);transition:transform .3s ease,box-shadow .3s ease}
-
 .luminia:hover{transform:translateY(-2px);box-shadow:0 20px 60px rgba(0,0,0,.5),0 0 100px rgba(76,175,80,.1)}
-
 .luminia::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:conic-gradient(from 0deg,transparent,rgba(144,238,144,.025),transparent 25%);animation:spin 25s linear infinite}
 
 .grid-layer{position:absolute;inset:0;background:linear-gradient(rgba(144,238,144,.015) 1px,transparent 1px),linear-gradient(90deg,rgba(144,238,144,.015) 1px,transparent 1px);background-size:24px 24px;animation:grid-drift 30s linear infinite;opacity:.6}
-
 .noise{position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");opacity:.018;pointer-events:none}
-
 .glow{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:120px;height:120px;background:radial-gradient(circle,rgba(76,175,80,.25),transparent 70%);filter:blur(35px);animation:pulse 5s ease-in-out infinite}
-
 .glow-2{width:180px;height:180px;background:radial-gradient(circle,rgba(144,238,144,.1),transparent 65%);filter:blur(50px);animation-delay:2.5s}
-
 .ring{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:50%;border:1px solid rgba(144,238,144,.08);animation:ring-breathe 8s ease-in-out infinite;transition:border-color .3s ease}
 .ring-1{width:260px;height:260px}
 .ring-2{width:300px;height:300px;animation-delay:2s;border-style:dashed;border-color:rgba(144,238,144,.05)}
-
 .luminia:hover .ring{border-color:rgba(144,238,144,.15)}
 
 .content{position:relative;z-index:1}
 
 .sigil{font-size:14px;color:rgba(144,238,144,.3);margin-bottom:10px;animation:sigil-glow 4s ease-in-out infinite;letter-spacing:6px;transition:color .3s ease,letter-spacing .3s ease}
-
 .luminia:hover .sigil{color:rgba(144,238,144,.5);letter-spacing:10px}
 
-.luminia h1{font-size:26px;margin:0 0 6px;background:linear-gradient(90deg,#81c784,#a5d6a7,#c8e6c9,#a5d6a7,#81c784);background-size:200% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:shimmer 5s linear infinite;transition:transform .3s ease}
-
-.luminia:hover h1{transform:scale(1.02)}
-
-.luminia p{color:rgba(200,230,201,.6);font-size:10px;margin:0 0 14px;letter-spacing:2.5px;text-transform:uppercase;transition:color .3s ease,letter-spacing .3s ease}
+.title-wrap{position:relative;margin:0 0 6px;line-height:1.4}
+.title-glow{font-size:26px;color:rgba(144,238,144,.1);animation:title-glow 4s ease-in-out infinite;user-select:none}
+.title-shimmer{position:absolute;top:0;left:0;right:0;font-size:26px;background:linear-gradient(90deg,#81c784,#a5d6a7,#c8e6c9,#a5d6a7,#81c784);background-size:200% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:shimmer 5s linear infinite;transition:transform .3s ease}
+.luminia:hover .title-shimmer{transform:scale(1.02)}
 
-.luminia:hover p{color:rgba(200,230,201,.8);letter-spacing:3.5px}
+.sub-wrap{position:relative;display:inline-block;margin:10px auto 16px;padding:5px 26px;border-left:2px solid rgba(144,238,144,.15);clip-path:polygon(5% 0,100% 0,95% 100%,0 100%);background:rgba(144,238,144,.04);border:1px solid rgba(144,238,144,.1);transition:all .3s ease}
+.luminia:hover .sub-wrap{background:rgba(144,238,144,.08);border-color:rgba(144,238,144,.25);box-shadow:3px 3px 0px rgba(76,175,80,.2)}
+.sub-ghost{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-family:'JetBrains Mono',monospace;font-size:7px;color:rgba(144,238,144,.04);letter-spacing:1.5px;white-space:nowrap;text-transform:uppercase;user-select:none;transition:color .3s ease}
+.luminia:hover .sub-ghost{color:rgba(144,238,144,.08)}
+.sub-back{font-family:'Orbitron',sans-serif;font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:3px;color:rgba(144,238,144,.05);text-shadow:0 0 20px rgba(144,238,144,.1),0 0 40px rgba(76,175,80,.06);user-select:none}
+.sub-front{position:absolute;top:5px;left:26px;right:26px;font-family:'Orbitron',sans-serif;font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:3px;color:rgba(200,230,201,.7);animation:text-glow 4s ease-in-out infinite;transition:letter-spacing .3s ease,color .3s ease}
+.luminia:hover .sub-front{letter-spacing:4px;color:rgba(200,230,201,.95)}
 
 .divider{display:flex;align-items:center;justify-content:center;gap:8px;margin:0 0 18px}
 .divider .line{width:35px;height:1px;background:linear-gradient(90deg,transparent,rgba(144,238,144,.25),transparent);transition:width .3s ease}
 .divider .dot{width:4px;height:4px;background:rgba(144,238,144,.35);border-radius:50%;animation:dot-pulse 3s ease-in-out infinite}
-
 .luminia:hover .divider .line{width:50px}
 
 .team{display:flex;justify-content:center}
-
 .member{display:flex;align-items:center;gap:10px;padding:10px 20px;background:rgba(144,238,144,.03);border:1px solid rgba(144,238,144,.12);border-radius:25px;text-decoration:none;color:#a5d6a7;transition:all .3s ease;animation:float 4s ease-in-out infinite;position:relative;overflow:hidden}
-
 .member::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(144,238,144,.08),transparent);transform:translateX(-100%);transition:transform .5s ease}
-
 .member:hover::before{transform:translateX(100%)}
-
 .pulse-ring{position:absolute;inset:0;border-radius:25px;border:1px solid rgba(144,238,144,.3);opacity:0;pointer-events:none}
-
 .member:active .pulse-ring{animation:ripple .6s ease-out}
-
-.member:hover{background:rgba(144,238,144,.08);border-color:rgba(144,238,144,.3);box-shadow:0 0 25px rgba(76,175,80,.2);transform:translateY(-2px)}
-
+.member:hover{background:rgba(144,238,144,.08);border-color:rgba(144,238,144,.3);box-shadow:0 0 25px rgba(76,175,80,.2),3px 3px 0px rgba(144,238,144,.12);transform:translateY(-2px)}
 .member:active{transform:scale(.97);transition:transform .1s ease}
-
 .avatar{font-size:18px;transition:transform .3s ease}
 .member:hover .avatar{transform:rotate(10deg) scale(1.1)}
+.name-wrap{position:relative;display:inline-block}
+.name-back{font-weight:500;font-size:13px;letter-spacing:.5px;color:transparent;user-select:none;transition:color .4s ease}
+.name-front{position:absolute;top:0;left:0;right:0;font-weight:700;font-size:13px;letter-spacing:.5px;color:#a5d6a7;transition:all .4s ease}
+.member:hover .name-back{color:rgba(144,238,144,.12)}
+.member:hover .name-front{letter-spacing:1.5px;color:#0a1a0a;background:rgba(144,238,144,.85);padding:1px 8px;margin:-1px -8px;border-radius:3px;text-shadow:none;box-shadow:0 0 12px rgba(144,238,144,.3),3px 3px 0px rgba(76,175,80,.35)}
+</style>
 
-.name{font-weight:500;font-size:13px;letter-spacing:.5px;transition:letter-spacing .3s ease}
-.member:hover .name{letter-spacing:1.5px}
-</style>
+<div class="luminia">
+<div class="grid-layer"></div>
+<div class="glow"></div>
+<div class="glow glow-2"></div>
+<div class="ring ring-1"></div>
+<div class="ring ring-2"></div>
+<div class="noise"></div>
+<div class="content">
+  <div class="sigil">✧</div>
+  <div class="title-wrap">
+    <div class="title-glow">🌱 Luminia ✨</div>
+    <div class="title-shimmer">🌱 Luminia ✨</div>
+  </div>
+  <div class="sub-wrap">
+    <div class="sub-ghost">models · datasets · tools · community</div>
+    <div class="sub-back">Community-driven AI</div>
+    <div class="sub-front">Community-driven AI</div>
+  </div>
+  <div class="divider">
+    <span class="line"></span>
+    <span class="dot"></span>
+    <span class="line"></span>
+  </div>
+  <div class="team">
+    <a class="member" href="https://huggingface.co/Nekochu">
+      <span class="pulse-ring"></span>
+      <span class="avatar">🍀</span>
+      <span class="name-wrap">
+        <span class="name-back">Nekochu</span>
+        <span class="name-front">Nekochu</span>
+      </span>
+    </a>
+  </div>
+</div>
+</div>