:root {
  --background: 231 32% 10%;
  --foreground: 220 35% 95%;
  --primary: 286 92% 68%;
  --secondary: 191 89% 66%;
  --muted: 225 18% 22%;
  --destructive: 0 78% 63%;
  --border: 227 21% 28%;
  --card: 229 28% 14%;

  --shadow-sm: 0 8px 24px hsl(240 35% 2% / 0.18);
  --shadow-md: 0 18px 48px hsl(240 35% 2% / 0.28);
  --shadow-lg: 0 30px 120px hsl(286 92% 52% / 0.22);

  --transition-fast: 140ms ease;
  --transition-smooth: 280ms cubic-bezier(0.22, 1, 0.36, 1);

  --radius-sm: 0.65rem;
  --radius-md: 1rem;
  --radius-lg: 1.5rem;
}

.dark {
  --background: 231 32% 10%;
  --foreground: 220 35% 95%;
  --primary: 286 92% 68%;
  --secondary: 191 89% 66%;
  --muted: 225 18% 22%;
  --destructive: 0 78% 63%;
  --border: 227 21% 28%;
  --card: 229 28% 14%;
}

html:not(.dark) {
  --background: 228 40% 97%;
  --foreground: 231 26% 14%;
  --primary: 274 83% 54%;
  --secondary: 191 78% 44%;
  --muted: 230 24% 91%;
  --destructive: 0 70% 52%;
  --border: 228 22% 84%;
  --card: 0 0% 100%;

  --shadow-sm: 0 10px 24px hsl(228 32% 35% / 0.08);
  --shadow-md: 0 22px 56px hsl(228 32% 35% / 0.12);
  --shadow-lg: 0 28px 90px hsl(274 80% 42% / 0.12);
}

* {
  box-sizing: border-box;
}

html,
body,
#root {
  height: 100%;
}

body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

a,
button,
input {
  transition: all var(--transition-smooth);
}

::selection {
  background: hsl(var(--primary) / 0.28);
  color: hsl(var(--foreground));
}

.app-shell-bg {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at 20% 20%, hsl(var(--primary) / 0.16), transparent 30%),
    radial-gradient(circle at 80% 10%, hsl(var(--secondary) / 0.12), transparent 28%),
    linear-gradient(180deg, hsl(var(--background)), hsl(var(--background)));
  pointer-events: none;
}

.app-shell-grid {
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(hsl(var(--foreground) / 0.035) 1px, transparent 1px),
    linear-gradient(90deg, hsl(var(--foreground) / 0.035) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(circle at center, black 35%, transparent 85%);
  pointer-events: none;
  opacity: 0.45;
}

.scene-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 48%, hsl(var(--foreground) / 0.05), transparent 30%),
    linear-gradient(140deg, hsl(var(--background)), var(--c3));
}

.scene-base,
.scene-orb,
.scene-beam,
.scene-grain,
.scene-vignette {
  position: absolute;
  inset: 0;
}

.scene-base {
  background:
    radial-gradient(circle at 28% 32%, var(--c1), transparent 34%),
    radial-gradient(circle at 72% 40%, var(--c2), transparent 34%),
    radial-gradient(circle at 52% 72%, hsl(var(--secondary) / 0.18), transparent 28%);
  filter: blur(calc(var(--scene-blur) * 0.45));
  transform: scale(1.08);
}

.scene-orb {
  border-radius: 999px;
  filter: blur(var(--scene-blur));
  mix-blend-mode: screen;
  opacity: 0.95;
}

.orb-one {
  top: 8%;
  left: -10%;
  width: 58%;
  height: 58%;
  background: radial-gradient(circle, var(--c1) 0%, transparent 68%);
  animation: floatOne var(--scene-speed) infinite alternate ease-in-out;
}

.orb-two {
  top: 20%;
  right: -14%;
  width: 54%;
  height: 54%;
  background: radial-gradient(circle, var(--c2) 0%, transparent 68%);
  animation: floatTwo calc(var(--scene-speed) * 1.15) infinite alternate ease-in-out;
}

.orb-three {
  bottom: -18%;
  left: 20%;
  width: 62%;
  height: 62%;
  background: radial-gradient(circle, hsl(var(--secondary) / 0.4) 0%, transparent 70%);
  animation: floatThree calc(var(--scene-speed) * 1.35) infinite alternate ease-in-out;
}

.scene-beam {
  background:
    linear-gradient(115deg, transparent 20%, hsl(var(--foreground) / 0.09) 50%, transparent 78%),
    linear-gradient(90deg, transparent 35%, hsl(var(--foreground) / 0.04) 50%, transparent 65%);
  transform: translateX(-10%) scale(1.2);
  mix-blend-mode: screen;
  animation: beamSweep calc(var(--scene-speed) * 0.8) infinite linear;
}

.scene-grain {
  opacity: calc(var(--scene-grain) * 1.5);
  background-image:
    radial-gradient(circle at 20% 20%, hsl(var(--foreground) / 0.18) 0 0.8px, transparent 1px),
    radial-gradient(circle at 80% 30%, hsl(var(--foreground) / 0.14) 0 0.8px, transparent 1px),
    radial-gradient(circle at 60% 75%, hsl(var(--foreground) / 0.16) 0 0.8px, transparent 1px),
    radial-gradient(circle at 35% 60%, hsl(var(--foreground) / 0.1) 0 0.8px, transparent 1px);
  background-size: 18px 18px, 22px 22px, 24px 24px, 16px 16px;
  mix-blend-mode: soft-light;
}

.scene-vignette {
  background: radial-gradient(circle at center, transparent 48%, hsl(0 0% 0% / calc(0.22 + var(--scene-vignette))) 100%);
}

.slider {
  appearance: none;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, hsl(var(--primary) / 0.6), hsl(var(--secondary) / 0.65));
  outline: none;
}

.slider::-webkit-slider-thumb {
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  border: 2px solid hsl(var(--card));
  background: hsl(var(--foreground));
  box-shadow: var(--shadow-sm);
}

.slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  border: 2px solid hsl(var(--card));
  background: hsl(var(--foreground));
  box-shadow: var(--shadow-sm);
}

@keyframes floatOne {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(18%, 8%, 0) scale(1.12); }
}

@keyframes floatTwo {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(-18%, 10%, 0) scale(1.1); }
}

@keyframes floatThree {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(4%, -14%, 0) scale(1.08); }
}

@keyframes beamSweep {
  0% { transform: translateX(-18%) scale(1.2); }
  100% { transform: translateX(18%) scale(1.2); }
}

@media (max-width: 640px) {
  .app-shell-grid {
    background-size: 32px 32px;
  }

  .scene-vignette {
    background: radial-gradient(circle at center, transparent 40%, hsl(0 0% 0% / calc(0.28 + var(--scene-vignette))) 100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .orb-one,
  .orb-two,
  .orb-three,
  .scene-beam {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}