/* Public-page press feedback. Kept out of site.css so parallel page edits can merge.
   Motion is opacity and transform only. Reduced motion keeps a static ring. */

a.button,
button.button,
.nav a,
footer.foot nav a,
a.blog-card,
.walk-tabs button,
.xp button,
a.brand {
  -webkit-tap-highlight-color: transparent;
}

.nav a,
footer.foot nav a,
a.brand {
  min-height: 48px;
  min-width: 48px;
}

a.button:not(.button-quiet),
button.button:not(.button-quiet) {
  position: relative;
  isolation: isolate;
  --press-x: 50%;
  --press-y: 50%;
}

a.button:not(.button-quiet)::before,
button.button:not(.button-quiet)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(circle at var(--press-x) var(--press-y), rgba(255, 255, 255, 0.96) 0%, rgba(170, 244, 255, 0.62) 24%, rgba(196, 181, 253, 0.28) 50%, rgba(255, 255, 255, 0) 70%);
  opacity: 0;
  transform: scale(0.2);
  transform-origin: var(--press-x) var(--press-y);
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  a.button,
  button.button,
  .nav a,
  footer.foot nav a,
  a.blog-card,
  .walk-tabs button,
  .xp button,
  a.brand {
    transition: transform 120ms ease-out, scale 120ms ease-out;
  }

  a.button:is(:active, .is-pressed):not(:disabled),
  button.button:is(:active, .is-pressed):not(:disabled),
  .nav a:is(:active, .is-pressed),
  footer.foot nav a:is(:active, .is-pressed),
  a.blog-card:is(:active, .is-pressed),
  .walk-tabs button:is(:active, .is-pressed),
  .xp button:is(:active, .is-pressed),
  a.brand:is(:active, .is-pressed) {
    transform: none;
    scale: 0.97;
  }

  .button-quiet:is(:active, .is-pressed),
  .nav a:is(:active, .is-pressed),
  footer.foot nav a:is(:active, .is-pressed),
  a.blog-card:is(:active, .is-pressed),
  .walk-tabs button:is(:active, .is-pressed),
  .xp button:is(:active, .is-pressed):not(.is-on),
  a.brand:is(:active, .is-pressed) {
    box-shadow: inset 0 0 0 2px #7ae7ff;
  }

  .walk-tabs button[aria-selected="true"]:is(:active, .is-pressed),
  .xp button.is-on:is(:active, .is-pressed) {
    box-shadow: inset 0 0 0 2px #07131c;
  }

  a.button:not(.button-quiet):is(:active, .is-rippling)::before,
  button.button:not(.button-quiet):is(:active, .is-rippling)::before {
    animation: press-ripple 440ms ease-out;
  }
}

@keyframes press-ripple {
  0% {
    opacity: 0.92;
    transform: scale(0.18);
  }

  42% {
    opacity: 0.88;
    transform: scale(1);
  }

  100% {
    opacity: 0;
    transform: scale(1);
  }
}

a.button:focus-visible,
button.button:focus-visible,
.nav a:focus-visible,
footer.foot nav a:focus-visible,
a.blog-card:focus-visible,
.walk-tabs button:focus-visible,
.xp button:focus-visible,
a.brand:focus-visible {
  outline: 3px solid #f4f7fb;
  outline-offset: 3px;
  box-shadow: 0 0 0 2px #07131c;
}

@media (prefers-reduced-motion: reduce) {
  a.button,
  button.button,
  .nav a,
  footer.foot nav a,
  a.blog-card,
  .walk-tabs button,
  .xp button,
  a.brand {
    transition: none;
  }

  a.button:not(.button-quiet)::before,
  button.button:not(.button-quiet)::before {
    animation: none;
    opacity: 0;
    transform: none;
  }

  a.button:is(:active, .is-pressed):not(:disabled),
  button.button:is(:active, .is-pressed):not(:disabled),
  .nav a:is(:active, .is-pressed),
  footer.foot nav a:is(:active, .is-pressed),
  a.blog-card:is(:active, .is-pressed),
  .walk-tabs button:is(:active, .is-pressed),
  .xp button:is(:active, .is-pressed),
  a.brand:is(:active, .is-pressed) {
    scale: 1;
    transform: none;
    outline: 3px solid #f4f7fb;
    outline-offset: 3px;
  }

  a.button:not(.button-quiet):is(:active, .is-pressed):not(:disabled),
  button.button:not(.button-quiet):is(:active, .is-pressed):not(:disabled),
  .walk-tabs button[aria-selected="true"]:is(:active, .is-pressed),
  .xp button.is-on:is(:active, .is-pressed) {
    background-color: #e7fbff;
    background-image: linear-gradient(115deg, #e7fbff 0%, #ddd6fe 100%);
    color: #07131c;
    box-shadow: inset 0 0 0 3px #07131c;
  }

  .button-quiet:is(:active, .is-pressed),
  .nav a:is(:active, .is-pressed),
  footer.foot nav a:is(:active, .is-pressed),
  a.blog-card:is(:active, .is-pressed),
  .walk-tabs button:is(:active, .is-pressed):not([aria-selected="true"]),
  .xp button:is(:active, .is-pressed):not(.is-on),
  a.brand:is(:active, .is-pressed) {
    background-color: #123040;
    background-image: none;
    color: #f4f7fb;
    box-shadow: inset 0 0 0 2px #7ae7ff;
  }
}