start btn & some css fight

index.html

@@ -4,136 +4,7 @@
     <meta charset="UTF-8">
     <script src="/core/Sparc-core-1.0.js"></script>
     <title>Project 42</title>
-    <style>
-        body {
-            display: flex; 
-            justify-content: center;
-            align-items: center;
-            width: 100%;
-            min-height: 100vh;
-            background: #000;
-            overflow: hidden;
-        }
-        
-        .glowing {
-            position: absolute;
-            width: 60vw;
-            height: 100vh;
-            transform-origin: right;
-            animation: colorChange 5s linear infinite;
-            animation: fadeaway 30s forwards; 
-            left: calc(50% + var(--j) * 50%);
-            transform: translateX(-50%);
-        }
-        
-        .glowing:nth-child(even) {
-            transform-origin: left;
-        }
-        
-        @keyframes colorChange {
-            0% {
-                filter: hue-rotate(0deg);
-                transform: rotate(0deg);
-            }
-            100% {
-                filter: hue-rotate(360deg);
-                transform: rotate(360deg);
-            }
-        }
-        
-        .glowing span {
-            position: absolute;
-            top: calc(80px * var(--i));
-            left: calc(80px * var(--i));
-            bottom: calc(80px * var(--i));
-            right: calc(80px * var(--i));
-            filter: blur(2px);
-        }
-        
-        .glowing span::before {
-            content: "";
-            position: absolute;
-            top: 50%;
-            left: -8px;
-            width: 10px;
-            height: 10px;
-            background: #f00;
-            border-radius: 50%;
-        }
-        
-        .glowing span:nth-child(3n + 1)::before {
-            background: rgba(134,255,0,1);
-            box-shadow: 0 0 20px rgba(134,255,0,1),
-            0 0 40px rgba(134,255,0,1),
-            0 0 60px rgba(134,255,0,1),
-            0 0 80px rgba(134,255,0,1),
-            0 0 0 8px rgba(134,255,0,.1);
-        }
-        
-        .glowing span:nth-child(3n + 2)::before {
-            background: rgba(255,214,0,1);
-            box-shadow: 0 0 20px rgba(255,214,0,1),
-            0 0 40px rgba(255,214,0,1),
-            0 0 60px rgba(255,214,0,1),
-            0 0 80px rgba(255,214,0,1),
-            0 0 0 8px rgba(255,214,0,.1);
-        }
-        
-        .glowing span:nth-child(3n + 3)::before {
-            background: rgba(0,226,255,1);
-            box-shadow: 0 0 20px rgba(0,226,255,1),
-            0 0 40px rgba(0,226,255,1),
-            0 0 60px rgba(0,226,255,1),
-            0 0 80px rgba(0,226,255,1),
-            0 0 0 8px rgba(0,226,255,.1);
-        }
-
-        .glowing span:nth-child(3n + 1) {
-            animation: rotatedots 15s alternate infinite;
-        }
-        
-        .glowing span:nth-child(3n + 2) {
-            animation: rotatedots-reverse 5s alternate infinite;
-        }
-        
-        .glowing span:nth-child(3n + 3) {
-            animation: rotatedots 11s alternate infinite; 
-        }
-                
-        @keyframes fadeaway {
-            0% { opacity: 1; }
-            15% { opacity: 1; }
-            100% { opacity: 0; }
-        }
-        
-        @keyframes rotatedots {
-            0% { transform: rotate(180deg); }
-            50% { transform: rotate(0deg); }
-            100% { transform: rotate(360deg); }
-        }
-        
-        @keyframes rotatedots-reverse {
-            0% { transform: rotate(360deg); }            
-            50% { transform: rotate(180deg); }
-            100% { transform: rotate(0deg); }
-        }   
-        .deblur{
-            filter: blur(14px);
-            opacity: 0;
-            animation: deblur 5s ease-out forwards; /* runs once */
-            will-change: filter, opacity;
-            color: #FFF;
-            position: absolute;
-            font-family: sans;
-            text-shadow: 3px -3px 5px #C5F7FF;
-        }
-        
-        @keyframes deblur{
-            0%   { filter: blur(14px); opacity: 0; transform: scale(0.1) }
-            100% { filter: blur(0);    opacity: 1; transform: scale(1)  }
-        }
-            
-    </style>
+    <link rel="stylesheet" type="text/css" href="/app/assets/styles/intro.css" media="all">
 </head>
 
 <body>
@@ -153,6 +24,7 @@
         <span style="--i:2;"></span>
         <span style="--i:3;"></span>
     </div>
-    <img src="/app/assets/images/logop42-intro.png" class="deblur"/>
+    <img src="/app/assets/images/logop42-intro.png" class="logointro"/>
+    <div id="startbtn">START</div>
 </body>
 </html>