/* ============================================================
   BACKGROUND — persistent fullscreen stage
   Fixed behind all content. JS owns all state changes.
============================================================ */

#background {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Background color layer — transitions smoothly between states */
#bg-color {
  position: absolute;
  inset: 0;
  background-color: #000000;
  transition: background-color 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ——— ORBS ——— */

.orb {
  position: absolute;

  /* Center-origin positioning: left/top refer to the orb's center */
  transform: translate(-50%, -50%);

  border-radius: 50%;

  /* Soft atmospheric blur */
  filter: blur(60px);

  /* All geometry + appearance properties transition */
  transition:
    left          1.3s cubic-bezier(0.16, 1, 0.3, 1),
    top           1.3s cubic-bezier(0.16, 1, 0.3, 1),
    width         1.3s cubic-bezier(0.16, 1, 0.3, 1),
    height        1.3s cubic-bezier(0.16, 1, 0.3, 1),
    opacity       1.1s cubic-bezier(0.16, 1, 0.3, 1),
    background-color 1.1s cubic-bezier(0.16, 1, 0.3, 1);

  /* Initial state: off-screen below, invisible */
  left:   50%;
  top:    120%;
  width:  0;
  height: 0;
  opacity: 0;
}