.page-bg-fx,
.branch-bg-fx,
.page-particles,
.branch-particles {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.page-particles,
.branch-particles {
  opacity: 1;
}

.page-bg-fx__dot,
.branch-bg-fx__dot {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: #bae6fd;
  box-shadow: 0 0 10px #38bdf8, 0 0 22px rgba(56, 189, 248, 0.75);
  opacity: 0;
  animation: pageDotDrift var(--dur) linear infinite;
  animation-delay: var(--delay);
}

.page-bg-fx__trace,
.branch-bg-fx__trace {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--len);
  height: 2px;
  transform-origin: left center;
  transform: rotate(var(--rot));
  background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.15), rgba(125, 211, 252, 0.85), transparent);
  opacity: 0;
  animation: pageTracePulse var(--dur) ease-in-out infinite;
  animation-delay: var(--delay);
}

.page-bg-fx__chip,
.branch-bg-fx__chip {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--size);
  height: var(--size);
  border: 1px solid rgba(96, 165, 250, 0.55);
  background: rgba(37, 99, 235, 0.18);
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.35);
  opacity: 0;
  animation: pageChipFloat var(--dur) linear infinite;
  animation-delay: var(--delay);
}

@keyframes pageDotDrift {
  0% { transform: translate(0, 0) scale(0.6); opacity: 0; }
  8% { opacity: var(--op); }
  92% { opacity: var(--op); }
  100% { transform: translate(var(--dx), var(--dy)) scale(1.15); opacity: 0; }
}

@keyframes pageTracePulse {
  0%, 100% { opacity: 0; transform: rotate(var(--rot)) scaleX(0.35); }
  20%, 80% { opacity: var(--op); transform: rotate(var(--rot)) scaleX(1); }
}

@keyframes pageChipFloat {
  0% { transform: translate(0, 0) rotate(0deg); opacity: 0; }
  10% { opacity: var(--op); }
  90% { opacity: var(--op); }
  100% { transform: translate(var(--dx), var(--dy)) rotate(180deg); opacity: 0; }
}

.has-page-particles::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(56, 189, 248, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56, 189, 248, 0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(circle at center, #000 35%, transparent 90%);
  pointer-events: none;
  z-index: 0;
}