* {
       margin: 0;
       padding: 0;
       box-sizing: border-box;
       cursor: none;
       user-select: none;
   }

   body {
       font-family: "Poppins", sans-serif;
       overflow: hidden;
       background: #000;
       color: #fff;
       height: 100vh;
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
       position: relative;
   }

   .cursor {
       width: 20px;
       height: 20px;
       border: 2px solid #9355ff;
       border-radius: 60%;
       position: fixed;
       pointer-events: none;
       z-index: 9999;
       transition: transform 0.1s;
       mix-blend-mode: difference;
   }

   .cursor-dot {
       width: 4px;
       height: 4px;
       background: #9355ff;
       border-radius: 70%;
       position: fixed;
       pointer-events: none;
       z-index: 9999;
       transform: translate(-50%, -50%);
   }

   .trail {
       position: fixed;
       width: 15px;
       height: 15px;
       background: radial-gradient(circle, #9355ff 0%, transparent 70%);
       border-radius: 50%;
       pointer-events: none;
       animation: trail-fade 1s ease-out forwards;
       z-index: 1;
   }

   @keyframes trail-fade {
       0% {
           opacity: 1;
           transform: scale(1) translate(-50%, -50%);
       }

       100% {
           opacity: 0;
           transform: scale(3) translate(-50%, -50%);
       }
   }

   .background-container {
       position: fixed;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       z-index: -1;
   }

   .background-image {
       position: absolute;
       width: 100%;
       height: 100%;
       background-size: cover;
       background-position: center;
       opacity: 0;
       transition: opacity 2s ease-in-out;
       filter: brightness(0.8);
   }

   .background-image.active {
       opacity: 0.7;
   }

   .particles {
       position: fixed;
       width: 100%;
       height: 100%;
       z-index: 0;
   }

   .particle {
       position: absolute;
       width: 4px;
       height: 4px;
       background: #9355ff;
       border-radius: 50%;
       opacity: 0;
       animation: float-up 8s infinite;
   }

   @keyframes float-up {
       0% {
           opacity: 0;
           transform: translateY(100vh) scale(0);
       }

       10% {
           opacity: 0.8;
       }

       90% {
           opacity: 0.8;
       }

       100% {
           opacity: 0;
           transform: translateY(-100vh) scale(1.5);
       }
   }

   .overlay {
       position: fixed;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       background: radial-gradient(circle at center, transparent 0%, rgba(0, 0, 0, 0.8) 100%);
       z-index: 0;
   }

   .content {
       text-align: center;
       z-index: 1;
       max-width: 600px;
       padding: 20px;
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
   }

   .logo {
       width: 300px;
       height: 300px;
       margin: 0 auto -25px auto;
       opacity: 0;
       animation: logo-entrance 1s ease-out forwards;
       display: flex;
       align-items: center;
       justify-content: center;
   }

   @keyframes logo-entrance {
       0% {
           opacity: 0;
           transform: scale(0.6) rotate(-180deg);
       }

       50% {
           opacity: 1;
           transform: scale(1.4) rotate(10deg);
       }

       100% {
           opacity: 1;
           transform: scale(1.4) rotate(0deg);
       }
   }

   .logo-img {
       width: 100%;
       height: 125%;
       background: url('https://files.fivemerr.com/images/ceda90c9-8c1a-487c-bbcc-a8644c3205f3.png') no-repeat center;
       background-size: contain;
       filter: drop-shadow(0 0 30px rgba(167, 85, 255, 0.5));
       animation: pulse 2s infinite, logo-glow 3s ease-in-out infinite;
   }

   @keyframes pulse {
       0% {
           transform: scale(1);
       }

       50% {
           transform: scale(1.05);
       }

       100% {
           transform: scale(1);
       }
   }

   @keyframes logo-glow {

       0%,
       100% {
           filter: drop-shadow(0 0 30px rgba(167, 85, 255, 0.5));
       }

       50% {
           filter: drop-shadow(0 0 50px rgba(167, 85, 255, 0.5));
       }
   }

   .loading-container {
       margin: 10px auto;
       opacity: 0;
       animation: fade-in 1s ease-out forwards 1.5s;
       width: 100%;
       max-width: 400px;
       text-align: center;
   }

   @keyframes fade-in {
       to {
           opacity: 1;
       }
   }

   .loading-bar {
       width: 100%;
       height: 6px;
       background: rgba(255, 255, 255, 0.1);
       border-radius: 3px;
       overflow: hidden;
       position: relative;
       box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3);
       margin: 0 auto;
   }

   .loading-progress {
       height: 100%;
       background: linear-gradient(90deg, #9355ff, #9355ff, #9355ff);
       background-size: 200% 100%;
       width: 0%;
       transition: width 0.3s ease;
       box-shadow: 0 0 20px rgba(167, 85, 255, 0.7);
       animation: shimmer 2s linear infinite;
   }

   @keyframes shimmer {
       0% {
           background-position: -200% 0;
       }

       100% {
           background-position: 200% 0;
       }
   }

   .loading-text {
       margin-top: 15px;
       font-size: 14px;
       color: #d8d8d881;
       letter-spacing: 1px;
       font-weight: 300;
       text-align: center;
   }



   @keyframes slide-in-left {
       from {
           opacity: 0;
           transform: translateX(-100px);
       }

       to {
           opacity: 1;
           transform: translateX(0);
       }
   }

   @keyframes blink {

       0%,
       100% {
           opacity: 1;
       }

       50% {
           opacity: 0.3;
       }
   }

   @keyframes slide-in-right {
       from {
           opacity: 0;
           transform: translateX(100px);
       }

       to {
           opacity: 1;
           transform: translateX(0);
       }
   }



   .music-info {
       position: absolute;
       bottom: 20px;
       left: 50%;
       transform: translateX(-50%);
       font-size: 10px;
       color: #d8d8d881;
       letter-spacing: 3px;
       text-align: center;
       z-index: 2;
   }