* { box-sizing: border-box; margin: 0; padding: 0; }
html,body { height: 100%; }
body {
  font: 0/0 a; /* ensure no accidental text spacing */
  background: radial-gradient(circle at 50% 55%, #fdfbff 0%, #e6e6f9 40%, #c5c7f3 70%, #9ba0dd 100%);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  touch-action: none;
  user-select: none;
}

@media (prefers-color-scheme: dark) {
  body { background: radial-gradient(circle at 50% 55%, #1d2030 0%, #262b42 55%, #1a1e2f 100%); }
}

#bg {
  position: fixed; inset: 0; width: 100%; height: 100%;
  display: block;
}

.scene {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  perspective: 1200px;
}

.megumu {
  width: min(55vmin, 520px);
  height: auto;
  filter: drop-shadow(0 4px 12px rgba(30,40,70,.25)) drop-shadow(0 12px 32px rgba(60,70,120,.25));
  animation: float 5.2s ease-in-out infinite;
  transform-style: preserve-3d;
  will-change: transform;
}

@keyframes float {
  0%,100% { transform: translateY(-1.2%) rotateZ(-1deg); }
  50% { transform: translateY(2.2%) rotateZ(1deg); }
}

.glow {
  position: absolute; width: 60vmin; height: 60vmin;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.85), rgba(255,255,255,0) 60%),
    radial-gradient(circle at 25% 30%, rgba(255,180,255,.6), rgba(255,180,255,0) 60%),
    radial-gradient(circle at 75% 65%, rgba(150,200,255,.5), rgba(150,200,255,0) 60%);
  mix-blend-mode: screen;
  filter: blur(40px) saturate(120%);
  pointer-events: none;
  animation: pulse 7s ease-in-out infinite;
}

@keyframes pulse {
  0%,100% { transform: scale(0.95) translateY(0); opacity: .85; }
  50% { transform: scale(1.07) translateY(-1%); opacity: 1; }
}

.orbs { position: absolute; inset: 0; pointer-events: none; }
.orb {
  position: absolute; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.95), rgba(255,255,255,0) 70%),
              radial-gradient(circle at 70% 70%, rgba(180,200,255,.6), rgba(180,200,255,0) 70%);
  box-shadow: 0 0 0 1px rgba(255,255,255,.4), 0 0 8px 4px rgba(180,200,255,.35), 0 0 20px 6px rgba(120,160,255,.25);
  mix-blend-mode: screen;
  opacity: 0;
  animation: orbFloat linear forwards;
  will-change: transform, opacity;
}
@keyframes orbFloat {
  0% { transform: translate(var(--xStart), var(--yStart)) scale(var(--s)); opacity: 0; }
  10% { opacity: var(--o); }
  90% { opacity: var(--o); }
  100% { transform: translate(var(--xEnd), var(--yEnd)) scale(var(--sEnd)); opacity: 0; }
}

/* subtle grain for softness */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none;
  background-image: repeating-conic-gradient(from 0deg, rgba(0,0,0,.015) 0 2deg, transparent 2deg 4deg);
  mix-blend-mode: soft-light; opacity: .55; filter: contrast(140%);
}

/* interactive tilt */
.scene.tilt .megumu { transition: transform .15s ease-out; }

@media (prefers-reduced-motion: reduce) {
  .megumu, .glow { animation: none !important; }
  .orb { animation-duration: 12s !important; }
}