:root {
  color-scheme: dark;
  background: #050510;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body,
.experience {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

body {
  background:
    radial-gradient(circle at 20% 20%, rgba(72, 35, 155, 0.16), transparent 34%),
    radial-gradient(circle at 80% 70%, rgba(0, 184, 255, 0.1), transparent 38%),
    #050510;
  overscroll-behavior: none;
}

.experience {
  position: relative;
  isolation: isolate;
  touch-action: none;
}

.experience::before {
  position: absolute;
  z-index: -1;
  inset: -30%;
  background:
    conic-gradient(from 190deg at 50% 50%, transparent 0 22%, rgba(50, 22, 130, 0.2) 34%, transparent 47% 68%, rgba(0, 159, 190, 0.13) 78%, transparent 90%),
    radial-gradient(ellipse at center, rgba(63, 27, 143, 0.12), transparent 58%);
  filter: blur(50px);
  content: "";
  animation: aurora-drift 24s ease-in-out infinite alternate;
}

.experience::after {
  position: absolute;
  z-index: 3;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 44%, rgba(2, 2, 12, 0.22) 73%, rgba(2, 2, 10, 0.72) 100%);
  content: "";
  pointer-events: none;
}

#light-field {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  cursor: crosshair;
}

@keyframes aurora-drift {
  from {
    transform: rotate(-7deg) scale(0.96) translate3d(-2%, -1%, 0);
  }

  to {
    transform: rotate(11deg) scale(1.08) translate3d(3%, 2%, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .experience::before {
    animation: none;
  }
}