/* The button sends a signal: perimeter → arrow → launch. */
@property --impulse-orbit {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

/* Establish a layer anchor only when the component has no positioning rule. */
:where(.button-impulse) { position: relative; }
/* Cancel the generic hover lift; component transforms (e.g. centered gift CTA) win. */
.button:where(.button-impulse):hover { transform: none; }

.button-impulse {
  --impulse-x: 50%;
  --impulse-y: 50%;
  isolation: isolate;
  overflow: hidden;
  transition: background .25s, box-shadow .25s, border-color .25s, color .25s;
}
.button.button-impulse:not(.button-quiet) { background: var(--red, #f01f01); }
.button.button-impulse.button-quiet { background: transparent; }
.button-impulse > .button-impulse__surface,
.button-impulse > .button-impulse__trace,
.button-impulse > .button-impulse__wave {
  position: absolute;
  pointer-events: none;
  user-select: none;
  border-radius: inherit;
}
.button-impulse__surface {
  inset: 0;
  z-index: 0;
  opacity: 0;
  background: radial-gradient(ellipse at var(--impulse-x) var(--impulse-y), #ff986d1f 0%, #ff582f0f 35%, transparent 75%);
  transition: opacity .3s;
}
.button-impulse__trace {
  inset: 1px;
  z-index: 1;
  padding: 1.5px;
  opacity: 0;
  background: conic-gradient(from var(--impulse-orbit), transparent 0deg 245deg, #ffa17766 285deg, #fff2db 330deg, transparent 333deg 360deg);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
}
.button-impulse__wave {
  left: var(--impulse-x);
  top: var(--impulse-y);
  z-index: 0;
  width: var(--impulse-size, 600px);
  height: var(--impulse-size, 600px);
  border-radius: 50% !important;
  opacity: 0;
  background: radial-gradient(circle, #ffbf8d12 0%, #ffbf8d0a 45%, #ffd0ad55 49%, #ffb59033 51%, transparent 54%);
  transform: translate(-50%, -50%) scale(0);
}
.button-impulse:focus-visible {
  outline: 2px solid #fff1de;
  outline-offset: 5px;
  box-shadow: 0 0 0 8px #f01f0126;
}
.button-impulse > svg {
  flex-shrink: 0;
  transform: none;
}
@media (hover: hover) and (pointer: fine) {
  .button-impulse.is-impulse-hover {
    box-shadow: 0 8px 30px #f01f012e, inset 0 0 0 1px #ffb49155;
  }
  .button.button-impulse:not(.button-quiet).is-impulse-hover { background: var(--red, #f01f01); }
  .button.button-impulse.button-quiet.is-impulse-hover { background: #ffffff09; }
  .button-impulse.is-impulse-hover > .button-impulse__surface { opacity: 1; }
  .button-impulse.is-impulse-hover > .button-impulse__trace {
    animation: impulse-orbit 1s cubic-bezier(.3,.1,.15,1) both;
  }
  .button-impulse.is-impulse-hover > svg {
    transform: translateX(4px);
  }
}
.button-impulse.is-impulse-pressed {
  box-shadow: inset 0 0 0 2px #ffd0b899, inset 0 0 22px #ffb49122;
  transition-duration: .1s;
}
.button-impulse.is-impulse-launch > .button-impulse__wave { animation: impulse-wave .56s cubic-bezier(.25,.15,.45,1) both; }
.button-impulse.is-impulse-launch > svg { animation: impulse-arrow .56s cubic-bezier(.3,0,.15,1) both; }
.button-impulse.is-impulse-launch > .button-impulse__trace { animation: impulse-orbit .56s ease-out both; }
@keyframes impulse-orbit {
  0% { --impulse-orbit: -90deg; opacity: 0; }
  10% { opacity: 1; }
  75% { opacity: 1; }
  100% { --impulse-orbit: 270deg; opacity: 0; }
}
@keyframes impulse-wave {
  0% { transform: translate(-50%, -50%) scale(0); opacity: .9; }
  70% { opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}
@keyframes impulse-arrow {
  0% { transform: translateX(0); opacity: 1; }
  32% { transform: translateX(36px) scaleX(1.35); opacity: 0; }
  33% { transform: translateX(-18px); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}
/* Same controls as the homepage's other motion; native focus/activation remain intact. */
html[data-motion="off"] .button-impulse { transition: box-shadow .15s; }
html[data-motion="off"] .button-impulse > svg { transform: none; animation: none; transition: none; }
html[data-motion="off"] .button-impulse__surface,
html[data-motion="off"] .button-impulse__trace,
html[data-motion="off"] .button-impulse__wave { display: none; animation: none; }
@media (prefers-reduced-motion: reduce) {
  .button-impulse { transition: box-shadow .15s; }
  .button-impulse > svg { transform: none; animation: none; transition: none; }
  .button-impulse__surface, .button-impulse__trace, .button-impulse__wave { display: none; animation: none; }
}