.background-grid {
  position: fixed;
  inset: 0;
  z-index: -5;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(circle at center, black 0%, transparent 80%);
}

.noise {
  position: fixed;
  inset: 0;
  z-index: -4;
  pointer-events: none;
  opacity: 0.18;
  background-image: radial-gradient(rgba(255, 255, 255, 0.14) 1px, transparent 1px);
  background-size: 4px 4px;
}

.glow {
  position: fixed;
  z-index: -3;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.18;
  pointer-events: none;
}

.glow-cyan {
  top: 10%;
  left: 8%;
  background: var(--cyan);
}

.glow-purple {
  top: 55%;
  right: 5%;
  background: var(--purple);
}

.glow-blue {
  bottom: 10%;
  left: 25%;
  background: var(--blue);
}

.cursor-ring,
.cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.cursor-ring {
  width: 36px;
  height: 36px;
  border: 1px solid rgba(77, 225, 230, 0.75);
  border-radius: 50%;
  transition: width 0.2s ease, height 0.2s ease, border-color 0.2s ease;
}

.cursor-ring.is-hovering {
  width: 64px;
  height: 64px;
  border-color: rgba(77, 225, 230, 0.25);
}

.cursor-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cyan);
}

@media (max-width: 1000px) {
  .cursor-ring,
  .cursor-dot {
    display: none;
  }
}