:root {
  --erosx-ambient-primary: 345 82% 55%;
  --erosx-ambient-accent: 330 72% 48%;
  --erosx-ambient-base: 0 0% 5%;
}

#erosx-ambient-background {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: hsl(var(--erosx-ambient-base));
}

#root {
  position: relative;
  z-index: 1;
}

.erosx-ambient-blob {
  position: absolute;
  border-radius: 9999px;
  filter: blur(120px);
  will-change: transform;
}

.erosx-ambient-blob--one {
  top: -35vw;
  left: -22vw;
  width: 70vw;
  height: 70vw;
  opacity: 0.25;
  background: radial-gradient(circle, hsl(var(--erosx-ambient-primary) / 0.7), transparent 60%);
  animation: erosx-ambient-drift-one 24s ease-in-out infinite;
}

.erosx-ambient-blob--two {
  top: 22vh;
  right: -24vw;
  width: 60vw;
  height: 60vw;
  opacity: 0.18;
  background: radial-gradient(circle, hsl(var(--erosx-ambient-accent) / 0.8), transparent 60%);
  animation: erosx-ambient-drift-two 21s ease-in-out infinite;
}

.erosx-ambient-blob--three {
  bottom: -38vw;
  left: 32vw;
  width: 55vw;
  height: 55vw;
  opacity: 0.15;
  background: radial-gradient(circle, hsl(330 80% 55% / 0.6), transparent 60%);
  animation: erosx-ambient-drift-three 18s ease-in-out infinite;
}

.erosx-ambient-vignette,
.erosx-ambient-grain {
  position: absolute;
  inset: 0;
}

.erosx-ambient-vignette {
  background: radial-gradient(ellipse at center, transparent 38%, hsl(var(--erosx-ambient-base) / 0.94) 100%);
}

.erosx-ambient-grain {
  opacity: 0.045;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.7'/></svg>");
  background-size: 160px 160px;
}

#erosx-scroll-progress {
  position: fixed;
  inset: 0 0 auto;
  z-index: 10000;
  height: 2px;
  pointer-events: none;
}

#erosx-scroll-progress-bar {
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, hsl(var(--erosx-ambient-primary)), hsl(var(--erosx-ambient-accent)), hsl(var(--erosx-ambient-primary)));
  box-shadow: 0 0 12px hsl(var(--erosx-ambient-primary) / 0.7);
  transition: width 100ms linear;
}

@keyframes erosx-ambient-drift-one {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(7vw, 5vh, 0) scale(1.08); }
}

@keyframes erosx-ambient-drift-two {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(-8vw, -4vh, 0) scale(1.1); }
}

@keyframes erosx-ambient-drift-three {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(-5vw, -7vh, 0) scale(1.06); }
}

@media (prefers-reduced-motion: reduce) {
  .erosx-ambient-blob {
    animation: none;
  }

  #erosx-scroll-progress-bar {
    transition: none;
  }
}