static/css/preloader.css

.preloader,.space-canvas-container,.starfield{top:0;left:0;overflow:hidden}#spaceCanvas,.preloader,.starfield{width:100%;height:100%}.meteor,.star{border-radius:50%}.preloader,.progress-container,.starfield,body.preloader-active{overflow:hidden}.preloader{position:fixed;background:linear-gradient(135deg,#000 0,#0a0a1a 30%,#1a1a2e 60%,#16213e 100%);display:flex;justify-content:center;align-items:center;z-index:99999;transition:opacity .5s ease-out,visibility .5s ease-out}.meteor,.star,.starfield{position:absolute}.preloader.hide{opacity:0;visibility:hidden}.space-canvas-container{position:absolute;width:100%;height:100%}#spaceCanvas{display:block}.starfield{z-index:1}.star{background:#fff;animation:2s infinite alternate twinkle}.star.small{width:1px;height:1px;animation-duration:3s}.meteor,.star.medium{width:2px;height:2px}.star.medium{animation-duration:2.5s;box-shadow:0 0 4px rgba(255,255,255,.8)}.star.large{width:3px;height:3px;animation-duration:2s;box-shadow:0 0 6px rgba(255,255,255,.9)}@keyframes twinkle{0%,100%{opacity:.3;transform:scale(1)}50%{opacity:1;transform:scale(1.2)}}.meteor{background:linear-gradient(45deg,#fff 0,#00bcd4 100%);animation:3s linear infinite meteor;z-index:2}.loading-text,.progress-container{position:absolute;left:50%;transform:translateX(-50%);z-index:10}.meteor:first-child{top:20%;left:-5%;animation-delay:0s;animation-duration:3s}.meteor:nth-child(2){top:60%;left:-5%;animation-delay:1s;animation-duration:2.5s}.meteor:nth-child(3){top:40%;left:-5%;animation-delay:2s;animation-duration:3.5s}@keyframes meteor{0%{transform:translateX(0) translateY(0) scale(0);opacity:0}10%{transform:translateX(50px) translateY(-50px) scale(1);opacity:1;box-shadow:0 0 10px #00bcd4,-20px 10px 20px rgba(0,188,212,.3)}90%{transform:translateX(calc(100vw + 100px)) translateY(calc(-100vh - 100px)) scale(1);opacity:1;box-shadow:0 0 10px #00bcd4,-20px 10px 20px rgba(0,188,212,.3)}100%{transform:translateX(calc(100vw + 150px)) translateY(calc(-100vh - 150px)) scale(0);opacity:0}}.loading-text{bottom:120px;color:#fff;font-family:'Space Grotesk',monospace;font-size:1.5rem;font-weight:300;letter-spacing:4px;text-transform:uppercase;opacity:0;animation:3s ease-in-out infinite fadeInOut;text-shadow:0 0 20px rgba(0,180,255,.8)}@keyframes fadeInOut{0%,100%{opacity:0;transform:translateX(-50%) translateY(20px)}50%{opacity:1;transform:translateX(-50%) translateY(0)}}.progress-container{bottom:60px;width:300px;height:4px;background:rgba(255,255,255,.1);border-radius:2px}.progress-bar{height:100%;background:linear-gradient(90deg,#00bcd4 0,#2196f3 50%,#3f51b5 100%);width:0%;animation:4s ease-out forwards loadProgress;position:relative}.nebula,.progress-bar::after{position:absolute;top:0;left:0}.progress-bar::after{content:'';right:0;bottom:0;background:linear-gradient(90deg,transparent 0,rgba(255,255,255,.3) 50%,transparent 100%);animation:1.5s ease-in-out infinite shimmer}@keyframes loadProgress{0%{width:0%}25%{width:30%}50%{width:60%}75%{width:85%}100%{width:100%}}@keyframes shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}.nebula{width:100%;height:100%;background:radial-gradient(ellipse at 20% 30%,rgba(138,43,226,.15) 0,transparent 50%),radial-gradient(ellipse at 80% 70%,rgba(30,144,255,.15) 0,transparent 50%),radial-gradient(ellipse at 60% 20%,rgba(255,20,147,.15) 0,transparent 50%);animation:20s ease-in-out infinite nebulaShift;z-index:1}@keyframes nebulaShift{0%,100%{background:radial-gradient(ellipse at 20% 30%,rgba(138,43,226,.15) 0,transparent 50%),radial-gradient(ellipse at 80% 70%,rgba(30,144,255,.15) 0,transparent 50%),radial-gradient(ellipse at 60% 20%,rgba(255,20,147,.15) 0,transparent 50%)}33%{background:radial-gradient(ellipse at 70% 60%,rgba(138,43,226,.15) 0,transparent 50%),radial-gradient(ellipse at 30% 20%,rgba(30,144,255,.15) 0,transparent 50%),radial-gradient(ellipse at 80% 80%,rgba(255,20,147,.15) 0,transparent 50%)}66%{background:radial-gradient(ellipse at 40% 80%,rgba(138,43,226,.15) 0,transparent 50%),radial-gradient(ellipse at 90% 40%,rgba(30,144,255,.15) 0,transparent 50%),radial-gradient(ellipse at 10% 60%,rgba(255,20,147,.15) 0,transparent 50%)}}@media (max-width:768px){.loading-text{font-size:1.2rem;letter-spacing:2px}.progress-container{width:250px}}@media (max-width:480px){.loading-text{font-size:1rem;letter-spacing:1px}.progress-container{width:200px}}