/* ============================================================================
   Button ripple - shared, site-wide.

   Two separate effects, deliberately kept apart:

   1. The CLICK ripple. A circle that grows from the point the pointer went
      down. This is the one that belongs on every button: it is feedback, it
      only ever runs while someone is pressing something, and it costs nothing
      when the page is idle. mew-ripple.js injects the span and sets the
      origin; everything below is the paint.

   2. The ATTENTION pulse (.mew-pulse). An expanding ring that runs on a loop
      to draw the eye. This one is opt-in and stays on the few primary CTAs -
      a page where every button pulses forever has no emphasis left to give.

   Both are drawn on their own layer rather than by animating box-shadow,
   because several of these buttons carry a resting shadow that a box-shadow
   animation would wipe out, and some already run their own `animation`, which
   a second one on the element would replace.
   ========================================================================== */

/* ---------- 1. click ripple ---------- */

/* The host must NOT clip: a pulsing CTA draws its halo outside its own box, and
   an overflow:hidden here would cut the halo off the moment the button was
   first pressed. The circle is clipped by its own layer instead, which carries
   the overflow and inherits the button's corner radius. */
.mew-rippled { position: relative; }

.mew-ripple-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
}

.mew-ripple-ink {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  transform: scale(0);
  opacity: .42;
  background: var(--mew-ink, rgba(255, 255, 255, .85));
  /* cubic-bezier(.2,.7,.35,1) decelerates hard at the end, so the circle races
     out and then settles - a linear growth reads as a loading spinner */
  animation: mew-ripple-ink 620ms cubic-bezier(.2, .7, .35, 1) forwards;
}
@keyframes mew-ripple-ink {
  to { transform: scale(1); opacity: 0; }
}

/* A pale button needs dark ink; the script cannot know the background, so the
   colour is declared here per button family and inherited by the ink. */
.mew-ink-dark,
.pc-count-btn,
.deadline-btn,
.prevBtn,
.hhw-dd-btn,
.hhw-dd-opt,
.walletPlanSelector,
.singlebonus,
.tab-btn,
.faq-q { --mew-ink: rgba(5, 173, 163, .30); }

/* ---------- 2. attention pulse (opt-in) ----------
   Two rings rather than one, the second offset by half the cycle, so the wave
   is continuous instead of a single pop with a second and a half of nothing
   after it. ::before and ::after are both free on these buttons. */

.mew-pulse { position: relative; }

/* Two rings drawn purely by an animated box-shadow spread: 0 -> 15px, solid ->
   transparent. Nothing else is declared on either pseudo-element.

   Both run the same keyframes at the same duration; the second carries a
   NEGATIVE delay, so it starts life 0.61s into the loop and trails the first -
   the same third of a cycle behind whatever the duration is set to.
   One keyframe set, two offset copies - the cheapest possible stagger.

   No fill and no static shadow. A filled pseudo-element here would paint over
   the button's label (it is positioned, so it stacks above a bare text node),
   and it is the fill - not the ring - that has to be overridden away later.
   box-shadow spread draws entirely outside the element box, so there is
   nothing to cover and no z-index to manage. Spread also widens the corner
   radius in step with the button's own, so `border-radius: inherit` stays
   concentric with no measuring.

   The reference draws these on a dedicated empty <span class="rippleAnim">.
   That span exists only to give a filled ring somewhere to sit without
   covering the label; with the fill gone there is nothing for it to solve, so
   the rings go straight on the button. */
.mew-pulse::before,
.mew-pulse::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

.mew-pulse::before {
  animation: mew-pulse-ripple 1.9s cubic-bezier(.215, .61, .355, 1) infinite;
}

.mew-pulse::after {
  animation: mew-pulse-ripple 1.9s cubic-bezier(.455, .03, .515, .955) -.61s infinite;
}

@keyframes mew-pulse-ripple {
  0%   { box-shadow: 0 0 0 0 var(--mew-ring, rgba(5, 173, 163, .55)); }
  100% { box-shadow: 0 0 0 15px transparent; }
}
/* decoration only - it stands down the moment the button is actually in use,
   so the pulse never competes with the hover or focus treatment */
.mew-pulse:hover::before,
.mew-pulse:hover::after,
.mew-pulse:focus-visible::before,
.mew-pulse:focus-visible::after,
.mew-pulse:active::before,
.mew-pulse:active::after { animation: none; box-shadow: none; }

/* ---------- reduced motion ----------
   The pulse is pure decoration and goes entirely. The click ripple is
   feedback, so it stays but collapses to a brief flat tint with no travel. */
@media (prefers-reduced-motion: reduce) {
  .mew-pulse::before,
  .mew-pulse::after { animation: none; box-shadow: none; }

  .mew-ripple-ink {
    animation: mew-ripple-flat 220ms linear forwards;
    transform: scale(1);
  }
  @keyframes mew-ripple-flat {
    from { opacity: .3; }
    to   { opacity: 0; }
  }
}