:root {
  --night: #000106;
  --accent: #a977ff;
  --mist: rgba(225, 234, 255, 0.66);
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  overflow-x: hidden;
  background: var(--night);
}

body {
  color: white;
  font-family: Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.experience {
  position: relative;
  isolation: isolate;
  width: 100%;
  height: 2080vh;
  background: #000106;
}

.cosmic-background {
  position: fixed;
  inset: -18%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 34% 42%, rgba(39, 25, 94, 0.24) 0%, rgba(15, 14, 48, 0.1) 29%, transparent 55%),
    radial-gradient(circle at 76% 62%, rgba(49, 20, 82, 0.17) 0%, rgba(20, 10, 42, 0.07) 30%, transparent 54%),
    radial-gradient(circle at 52% 50%, rgba(9, 25, 50, 0.16) 0%, transparent 48%),
    linear-gradient(135deg, #000208 0%, #01040c 45%, #000105 100%);
  transform: scale(1.05);
  will-change: transform;
}

#scene,
#scene canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
}

#scene {
  z-index: 1;
}

#scene canvas {
  filter: blur(0.35px);
  cursor: crosshair;
}

.dream-haze,
.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.dream-haze {
  z-index: 2;
  inset: -18%;
  background:
    radial-gradient(circle at 28% 42%, rgba(92, 111, 255, 0.08), transparent 46%),
    radial-gradient(circle at 72% 58%, rgba(91, 43, 173, 0.07), transparent 48%),
    radial-gradient(circle at 50% 48%, rgba(146, 105, 255, 0.035), transparent 32%);
  filter: blur(60px);
  mix-blend-mode: screen;
  animation: breathe 44s ease-in-out infinite alternate;
}

.grain {
  z-index: 3;
  opacity: 0.1;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.34'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

.eyebrow,
.hint {
  position: fixed;
  z-index: 4;
  bottom: clamp(22px, 4vw, 46px);
  margin: 0;
  color: var(--mist);
  font-size: 9px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

.eyebrow {
  left: clamp(22px, 4vw, 52px);
}

.hint {
  right: clamp(22px, 4vw, 52px);
}

.hint span {
  display: inline-block;
  width: 18px;
  height: 1px;
  margin-right: 10px;
  vertical-align: 3px;
  background: var(--accent);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@keyframes breathe {
  from { transform: translate3d(-1.5%, -1%, 0) scale(0.97) rotate(-2deg); opacity: 0.62; }
  to { transform: translate3d(1.5%, 1%, 0) scale(1.04) rotate(2deg); opacity: 0.88; }
}

@media (max-width: 640px) {
  .hint { display: none; }
  .eyebrow { bottom: max(22px, env(safe-area-inset-bottom)); font-size: 8px; }
}

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