* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
}

body {
  background: #0a0a0e;
  overflow: hidden;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  position: relative;
  cursor: none;
}

.custom-cursor {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(94, 84, 255, 0.8);
  border-radius: 50%;
  position: fixed;
  pointer-events: none;
  z-index: 10000;
  transform: translate(-50%, -50%);
  transition: border-color 0.2s ease, background-color 0.2s ease, opacity 0.3s ease;
  box-shadow: 0 0 15px rgba(94, 84, 255, 0.4);
}

.custom-cursor.hovering {
  background-color: rgba(94, 84, 255, 0.1);
  border-color: rgba(94, 84, 255, 1);
  box-shadow: 0 0 20px rgba(94, 84, 255, 0.4);
}

#fade-overlay {
  position: fixed;
  inset: 0;
  background: #000000;
  z-index: 9999;
  pointer-events: none;
  animation: fadeOut 1.5s ease-out forwards;
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

#grid-background {
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(rgba(94, 84, 255, 0.15) 1px, transparent 1px),
    linear-gradient(90deg, rgba(94, 84, 255, 0.15) 1px, transparent 1px);
  background-size: 50px 50px;
  animation: gridScroll 20s linear infinite;
  z-index: 1;
}

@keyframes gridScroll {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(50px, 50px);
  }
}

#radial-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at 50% 50%,
    rgba(90, 45, 255, 0.25) 0%,
    rgba(75, 106, 247, 0.15) 30%,
    rgba(10, 10, 14, 0.3) 60%,
    #0a0a0e 100%
  );
  z-index: 1;
  pointer-events: none;
}

.particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  overflow: hidden;
}

.particle {
  position: absolute;
  width: 6px;
  height: 6px;
  background: rgba(94, 84, 255, 0.9);
  border-radius: 50%;
  box-shadow: 
    0 0 20px rgba(94, 84, 255, 1),
    0 0 40px rgba(94, 84, 255, 0.8),
    0 0 60px rgba(94, 84, 255, 0.6);
  animation: particleFloat linear infinite;
  transition: transform 0.2s ease-out;
}

.particle:nth-child(1) {
  left: 10%;
  animation-duration: 15s;
  animation-delay: -7s;
}

.particle:nth-child(2) {
  left: 25%;
  animation-duration: 20s;
  animation-delay: -10s;
  background: rgba(110, 95, 255, 0.9);
  box-shadow: 
    0 0 20px rgba(110, 95, 255, 1),
    0 0 40px rgba(110, 95, 255, 0.8),
    0 0 60px rgba(110, 95, 255, 0.6);
}

.particle:nth-child(3) {
  left: 40%;
  animation-duration: 18s;
  animation-delay: -5s;
  width: 5px;
  height: 5px;
}

.particle:nth-child(4) {
  left: 55%;
  animation-duration: 22s;
  animation-delay: -12s;
  background: rgba(75, 106, 247, 0.9);
  box-shadow: 
    0 0 20px rgba(75, 106, 247, 1),
    0 0 40px rgba(75, 106, 247, 0.8),
    0 0 60px rgba(75, 106, 247, 0.6);
}

.particle:nth-child(5) {
  left: 70%;
  animation-duration: 16s;
  animation-delay: -3s;
  width: 7px;
  height: 7px;
}

.particle:nth-child(6) {
  left: 85%;
  animation-duration: 19s;
  animation-delay: -8s;
  background: rgba(122, 105, 255, 0.9);
  box-shadow: 
    0 0 20px rgba(122, 105, 255, 1),
    0 0 40px rgba(122, 105, 255, 0.8),
    0 0 60px rgba(122, 105, 255, 0.6);
}

.particle:nth-child(7) {
  left: 15%;
  animation-duration: 21s;
  animation-delay: -14s;
  width: 5px;
  height: 5px;
}

.particle:nth-child(8) {
  left: 33%;
  animation-duration: 17s;
  animation-delay: -6s;
  background: rgba(59, 76, 255, 0.9);
  box-shadow: 
    0 0 20px rgba(59, 76, 255, 1),
    0 0 40px rgba(59, 76, 255, 0.8),
    0 0 60px rgba(59, 76, 255, 0.6);
}

.particle:nth-child(9) {
  left: 48%;
  animation-duration: 23s;
  animation-delay: -11s;
}

.particle:nth-child(10) {
  left: 62%;
  animation-duration: 14s;
  animation-delay: -4s;
  width: 6px;
  height: 6px;
}

