/* =====================================================================
   NULLIFY — the buy key, made satisfying.
   Vista Aero gave its buttons a light that tracked the cursor across the
   glass; the Wii gave everything a springy squash and a shine sweep. This
   layers both onto the existing gel without touching its resting look.

   Layer order inside the button (all below the label, thanks to
   isolation:isolate on .btn-primary):
     ::before   static top sheen        (already defined inline)
     ::after    static specular hotspot (already defined inline)
     .shine     cursor-tracked light + the sweep
     .ripple    one per click, from the point of contact
   ===================================================================== */

.btn-primary{
  --mx:50%; --my:50%;
  /* a spring, so the release overshoots a hair and settles */
  transition:transform .18s cubic-bezier(.34,1.56,.64,1),
             box-shadow .26s ease,
             filter .26s ease;
}

/* ---------- the cursor-tracked light ---------- */
.btn-primary .shine{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  border-radius:inherit;overflow:hidden;
  opacity:0;transition:opacity .24s ease;
  /* a focused travelling glint rather than a flat wash — keeps the label
     readable while hovered; the intensity lives in the outer bloom instead */
  background:radial-gradient(110px circle at var(--mx) var(--my),
    rgba(255,255,255,.62) 0%,
    rgba(214,240,255,.24) 30%,
    rgba(255,255,255,0) 64%);
}
.btn-primary:hover .shine,
.btn-primary:focus-visible .shine{opacity:1}

/* ---------- the Wii-ish shine sweep across the glass ---------- */
.btn-primary .shine::before{
  content:"";position:absolute;top:-45%;bottom:-45%;width:34%;left:-50%;
  background:linear-gradient(100deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.72) 44%,
    rgba(255,255,255,.95) 52%,
    rgba(255,255,255,.72) 60%,
    rgba(255,255,255,0) 100%);
  transform:skewX(-18deg);filter:blur(.5px);opacity:0;
}
.btn-primary:hover .shine::before{animation:bh-sweep .78s cubic-bezier(.3,0,.28,1)}
@keyframes bh-sweep{
  0%{left:-50%;opacity:0}
  12%{opacity:1}
  88%{opacity:1}
  100%{left:112%;opacity:0}
}

/* ---------- hover: it lifts and blooms ---------- */
.btn-primary:hover{
  transform:translateY(-2px);
  filter:saturate(1.12) brightness(1.05);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -10px 18px rgba(31,127,201,.34),
    inset 0 0 0 1px rgba(255,255,255,.55),
    0 4px 0 rgba(31,127,201,.5),
    0 18px 34px -10px rgba(4,6,10,.7),
    0 0 22px rgba(86,196,255,.65),
    0 0 48px rgba(56,180,255,.45),
    0 0 96px rgba(56,180,255,.22);
}

/* ---------- press: it squashes into the panel ---------- */
.btn-primary:active,
.btn-primary.is-press{
  transform:translateY(2px) scale(.986);
  filter:saturate(1.18) brightness(.99);
  transition:transform .07s ease-out, box-shadow .07s ease-out, filter .07s ease-out;
  box-shadow:
    inset 0 5px 13px rgba(4,20,40,.52),
    inset 0 -1px 0 rgba(255,255,255,.5),
    inset 0 0 0 1px rgba(255,255,255,.3),
    0 1px 0 rgba(31,127,201,.4),
    0 0 24px rgba(56,180,255,.45);
}
/* the sheen compresses as it's pushed in */
.btn-primary.is-press::before,
.btn-primary:active::before{opacity:.5;transform:scaleY(.82);transform-origin:top}

/* ---------- the ripple that leaves the point of contact ---------- */
.btn-primary .ripple{
  position:absolute;z-index:-1;pointer-events:none;
  width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;
  background:radial-gradient(circle,
    rgba(255,255,255,.92) 0%, rgba(255,255,255,.4) 55%, rgba(255,255,255,0) 72%);
  box-shadow:0 0 0 1px rgba(255,255,255,.45);
  animation:bh-ripple .6s cubic-bezier(.22,.7,.28,1) forwards;
}
@keyframes bh-ripple{
  from{transform:scale(.35);opacity:.95}
  to{transform:scale(17);opacity:0}
}

@media (prefers-reduced-motion:reduce){
  .btn-primary{transition:box-shadow .2s ease}
  .btn-primary:hover{transform:none}
  .btn-primary:active,.btn-primary.is-press{transform:none}
  .btn-primary:hover .shine::before{animation:none}
  .btn-primary .ripple{display:none}
}