* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
}

body {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 18%, rgba(72, 163, 255, 0.1), transparent 26%),
    radial-gradient(circle at 82% 14%, rgba(30, 214, 165, 0.08), transparent 24%),
    radial-gradient(circle at 50% 100%, rgba(10, 49, 74, 0.22), transparent 38%),
    linear-gradient(180deg, var(--bg), var(--bg-2));
  color: var(--text);
  font-family: var(--font-family-base);
}

body[data-bg="aurora"] {
  background:
    radial-gradient(circle at 16% 22%, rgba(60, 138, 255, 0.12), transparent 24%),
    radial-gradient(circle at 76% 16%, rgba(129, 255, 224, 0.09), transparent 22%),
    radial-gradient(circle at 50% 100%, rgba(0, 90, 102, 0.22), transparent 40%),
    linear-gradient(180deg, #06111a, #0b1720);
}

body[data-bg="midnight-grid"] {
  background:
    radial-gradient(circle at 50% 0%, rgba(76, 120, 255, 0.08), transparent 22%),
    radial-gradient(circle at 100% 100%, rgba(0, 148, 255, 0.1), transparent 28%),
    linear-gradient(180deg, #06090f, #0a111b);
}

body[data-bg="soft-cyan"] {
  background:
    radial-gradient(circle at 18% 18%, rgba(101, 221, 255, 0.12), transparent 24%),
    radial-gradient(circle at 84% 22%, rgba(86, 166, 255, 0.08), transparent 22%),
    radial-gradient(circle at 50% 100%, rgba(14, 61, 87, 0.28), transparent 42%),
    linear-gradient(180deg, #061018, #0b1b25);
}

body[data-bg="horizon-grid"] {
  background:
    radial-gradient(circle at 50% 50%, rgba(18, 255, 245, 0.06), transparent 24%),
    radial-gradient(circle at 50% 50%, rgba(14, 107, 143, 0.09), transparent 46%),
    linear-gradient(180deg, #02070a 0%, #02070a 43%, #010305 50%, #02070a 57%, #02070a 100%);
}

body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

body::before {
  background:
    linear-gradient(90deg, transparent 0 6%, rgba(195, 68, 255, 0.85) 6% 28%, transparent 28% 100%) 0 32px / 100% 3px no-repeat,
    linear-gradient(90deg, transparent 0 8%, rgba(86, 166, 255, 0.82) 8% 27%, transparent 27% 100%) 0 84px / 100% 2px no-repeat,
    linear-gradient(90deg, transparent 0 18%, rgba(86, 166, 255, 0.7) 18% 78%, transparent 78% 100%) 0 calc(100% - 86px) / 100% 2px no-repeat,
    linear-gradient(90deg, transparent 0 6%, rgba(195, 68, 255, 0.84) 6% 54%, transparent 54% 100%) 0 calc(100% - 34px) / 100% 3px no-repeat;
  filter: blur(2px);
  opacity: 0.9;
  animation: frameGlowDrift 14s ease-in-out infinite alternate;
}

body[data-bg="aurora"]::before {
  background:
    linear-gradient(90deg, transparent 0 8%, rgba(66, 171, 255, 0.66) 8% 24%, transparent 24% 100%) 0 44px / 100% 2px no-repeat,
    linear-gradient(90deg, transparent 0 16%, rgba(109, 255, 214, 0.58) 16% 72%, transparent 72% 100%) 0 calc(100% - 50px) / 100% 2px no-repeat;
  filter: blur(6px);
  opacity: 0.72;
}

body[data-bg="midnight-grid"]::before {
  background:
    linear-gradient(90deg, transparent 0 8%, rgba(92, 126, 255, 0.48) 8% 38%, transparent 38% 100%) 0 40px / 100% 2px no-repeat,
    linear-gradient(90deg, transparent 0 24%, rgba(92, 126, 255, 0.36) 24% 84%, transparent 84% 100%) 0 calc(100% - 42px) / 100% 2px no-repeat;
  filter: blur(3px);
  opacity: 0.54;
}

body[data-bg="soft-cyan"]::before {
  background:
    linear-gradient(90deg, transparent 0 6%, rgba(85, 220, 255, 0.78) 6% 24%, transparent 24% 100%) 0 34px / 100% 3px no-repeat,
    linear-gradient(90deg, transparent 0 22%, rgba(86, 166, 255, 0.5) 22% 78%, transparent 78% 100%) 0 calc(100% - 42px) / 100% 2px no-repeat;
  filter: blur(2px);
  opacity: 0.8;
}

body[data-bg="horizon-grid"]::before {
  inset: 0 -8% auto;
  height: 40vh;
  background:
    linear-gradient(180deg, rgba(1, 7, 10, 0) 0%, rgba(1, 7, 10, 0.12) 18%, rgba(1, 7, 10, 0.58) 100%),
    repeating-linear-gradient(90deg, rgba(0, 232, 255, 0.9) 0 2px, transparent 2px 38px),
    repeating-linear-gradient(180deg, rgba(0, 232, 255, 0.88) 0 2px, transparent 2px 30px);
  background-blend-mode: normal, screen, screen;
  filter: drop-shadow(0 0 10px rgba(0, 232, 255, 0.22)) drop-shadow(0 0 34px rgba(0, 232, 255, 0.16));
  opacity: 0.92;
  transform-origin: 50% 0;
  transform: perspective(980px) rotateX(76deg) scaleX(1.32) translateY(-18px);
  animation: horizonGridTop 16s ease-in-out infinite alternate;
}

body::after {
  background:
    linear-gradient(180deg, transparent 0 10%, rgba(195, 68, 255, 0.9) 10% 52%, transparent 52% 100%) 20px 0 / 3px 100% no-repeat,
    linear-gradient(180deg, transparent 0 8%, rgba(86, 166, 255, 0.84) 8% 58%, transparent 58% 100%) 52px 0 / 2px 100% no-repeat;
  filter: blur(2px);
  opacity: 0.78;
  animation: sideGlowPulse 10s ease-in-out infinite alternate;
}

body[data-bg="aurora"]::after {
  background:
    linear-gradient(180deg, transparent 0 14%, rgba(60, 138, 255, 0.7) 14% 56%, transparent 56% 100%) 28px 0 / 2px 100% no-repeat;
  filter: blur(5px);
  opacity: 0.58;
}

body[data-bg="midnight-grid"]::after {
  background:
    linear-gradient(180deg, transparent 0 12%, rgba(92, 126, 255, 0.5) 12% 48%, transparent 48% 100%) 22px 0 / 2px 100% no-repeat;
  filter: blur(2px);
  opacity: 0.42;
}

body[data-bg="soft-cyan"]::after {
  background:
    linear-gradient(180deg, transparent 0 10%, rgba(85, 220, 255, 0.72) 10% 52%, transparent 52% 100%) 18px 0 / 3px 100% no-repeat,
    linear-gradient(180deg, transparent 0 8%, rgba(86, 166, 255, 0.6) 8% 58%, transparent 58% 100%) 52px 0 / 2px 100% no-repeat;
  filter: blur(2px);
  opacity: 0.74;
}

body[data-bg="horizon-grid"]::after {
  inset: auto -8% 0;
  height: 40vh;
  background:
    linear-gradient(0deg, rgba(1, 7, 10, 0) 0%, rgba(1, 7, 10, 0.12) 18%, rgba(1, 7, 10, 0.58) 100%),
    repeating-linear-gradient(90deg, rgba(0, 232, 255, 0.9) 0 2px, transparent 2px 38px),
    repeating-linear-gradient(180deg, rgba(0, 232, 255, 0.88) 0 2px, transparent 2px 30px);
  background-blend-mode: normal, screen, screen;
  filter: drop-shadow(0 0 10px rgba(0, 232, 255, 0.22)) drop-shadow(0 0 34px rgba(0, 232, 255, 0.16));
  opacity: 0.92;
  transform-origin: 50% 100%;
  transform: perspective(980px) rotateX(-76deg) scaleX(1.32) translateY(18px);
  animation: horizonGridBottom 16s ease-in-out infinite alternate;
}

#app,
.scene {
  position: relative;
  z-index: 1;
}

#app,
.scene,
.visual-canvas {
  width: 100vw;
  height: 100vh;
}

.scene {
  position: relative;
}

.visual-canvas {
  display: block;
}

body[data-bg="horizon-grid"] #app,
body[data-bg="horizon-grid"] .scene {
  display: grid;
  place-items: center;
}

body[data-bg="horizon-grid"] .scene > * {
  place-self: stretch;
}

body.page-curl-mode::before,
body.page-curl-mode::after {
  opacity: 0;
}

body.tech-depth-mode::before,
body.tech-depth-mode::after {
  opacity: 0.16;
}

@keyframes frameGlowDrift {
  0% {
    transform: translate3d(0, 0, 0);
    opacity: 0.72;
  }

  100% {
    transform: translate3d(10px, -6px, 0);
    opacity: 0.96;
  }
}

@keyframes sideGlowPulse {
  0% {
    transform: translate3d(0, 0, 0);
    opacity: 0.48;
  }

  100% {
    transform: translate3d(6px, 8px, 0);
    opacity: 0.82;
  }
}

@keyframes horizonGridTop {
  0% {
    transform: perspective(980px) rotateX(76deg) scaleX(1.32) translate3d(0, -18px, 0);
    opacity: 0.84;
  }

  100% {
    transform: perspective(980px) rotateX(78deg) scaleX(1.37) translate3d(0, -10px, 0);
    opacity: 0.98;
  }
}

@keyframes horizonGridBottom {
  0% {
    transform: perspective(980px) rotateX(-76deg) scaleX(1.32) translate3d(0, 18px, 0);
    opacity: 0.84;
  }

  100% {
    transform: perspective(980px) rotateX(-78deg) scaleX(1.37) translate3d(0, 10px, 0);
    opacity: 0.98;
  }
}