/* ==========================================================================
   Background — noise, mesh gradient, aurora, particles, scroll progress,
   custom cursor. All purely decorative/fixed layers behind the content.
   ========================================================================== */

.noise-overlay {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(60% 50% at 15% 10%, rgba(124, 92, 255, 0.22), transparent 60%),
    radial-gradient(50% 45% at 85% 15%, rgba(255, 92, 241, 0.16), transparent 60%),
    radial-gradient(70% 60% at 50% 100%, rgba(92, 225, 255, 0.12), transparent 60%),
    linear-gradient(180deg, var(--bg-0), var(--bg-1) 40%, var(--bg-2));
}

.aurora {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  filter: blur(70px);
  opacity: 0.55;
}

.aurora__blob {
  position: absolute;
  width: 46vw;
  height: 46vw;
  max-width: 640px;
  max-height: 640px;
  border-radius: 50%;
  will-change: transform;
}

.aurora__blob--1 {
  top: -10%;
  left: -8%;
  background: radial-gradient(circle at 30% 30%, var(--violet), transparent 70%);
  animation: drift-1 26s ease-in-out infinite;
}

.aurora__blob--2 {
  top: 10%;
  right: -12%;
  background: radial-gradient(circle at 60% 40%, var(--pink), transparent 70%);
  animation: drift-2 32s ease-in-out infinite;
}

.aurora__blob--3 {
  bottom: -18%;
  left: 25%;
  background: radial-gradient(circle at 50% 50%, var(--cyan), transparent 70%);
  animation: drift-3 38s ease-in-out infinite;
}

@keyframes drift-1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(6vw, 8vh) scale(1.15); }
}

@keyframes drift-2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-7vw, 6vh) scale(1.08); }
}

@keyframes drift-3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(4vw, -6vh) scale(1.12); }
}

#particles {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* ---------- Scroll progress bar ---------- */

.progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  z-index: 60;
  background: linear-gradient(90deg, var(--violet), var(--pink), var(--cyan));
  box-shadow: 0 0 12px rgba(124, 92, 255, 0.7);
  transform-origin: left;
}

/* ---------- Custom cursor ---------- */

.cursor-dot,
.cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 70;
  pointer-events: none;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.cursor-dot {
  width: 6px;
  height: 6px;
  background: var(--text-0);
}

.cursor-ring {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(245, 245, 250, 0.55);
  backdrop-filter: blur(1px);
}

body.has-custom-cursor .cursor-dot,
body.has-custom-cursor .cursor-ring {
  opacity: 1;
}

.cursor-ring.is-active {
  width: 54px;
  height: 54px;
  border-color: var(--violet-soft);
  background: rgba(124, 92, 255, 0.08);
}

@media (pointer: fine) {
  body.has-custom-cursor,
  body.has-custom-cursor * {
    cursor: none;
  }
}