/* =========================================================
   CENTER LIGHT / BEAM COMPONENT
   The white flare points are anchored to the exact edge of
   the circle itself, so they never float away from it.
   ========================================================= */

.energy-beam{
  position:absolute;
  z-index:2;
  left:calc((100vw - 100%)/-2);
  right:calc((100vw - 100%)/-2);
  top:50%;
  height:2px;
  transform:translateY(-50%);
  background:
    linear-gradient(
      90deg,
      transparent 0%,
      #4d00ff 13%,
      #a600ff 27%,
      #e000ff 34%,
      #ffffff 44%,
      #ffffff 51%,
      #80c5ff 64%,
      #006eff 77%,
      transparent 100%
    );
  background-size:210% 100%;
  box-shadow:0 0 12px 2px rgba(84,0,255,.75);
  animation:beamColorFlow 4.4s linear infinite,
            beamGlow 2.8s ease-in-out infinite alternate;
}

.energy-beam:before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:-22px;
  height:44px;
  background:inherit;
  filter:blur(17px);
  opacity:.34;
}

.traveling-light{
  position:absolute;
  top:-1px;
  left:-18%;
  width:26%;
  height:4px;
  background:linear-gradient(
    90deg,
    transparent,
    #9e00ff,
    #ffffff,
    #3c9cff,
    transparent
  );
  filter:blur(1px);
  animation:travel 3.4s linear infinite;
}

/* Bright points are children of .launch-circle.
   Their center is placed exactly on the circle boundary. */
.side-flare{
  position:absolute;
  z-index:12;
  top:50%;
  width:1px;
  height:1px;
  transform:translateY(-50%);
  pointer-events:none;
}

.side-flare-left{left:0}
.side-flare-right{right:0}

.side-flare:before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:7px;
  height:7px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:#ffffff;
  box-shadow:
    0 0 5px 1px #ffffff,
    0 0 13px 3px rgba(214,120,255,.98),
    0 0 28px 5px rgba(139,0,255,.72);
  animation:pointPulse 2.8s ease-in-out infinite;
}

.side-flare-right:before{
  box-shadow:
    0 0 5px 1px #ffffff,
    0 0 13px 3px rgba(130,190,255,.98),
    0 0 28px 5px rgba(0,94,255,.72);
}

.side-flare:after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:42px;
  height:2px;
  transform:translate(-50%,-50%);
  background:
    linear-gradient(90deg,
      transparent,
      rgba(255,255,255,.9),
      transparent);
  filter:blur(1.2px);
  opacity:.95;
}

/* Small vertical ray makes the flare read as a light source,
   not as a floating white ball. */
.side-flare-left::marker,
.side-flare-right::marker{display:none}

@keyframes beamColorFlow{
  to{background-position:210% 0}
}

@keyframes beamGlow{
  to{
    opacity:.84;
    box-shadow:0 0 22px 4px rgba(73,0,255,.84)
  }
}

@keyframes travel{
  0%{left:-20%;opacity:0}
  15%{opacity:1}
  55%{opacity:1}
  100%{left:100%;opacity:0}
}

@keyframes pointPulse{
  50%{
    transform:translate(-50%,-50%) scale(1.22);
    opacity:.94;
  }
}