finaly a cool intro

app/assets/styles/intro.css

@@ -4,140 +4,23 @@ body {
     align-items: center;
     width: 100%;
     min-height: 100vh;
-    background: #000;
+    background: #161616;
     overflow: hidden;
     font-family: sans;
 }
 
-.glowing {
-    position: absolute;
-    width: 60vw;
-    height: 100vh;
-    transform-origin: right;
-    animation: colorChange 5s linear infinite;
-    animation: fadeaway 30s forwards; 
-    transform: translateX(-50%);
-}
-.glowing.lt {
-    left: 0%;
-    transform: rotate(-15deg);
-    top: -15%;
-}
-.glowing.ct {
-    left: 50%;
-}
-.glowing.rt {
-    left: 50%;
-    transform: rotate(15deg)
+
+canvas.intro3d{
+    position:absolute;
+    top:0;
+    left:0;
+    width:100%;
+    height:100%;
+    background:transparent;
+    pointer-events: none;
+    z-index:99;
 }
 
-
-.glowing:nth-child(even) {
-    transform-origin: left;
-}
-
-@keyframes colorChange {
-    0% { filter: hue-rotate(0deg); }
-    100% { filter: hue-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(0,255,183,1);
-    box-shadow: 0 0 20px rgba(0,255,183,1),
-    0 0 40px rgba(0,255,183,1),
-    0 0 60px rgba(0,255,183,1),
-    0 0 80px rgba(0,255,183,1),
-    0 0 0 8px rgba(0,255,183,.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: rotatedots1 15s alternate infinite;
-}
-
-.glowing span:nth-child(3n + 2) {
-    animation: rotatedots-reverse 9s alternate infinite;
-}
-
-.glowing span:nth-child(3n + 3) {
-    animation: rotatedots1 15s alternate infinite; 
-}
-        
-@keyframes fadeaway {
-    0% { opacity: 1; }
-    15% { opacity: 1; }
-    100% { opacity: 0; }
-}
-
-@keyframes rotatedots1 {
-    0% { transform: rotate(calc(180deg * var(--i))); scale:20%;}
-    25% { transform: rotate(calc(90deg * var(--i))); scale:100%;}
-    50% { transform: rotate(calc(0deg * var(--i)));  scale:80%;}
-    100% { transform: rotate(calc(360deg * var(--i))); scale:10%;}
-}
-
-
-@keyframes rotatedots-reverse {
-  0%   { transform: rotate(calc(135deg * var(--i))); scale:20%;}
-  25%  { transform: rotate(calc(45deg * var(--i))); scale:100%;}
-  50%  { transform: rotate(calc(-45deg * var(--i))); scale:80%;}
-  100% { transform: rotate(calc(315deg * var(--i))); scale:10%;}
-}   
-
-
-
-
-.logointro{
-    filter: blur(14px);
-    opacity: 0;
-    animation: logoanim 5s ease-out forwards; /* runs once */
-    will-change: filter, opacity;
-    color: #FFF;
-    position: absolute;
-    text-shadow: 3px -3px 5px #C5F7FF;
-}
-
-@keyframes logoanim{
-    0%   { filter: blur(14px); opacity: 0; transform: scale(0.1) }
-    100% { filter: blur(0);    opacity: 1; transform: scale(0.7)  }
-}
     
 @keyframes startbtnanim{
     0%   { opacity: 0; }
@@ -157,6 +40,7 @@ body {
     background: radial-gradient(#82cc50, #0a8200);
     box-shadow: 2px 2px 10px #BAFFEF, -2px -2px 10px #BAFFEF, -2px 0 10px #BAFFEF, 0 -2px 10px #BAFFEF;
     animation: startbtnanim 5s ease-out forwards;
+    z-index: 99;
 }
 
 #startbtn[disabled]{