/* Shared click-burst particles for buttons and popup controls. */
body > #lux-button-burst-layer {
  position: fixed;
  inset: 0;
  overflow: visible;
  pointer-events: none;
  z-index: var(--lux-z-effect, 3050);
}

body > #lux-button-burst-layer > .lux-chip-burst-particle {
  position: fixed;
  width: var(--burst-size, 5px);
  height: var(--burst-size, 5px);
  border-radius: 50%;
  background: var(--lux-accent, #c8822a);
  background: color-mix(in srgb, var(--lux-accent, #c8822a) 85%, #fff 15%);
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transform: translate(-50%, -50%);
  animation: lux-chip-particle-out 0.72s var(--lux-studio-chip-ease-out, cubic-bezier(0.4, 0, 0.2, 1)) var(--burst-delay, 0ms) forwards;
}

body > #lux-button-burst-layer > .lux-chip-burst-particle--sm { --burst-size: 3px; }
body > #lux-button-burst-layer > .lux-chip-burst-particle--md { --burst-size: 5px; }
body > #lux-button-burst-layer > .lux-chip-burst-particle--lg { --burst-size: 7px; }

body > #lux-button-burst-layer > .lux-chip-burst-particle--spark {
  border-radius: 2px;
  background: var(--lux-accent, #c8822a);
  background: color-mix(in srgb, var(--lux-accent, #c8822a) 70%, #fff 30%);
  box-shadow: 0 0 6px color-mix(in srgb, var(--lux-accent, #c8822a) 55%, transparent);
  animation-name: lux-chip-particle-spark;
}

body > #lux-button-burst-layer > .lux-chip-burst-particle--streak {
  width: 2px;
  height: 10px;
  border-radius: 999px;
  background: var(--lux-accent, #c8822a);
  background: color-mix(in srgb, var(--lux-accent, #c8822a) 75%, #fff 25%);
  box-shadow: 0 0 5px color-mix(in srgb, var(--lux-accent, #c8822a) 45%, transparent);
  animation-name: lux-chip-particle-streak;
}

@keyframes lux-chip-particle-out {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.45);
  }
  16% {
    opacity: 0.95;
    transform: translate(
        calc(-50% + var(--burst-tx, 0px) * 0.18),
        calc(-50% + var(--burst-ty, 0px) * 0.18)
      )
      scale(1.05);
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--burst-tx, 0px)), calc(-50% + var(--burst-ty, 0px))) scale(0.4);
  }
}

@keyframes lux-chip-particle-spark {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(45deg) scale(0.35);
  }
  16% {
    opacity: 1;
    transform: translate(
        calc(-50% + var(--burst-tx, 0px) * 0.2),
        calc(-50% + var(--burst-ty, 0px) * 0.2)
      )
      rotate(45deg) scale(1.1);
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--burst-tx, 0px)), calc(-50% + var(--burst-ty, 0px)))
      rotate(45deg) scale(0.35);
  }
}

@keyframes lux-chip-particle-streak {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(var(--burst-rot, 0deg)) scaleY(0.4);
  }
  18% {
    opacity: 0.95;
    transform: translate(
        calc(-50% + var(--burst-tx, 0px) * 0.2),
        calc(-50% + var(--burst-ty, 0px) * 0.2)
      )
      rotate(var(--burst-rot, 0deg)) scaleY(1.15);
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--burst-tx, 0px)), calc(-50% + var(--burst-ty, 0px)))
      rotate(var(--burst-rot, 0deg)) scaleY(0.5);
  }
}

@media (prefers-reduced-motion: reduce) {
  body > #lux-button-burst-layer > .lux-chip-burst-particle {
    animation: none !important;
  }
}