/* JPAccess - liquid-metal CTA treatment (v1)
 *
 * Layers added inside each dark [data-slot="liquid-button"]. The button itself
 * already carries `relative isolate rounded-full`, so it owns a stacking
 * context and negative z-index children stay inside it:
 *
 *   -10  .glass-deep          the bundle's own dark surface + drop shadow
 *    -9  .lm-rim   (canvas)   animated liquid metal, full bleed
 *    -8  .lm-face             black inner pill, inset 2px, leaves the metal rim
 *     0  label                the bundle's own text, untouched
 *     1  .lm-ripples          click ripples
 *
 * Nothing here restyles the bundle's classes; it only adds .lm-* layers, so a
 * rebuilt bundle keeps working with or without this file.
 */

[data-slot="liquid-button"] .lm-rim,
[data-slot="liquid-button"] .lm-face,
[data-slot="liquid-button"] .lm-ripples {
  position: absolute;
  border-radius: 9999px;
  pointer-events: none;
}

[data-slot="liquid-button"] .lm-rim {
  inset: 0;
  z-index: -9;
  overflow: hidden;
}

[data-slot="liquid-button"] .lm-rim > canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 9999px;
}

/* 2px, AND BACK TO 2px. This was cut to 1px to slim down the rim on the
   PRICING buttons, which was the wrong lever: those buttons do not use this
   value. They are inside .glass-plain, which had its own inset:3px override in
   metal-sections.v1.css, so cutting the base thinned every OTHER metal button
   on the site - hero, nav, gallery, billing - and left the only ones anybody
   was complaining about untouched. The override is gone now and every metal
   button shares this one number.
   Changed in BOTH copies of this file, the app's and the landing's, because
   the two surfaces show the same button. */
[data-slot="liquid-button"] .lm-face {
  inset: 2px;
  z-index: -8;
  background: linear-gradient(180deg, #202020 0%, #000000 100%);
  box-shadow: none;
  transition: box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

/* The button's own `active:scale-[0.99]` handles the travel; this only adds
   the pressed-in shading on the face. */
[data-slot="liquid-button"][data-lm-press="1"] .lm-face {
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.4),
    inset 0 1px 2px rgba(0, 0, 0, 0.3);
}

[data-slot="liquid-button"] .lm-ripples {
  inset: 0;
  z-index: 1;
  overflow: hidden;
}

[data-slot="liquid-button"] .lm-ripple {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.4) 0%,
    rgba(255, 255, 255, 0) 70%
  );
  transform: translate(-50%, -50%) scale(0);
  animation: lm-ripple 0.6s ease-out forwards;
}

@keyframes lm-ripple {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0.6;
  }
  100% {
    transform: translate(-50%, -50%) scale(4);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-slot="liquid-button"] .lm-ripple {
    display: none;
  }
}