/* Shared pressure-release decoration. JavaScript owns only this fixed layer;
   the native button, its label and its form action keep their existing styles. */
.kv-button-energy-layer {
  --kv-energy-accent: #c4e52d;
  --kv-energy-ink: #192f73;
  --kv-energy-radius: 9px;
  --kv-energy-strength: 1;
  position: fixed;
  left: 0;
  top: 0;
  display: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
  pointer-events: none !important;
  user-select: none;
  z-index: 2147483000;
}
.kv-button-energy-layer.is-active { display: block; }
.kv-button-energy-layer,
.kv-button-energy-layer * { box-sizing: border-box; pointer-events: none !important; }
.kv-button-energy-layer > span { position: absolute; display: block; }
.kv-energy-charge {
  inset: auto 12px 5px;
  height: 2px;
  border-radius: 2px;
  background: var(--kv-energy-ink);
  opacity: 0;
  transform: scaleX(.035);
  transform-origin: center;
  z-index: 3;
}
.kv-energy-pressure {
  inset: 0;
  border-radius: var(--kv-energy-radius);
  opacity: var(--kv-energy-strength);
  z-index: 1;
}
.kv-energy-bubbles {
  inset: -45px -43px -37px;
  background:
    radial-gradient(circle at 12% 51%, transparent 0 2px, var(--kv-energy-accent) 2px 3px, transparent 3.5px),
    radial-gradient(circle at 23% 17%, var(--kv-energy-accent) 0 1.8px, transparent 2.5px),
    radial-gradient(circle at 40% 8%, transparent 0 2.5px, var(--kv-energy-accent) 2.5px 3.5px, transparent 4px),
    radial-gradient(circle at 68% 15%, var(--kv-energy-accent) 0 2px, transparent 2.5px),
    radial-gradient(circle at 84% 34%, transparent 0 2px, var(--kv-energy-accent) 2px 3px, transparent 3.5px),
    radial-gradient(circle at 95% 64%, var(--kv-energy-accent) 0 1.5px, transparent 2px),
    radial-gradient(circle at 73% 86%, var(--kv-energy-ink) 0 1.3px, transparent 2px),
    radial-gradient(circle at 20% 86%, var(--kv-energy-accent) 0 1.5px, transparent 2px);
  background-repeat: no-repeat;
  opacity: 0;
  transform: translateY(12px) scale(.48);
  transform-origin: 50% 65%;
  z-index: 2;
}
.kv-button-energy-layer.is-active .kv-energy-charge {
  animation: kv-button-charge .3s ease-out both;
}
.kv-button-energy-layer.is-active .kv-energy-pressure {
  animation: kv-button-pressure .48s .22s cubic-bezier(.16, .9, .25, 1) both;
}
.kv-button-energy-layer.is-active .kv-energy-bubbles {
  animation: kv-button-carbonation 1.9s .16s ease-out infinite both;
}

/* Disable only the superseded decoration after the delegated enhancer is ready.
   The input case deliberately uses a sibling body layer, never input pseudos. */
html.kv-button-energy-ready .kv .btn::before,
html.kv-button-energy-ready .kv .btn::after {
  display: none !important;
  animation: none !important;
}
html.kv-button-energy-ready .kv .kv-commerce-content .kv-energy-action {
  background-image: none !important;
  background-size: 0 0 !important;
}
html.kv-button-energy-ready .kv .kv-energy-hover-active {
  animation: none !important;
}

@keyframes kv-button-charge {
  0% { opacity: calc(.35 * var(--kv-energy-strength)); transform: scaleX(.035); }
  70% { opacity: calc(.8 * var(--kv-energy-strength)); transform: scaleX(1); }
  100% { opacity: calc(.4 * var(--kv-energy-strength)); transform: scaleX(1); }
}
@keyframes kv-button-pressure {
  0% { box-shadow: 0 0 0 0 transparent; }
  45% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--kv-energy-accent) 40%, transparent); }
  75% { box-shadow: 0 0 0 10px transparent; }
  100% { box-shadow: 0 0 0 1px color-mix(in srgb, var(--kv-energy-accent) 25%, transparent); }
}
@keyframes kv-button-carbonation {
  0%, 10% { opacity: 0; transform: translateY(12px) scale(.48); }
  20% { opacity: calc(.9 * var(--kv-energy-strength)); transform: translateY(1px) scale(.82); }
  40% { opacity: calc(.6 * var(--kv-energy-strength)); transform: translateY(-12px) scale(1.05); }
  55%, 100% { opacity: 0; transform: translateY(-24px) scale(1.14); }
}
@media (prefers-reduced-motion: reduce), (hover: none), (pointer: coarse) {
  .kv-button-energy-layer { display: none !important; }
  .kv-button-energy-layer > span { animation: none !important; }
}