/* Reflecta — glow field.
   Soft gradient shapes in slow orbit, colored from the early deck: warm rust
   and amber suns, deep red, gold, a faint cool counterpoint. Heavily blurred
   and subdued, so it reads as a quiet solar system, not graphics.
   Each shape rides its own ring at its own speed. Motion is orbital, never linear.
   Mount with glow-field.js: ReflectaGlowField.mount(el). */

.glow-field {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

/* A ring: a zero-size point at the center that rotates forever.
   Its blob sits out at a radius, so rotating the ring sweeps the blob in orbit. */
.orbit {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  will-change: transform;
}

.glow-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(64px);
  mix-blend-mode: screen;
  will-change: transform, opacity;
  animation: breathe 16s ease-in-out infinite;
}

/* Central glow: the system's quiet center, barely moving. */
.glow-core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 30vmax;
  height: 30vmax;
  margin: -15vmax 0 0 -15vmax;
  border-radius: 50%;
  filter: blur(60px);
  mix-blend-mode: screen;
  background: radial-gradient(circle at 50% 50%, rgba(192, 83, 43, 0.28), transparent 64%);
  animation: breathe 20s ease-in-out infinite;
}

/* Orbits: each a different ring, speed, and direction. Linear timing = the
   constant glide of an orbit (no easing, so it never stutters at the loop). */
.orbit.o1 { animation: spin 86s linear infinite; }
.orbit.o2 { animation: spin 124s linear infinite reverse; }
.orbit.o3 { animation: spin 168s linear infinite; }
.orbit.o4 { animation: spin 104s linear infinite reverse; }
.orbit.o5 { animation: spin 152s linear infinite; }

.orbit.o1 .glow-blob {
  width: 44vmax; height: 44vmax; left: 16vmax; margin: -22vmax 0 0 -22vmax;
  background: radial-gradient(circle at 50% 50%, rgba(255, 159, 10, 0.34), transparent 66%);
}
.orbit.o2 .glow-blob {
  width: 52vmax; height: 52vmax; left: 24vmax; margin: -26vmax 0 0 -26vmax;
  background: radial-gradient(circle at 50% 50%, rgba(142, 43, 34, 0.42), transparent 68%);
  animation-delay: -4s;
}
.orbit.o3 .glow-blob {
  width: 38vmax; height: 38vmax; left: 32vmax; margin: -19vmax 0 0 -19vmax;
  background: radial-gradient(circle at 50% 50%, rgba(245, 197, 66, 0.22), transparent 64%);
  animation-delay: -8s;
}
.orbit.o4 .glow-blob {
  width: 34vmax; height: 34vmax; left: 38vmax; margin: -17vmax 0 0 -17vmax;
  background: radial-gradient(circle at 50% 50%, rgba(255, 107, 138, 0.2), transparent 64%);
  animation-delay: -2s;
}
/* Cool counterpoint, very faint, keeps it from going monochrome-warm. */
.orbit.o5 .glow-blob {
  width: 40vmax; height: 40vmax; left: 28vmax; margin: -20vmax 0 0 -20vmax;
  background: radial-gradient(circle at 50% 50%, rgba(92, 230, 214, 0.12), transparent 66%);
  animation-delay: -11s;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes breathe {
  0%, 100% { opacity: 0.62; transform: scale(1); }
  50% { opacity: 0.95; transform: scale(1.06); }
}

@media (prefers-reduced-motion: reduce) {
  .orbit, .glow-blob, .glow-core { animation: none !important; }
  .glow-blob { opacity: 0.6; }
}