.particle:nth-child(11) {
  left: 77%;
  animation-duration: 20s;
  animation-delay: -9s;
  background: rgba(140, 123, 255, 0.9);
  box-shadow: 
    0 0 20px rgba(140, 123, 255, 1),
    0 0 40px rgba(140, 123, 255, 0.8),
    0 0 60px rgba(140, 123, 255, 0.6);
}

.particle:nth-child(12) {
  left: 92%;
  animation-duration: 18s;
  animation-delay: -13s;
  width: 5px;
  height: 5px;
}

.particle:nth-child(13) {
  left: 5%;
  animation-duration: 19s;
  animation-delay: -2s;
  background: rgba(55, 83, 255, 0.9);
  box-shadow: 
    0 0 20px rgba(55, 83, 255, 1),
    0 0 40px rgba(55, 83, 255, 0.8),
    0 0 60px rgba(55, 83, 255, 0.6);
}

.particle:nth-child(14) {
  left: 45%;
  animation-duration: 16s;
  animation-delay: -15s;
  width: 7px;
  height: 7px;
}

.particle:nth-child(15) {
  left: 68%;
  animation-duration: 21s;
  animation-delay: -1s;
}

.particle:nth-child(16) {
  left: 18%;
  animation-duration: 24s;
  animation-delay: -16s;
  width: 5px;
  height: 5px;
  background: rgba(90, 45, 255, 0.9);
  box-shadow: 
    0 0 20px rgba(90, 45, 255, 1),
    0 0 40px rgba(90, 45, 255, 0.8),
    0 0 60px rgba(90, 45, 255, 0.6);
}

.particle:nth-child(17) {
  left: 52%;
  animation-duration: 19s;
  animation-delay: -17s;
  width: 7px;
  height: 7px;
}

.particle:nth-child(18) {
  left: 8%;
  animation-duration: 22s;
  animation-delay: -18s;
  width: 4px;
  height: 4px;
  background: rgba(110, 95, 255, 0.9);
  box-shadow: 
    0 0 20px rgba(110, 95, 255, 1),
    0 0 40px rgba(110, 95, 255, 0.8),
    0 0 60px rgba(110, 95, 255, 0.6);
}

.particle:nth-child(19) {
  left: 88%;
  animation-duration: 17s;
  animation-delay: -19s;
  width: 6px;
  height: 6px;
}

.particle:nth-child(20) {
  left: 28%;
  animation-duration: 20s;
  animation-delay: -20s;
  width: 5px;
  height: 5px;
  background: rgba(75, 106, 247, 0.9);
  box-shadow: 
    0 0 20px rgba(75, 106, 247, 1),
    0 0 40px rgba(75, 106, 247, 0.8),
    0 0 60px rgba(75, 106, 247, 0.6);
}

.particle:nth-child(21) {
  left: 58%;
  animation-duration: 23s;
  animation-delay: -21s;
  width: 7px;
  height: 7px;
  background: rgba(122, 105, 255, 0.9);
  box-shadow: 
    0 0 20px rgba(122, 105, 255, 1),
    0 0 40px rgba(122, 105, 255, 0.8),
    0 0 60px rgba(122, 105, 255, 0.6);
}

.particle:nth-child(22) {
  left: 38%;
  animation-duration: 18s;
  animation-delay: -22s;
  width: 4px;
  height: 4px;
}

.particle:nth-child(23) {
  left: 72%;
  animation-duration: 21s;
  animation-delay: -23s;
  width: 6px;
  height: 6px;
  background: rgba(59, 76, 255, 0.9);
  box-shadow: 
    0 0 20px rgba(59, 76, 255, 1),
    0 0 40px rgba(59, 76, 255, 0.8),
    0 0 60px rgba(59, 76, 255, 0.6);
}

.particle:nth-child(24) {
  left: 12%;
  animation-duration: 16s;
  animation-delay: -24s;
  width: 5px;
  height: 5px;
  background: rgba(140, 123, 255, 0.9);
  box-shadow: 
    0 0 20px rgba(140, 123, 255, 1),
    0 0 40px rgba(140, 123, 255, 0.8),
    0 0 60px rgba(140, 123, 255, 0.6);
}

