@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300;400;500;600;700&display=swap');

:root {
  --bg-1: #0b1023;
  --bg-2: #171d3c;
  --bg-3: #311b4c;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: manipulation;
  background: var(--bg-1);
}

body {
  position: fixed;
  inset: 0;
  font-family: "Josefin Sans", system-ui, sans-serif;
}

button,
input,
select,
textarea { font: inherit; }

.scene {
  touch-action: none;
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 18% 12%, rgba(88, 225, 255, .20), transparent 30%),
    radial-gradient(circle at 82% 28%, rgba(255, 109, 225, .18), transparent 32%),
    radial-gradient(circle at 52% 84%, rgba(124, 99, 255, .18), transparent 35%),
    linear-gradient(160deg, var(--bg-1) 0%, var(--bg-2) 52%, var(--bg-3) 100%);
}

/* Névoa luminosa no fundo */
.scene::before,
.scene::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .36;
  pointer-events: none;
  z-index: -2;
  animation: drift 12s ease-in-out infinite alternate;
}

.scene::before {
  width: 55vmax;
  height: 55vmax;
  left: -26vmax;
  top: 30%;
  background: rgba(63, 219, 255, .35);
}

.scene::after {
  width: 48vmax;
  height: 48vmax;
  right: -22vmax;
  top: 5%;
  background: rgba(255, 87, 206, .28);
  animation-delay: -4s;
}

@keyframes drift {
  to {
    transform: translate3d(8vw, -5vh, 0) scale(1.08);
  }
}

.glow {
  position: absolute;
  inset: auto 50% -22vh;
  width: 100vw;
  height: 45vh;
  transform: translateX(-50%);
  background: radial-gradient(
    ellipse at center,
    rgba(130, 224, 255, .20) 0%,
    rgba(133, 122, 255, .12) 35%,
    transparent 72%
  );
  filter: blur(10px);
  pointer-events: none;
}

/* Brilhinhos discretos no cenário */
.spark {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: rgba(255,255,255,.8);
  box-shadow: 0 0 8px rgba(255,255,255,.7);
  animation: twinkle 3s ease-in-out infinite;
  pointer-events: none;
}

@keyframes twinkle {
  0%, 100% { opacity: .12; transform: scale(.7); }
  50% { opacity: .75; transform: scale(1.45); }
}

/* Mobile: garante que nada gere scroll */
@media (max-width: 768px) {
  html,
  body,
  .scene {
    width: 100%;
    max-width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    overflow: hidden !important;
  }

  body {
    position: fixed;
    inset: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .scene::before,
  .scene::after,
  .spark {
    animation: none;
  }
}

.scene--paused .bubble, .scene--paused .spark, .scene--paused::before, .scene--paused::after { animation-play-state: paused; }
.scene:focus { outline: none; }