* { box-sizing: border-box; }

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

body {
  overflow: hidden;
  background: #07060b;
  color: #f4e6d4;
}

body::before {
  content: "";
  position: fixed;
  inset: -12%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 46%, rgba(255, 98, 0, 0.34), transparent 34%),
    radial-gradient(circle at 16% 82%, rgba(124, 58, 237, 0.28), transparent 30%),
    radial-gradient(circle at 84% 16%, rgba(57, 255, 20, 0.12), transparent 26%);
  animation: aura 9s ease-in-out infinite alternate;
}

main {
  position: relative;
  z-index: 1;
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}

img {
  display: block;
  width: auto;
  height: auto;
  max-width: min(920px, 100%);
  max-height: calc(100vh - 2.5rem);
  object-fit: contain;
  border-radius: 1.1rem;
  box-shadow:
    0 0 36px rgba(255, 106, 0, 0.32),
    0 0 110px rgba(124, 58, 237, 0.2),
    0 28px 70px rgba(0, 0, 0, 0.6);
  animation: float 7.5s ease-in-out infinite;
}

#swarm,
#eerie {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

#swarm { z-index: 2; }

#eerie {
  z-index: 4;
  opacity: 0;
}

body.shaded #eerie { opacity: 1; }

body.shaded #swarm { visibility: hidden; }

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 28%, rgba(5, 2, 10, 0.78) 100%);
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

@keyframes aura {
  from { opacity: 0.55; transform: scale(1); }
  to { opacity: 1; transform: scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
  body::before,
  img {
    animation: none;
  }
}