.particle:nth-child(25) {
  left: 82%;
  animation-duration: 25s;
  animation-delay: -25s;
  width: 7px;
  height: 7px;
  background: rgba(55, 83, 255, 0.9);
  box-shadow: 
    0 0 20px rgba(55, 83, 255, 1),
    0 0 40px rgba(55, 83, 255, 0.8),
    0 0 60px rgba(55, 83, 255, 0.6);
}

@keyframes particleFloat {
  0% {
    transform: translate(calc(0px + var(--push-x, 0px)), calc(110vh + var(--push-y, 0px))) scale(0);
    opacity: 0;
  }
  1% {
    transform: translate(calc(0px + var(--push-x, 0px)), calc(110vh + var(--push-y, 0px))) scale(0.3);
    opacity: 0;
  }
  3% {
    opacity: 1;
  }
  97% {
    opacity: 1;
  }
  100% {
    transform: translate(calc(calc((var(--drift-x, 0) - 0.5) * 100px) + var(--push-x, 0px)), calc(-10vh + var(--push-y, 0px))) scale(1);
    opacity: 0;
  }
}

#scanlines {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    rgba(94, 84, 255, 0.08) 0px,
    transparent 2px,
    transparent 4px
  );
  pointer-events: none;
  z-index: 4;
  opacity: 0.7;
}

#vignette {
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(ellipse at center, transparent 30%, rgba(0, 0, 0, 0.3) 100%),
    radial-gradient(ellipse at center, transparent 20%, rgba(0, 0, 0, 0.3) 100%),
    radial-gradient(ellipse at center, transparent 10%, rgba(0, 0, 0, 0.2) 100%);
  pointer-events: none;
  z-index: 5;
}

.blooms {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

.blooms span {
  position: absolute;
  width: 400px;
  height: 400px;
  background: radial-gradient(
    circle,
    rgba(110, 95, 255, 0.08),
    transparent 70%
  );
  filter: blur(80px);
  animation: bloomFloat 25s ease-in-out infinite;
  opacity: 0.6;
}

.blooms span:nth-child(1) {
  top: 20%;
  left: 15%;
}

.blooms span:nth-child(2) {
  top: 60%;
  left: 65%;
  animation-delay: 8s;
  background: radial-gradient(
    circle,
    rgba(122, 105, 255, 0.08),
    transparent 70%
  );
}

.blooms span:nth-child(3) {
  top: 40%;
  left: 45%;
  animation-delay: 15s;
  background: radial-gradient(
    circle,
    rgba(59, 76, 255, 0.08),
    transparent 70%
  );
}

@keyframes bloomFloat {
  0%, 100% {
    transform: translate(0, 0);
    opacity: 0.4;
  }
  50% {
    transform: translate(40px, -30px);
    opacity: 0.7;
  }
}

#logo-wrapper {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 10;
  padding: 20px;
}

#logo {
  width: 90%;
  max-width: 800px;
  height: auto;
  user-select: none;
  filter: drop-shadow(0 0 25px rgba(94, 84, 255, 0.35));
  transition: filter 0.4s ease;
  will-change: transform;
  cursor: none;
  transform: perspective(900px) rotateX(0deg) rotateY(0deg) scale(1) rotateZ(0deg);
}

@media (max-width: 768px) {
  body {
    cursor: auto;
  }
  
  .custom-cursor {
    display: none;
  }
  
  .particle {
    width: 4px;
    height: 4px;
  }
  
  .particle:nth-child(3),
  .particle:nth-child(7),
  .particle:nth-child(12),
  .particle:nth-child(16),
  .particle:nth-child(22),
  .particle:nth-child(24) {
    width: 3px;
    height: 3px;
  }
  
  .particle:nth-child(5),
  .particle:nth-child(14),
  .particle:nth-child(17),
  .particle:nth-child(21),
  .particle:nth-child(25) {
    width: 5px;
    height: 5px;
  }
  
  .blooms span {
    width: 300px;
    height: 300px;
    filter: blur(60px);
  }
  
  #grid-background {
    background-size: 30px 30px;
  }
  
  @keyframes gridScroll {
    0% {
      transform: translate(0, 0);
    }
    100% {
      transform: translate(30px, 30px);
    }
  }
}

@media (max-width: 480px) {
  #logo {
    width: 95%;
  }
  
  .blooms span {
    width: 200px;
    height: 200px;
    filter: blur(40px);
  }
  
  #grid-background {
    background-size: 25px 25px;
  }
  
  @keyframes gridScroll {
    0% {
      transform: translate(0, 0);
    }
    100% {
      transform: translate(25px, 25px);
    }
  }
}