/* Particle keyframes */
.particle {
  position: absolute;
  border-radius: 50%;
  background-color: rgba(255,215,0,0.6);
  pointer-events: none;
  z-index: -1;
  animation: float 0.6s linear forwards;
}

@keyframes float {
  from {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  to {
    transform: translateY(-20px) scale(0.3);
    opacity: 0;
  }
}

/*Separator home page energy flow*/
/* Separator base + full-line glow */
.particle-target {
  position: relative !important;
  display: block !important;       /* ensure transform works */
  width: 50% !important;           /* your original length */
  transform-origin: right center !important;
  transform: scaleX(2) !important; /* 2× longer, extends to the left */
  overflow: visible !important;
  border-top: 1px solid rgba(255,215,0,0.8) !important;
  box-shadow:
    0 0 4px rgba(255,215,0,0.7),
    0 0 8px rgba(255,215,0,0.5);
}

/* invisible hover-expander */
.particle-target::before {
  content: '';
  position: absolute;
  top: -45px;    /* 10px above */
  bottom: -45px; /* 10px below */
  left: 0;
  right: 0;
  background: transparent;
  pointer-events: auto;  /* lets this area count for hover */
}
.particle-target::after {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  width: 20%;
  height: 1px;
 background: linear-gradient(
    to left,
    transparent            0%,   /* fully transparent at trailing edge */
    rgba(255,215,0,0.8)    20%,  /* match your border’s 0.8 opacity */
    rgba(255,235,150,1)    100%,  /* peak brightness */
    rgba(255,215,0,0.8)    90%,  /* back to border opacity */
    transparent            100%  /* fade out at leading edge */
  );
  border-radius: 2px;
  filter: blur( 1px);
  box-shadow:
    0 0 4px rgba(255,235,150,0.9),
    0 0 8px rgba(255,235,150,0.6);
  animation: flowEnergy 5.0s ease-in-out infinite;
  z-index: 1;
}
/*THIS IS TO DEBUG THE FLOWIGN ENERGY*/
/*
.particle-target::after {
  box-shadow: none !important;
  height: 100px !important;     
  border-radius: 100px !important;
  filter: blur(5px) !important; 
  box-shadow:
    0 0 6px rgba(255,235,150,0.9) !important,
    0 0 12px rgba(255,235,150,0.6) !important;
}
*/
/* Separator particles: un-stretch and animate upward */
.particle-target .particle {
  animation: float-sep 0.6s linear forwards !important;
}

@keyframes float-sep {
  from {
    transform: scaleX(0.5) translateY(0) scale(1);
    opacity: 1;
  }
  to {
    transform: scaleX(0.5) translateY(-20px) scale(0.3);
    opacity: 0;
  }
}

/* Keyframes for the right→left flow sweep */
@keyframes flowEnergy {
  from { transform: translateX(400%); }
  to   { transform: translateX(-100%); }
}