/* Home page background engine, copied from the main website so the portal looks the same.
   Two soft glows, drifting hexagons and the floating Magoro mark. Decorative only. */
:root {
  --bg-accent: #14D8FF;
  --hex-accent: #14D8FF;
  --gradient-glow: radial-gradient(circle, color-mix(in srgb, var(--bg-accent) 18%, transparent) 0%, transparent 70%);
}
body { background: linear-gradient(180deg, #05070A 0%, #081018 45%, #05070A 100%); background-attachment: fixed; }
.background { position: fixed; inset: 0; overflow: hidden; z-index: -2; pointer-events: none; }
.gradient-glow { position: absolute; width: 700px; height: 700px; border-radius: 50%; filter: blur(120px); opacity: .28; background: var(--gradient-glow); }
.glow-1 { top: -180px; left: -150px; animation: floatGlow 18s ease-in-out infinite; }
.glow-2 { bottom: -220px; right: -180px; animation: floatGlow 24s ease-in-out infinite reverse; }
.hex-field { position: absolute; inset: 0; overflow: hidden; }
.hex {
  position: absolute; width: 46px; height: 52px;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: linear-gradient(160deg, color-mix(in srgb, var(--hex-accent) 16%, transparent), color-mix(in srgb, var(--hex-accent) 5%, transparent));
  border: 1px solid color-mix(in srgb, var(--hex-accent) 18%, transparent);
  opacity: .5; animation: hexDrift 26s ease-in-out infinite;
}
.hex.is-near {
  border-color: color-mix(in srgb, var(--hex-accent) 55%, transparent);
  background: linear-gradient(160deg, color-mix(in srgb, var(--hex-accent) 45%, transparent), color-mix(in srgb, var(--hex-accent) 18%, transparent));
  filter: drop-shadow(0 0 14px color-mix(in srgb, var(--hex-accent) 65%, transparent));
}
.n-mark { position: absolute; height: auto; opacity: .75; filter: drop-shadow(0 0 8px color-mix(in srgb, var(--bg-accent) 55%, transparent)); animation: hexDrift 26s ease-in-out infinite; }
@keyframes floatGlow { 0% { transform: translateY(0); } 50% { transform: translateY(-40px); } 100% { transform: translateY(0); } }
@keyframes hexDrift { 0% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-24px) rotate(8deg); } 100% { transform: translateY(0) rotate(0deg); } }
@media (prefers-reduced-motion: reduce) { .glow-1, .glow-2, .hex, .n-mark { animation: none; } }