/* ── Pop Magics Liquid Chrome: the one button system for the whole site (WEB-0021) ──────────
   From the owner's design pack. Purple → magenta → pink chrome, a highlight that follows the
   pointer (liquid-chrome.js), lift on hover, press, focus ring, disabled and loading states.
   Nothing moves while the visitor is idle, and nothing is drawn outside the button.

   New markup uses .pm-liquid-chrome (+ --secondary, --sm, --lg, --block). The class names the
   pages already carried (.pm-btn, .btn …) are mapped onto the same surface below, so no page
   markup changed. Those keep their own font and padding from pm.css / styles.css / guides.css;
   this file owns everything visual. Legacy button visuals retired in favor of Pop Magics
   Liquid Chrome: do not style a button's background, border or shadow anywhere else.

   The pack lifts the label above the gloss with a wrapper <span>. Here the two gloss layers sit
   at z-index -1 inside the button's own stacking context instead, which paints the same picture
   (surface, gloss, label) without touching ~100 buttons in nine languages. */
:root{
  --pm-chrome-radius:14px;
  --pm-chrome-height:48px;
  --pm-chrome-pad-x:22px;
  --pm-chrome-font:700 14px/1.15 var(--display,-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,sans-serif);
  --pm-chrome-text:#fff7ff;
  --pm-chrome-fill:linear-gradient(112deg,#4d1f88 0%,#8d2fc0 20%,#d54bb4 43%,#ff76c9 57%,#b53ecb 74%,#6e2bad 100%);
  --pm-chrome-fill-dark:linear-gradient(112deg,#23162f 0%,#3b1d50 24%,#6a2a75 48%,#8b347c 62%,#4b245f 82%,#2a1838 100%);
  --pm-chrome-shadow:0 10px 30px rgba(119,37,155,.28),inset 0 1px 0 rgba(255,255,255,.32),inset 0 -1px 0 rgba(87,19,105,.42);
  --pm-chrome-shadow-hover:0 16px 42px rgba(187,54,168,.38),0 0 0 1px rgba(255,255,255,.08),inset 0 1px 0 rgba(255,255,255,.38),inset 0 -1px 0 rgba(75,11,101,.48);
  --pm-chrome-focus:0 0 0 3px rgba(243,109,255,.24),0 0 0 1px rgba(255,255,255,.52);
}

/* Every class that is a button. Keep this list in step with SELECTOR in liquid-chrome.js. */
:is(.pm-liquid-chrome,.pm-btn,.btn,.btn-secondary){
  --pm-x:50%;
  --pm-y:50%;
  --pm-intensity:1;
  position:relative;
  isolation:isolate;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.22);
  border-radius:var(--pm-chrome-radius);
  box-sizing:border-box;
  overflow:hidden;
  appearance:none;
  -webkit-appearance:none;
  -webkit-tap-highlight-color:transparent;
  color:var(--pm-chrome-text);
  /* The label crosses the bright pink band; a plum edge and a soft halo keep it readable there. */
  text-shadow:0 1px 2px rgba(58,6,84,.6),0 0 10px rgba(74,12,104,.4);
  text-decoration:none;
  cursor:pointer;
  user-select:none;
  -webkit-user-select:none;
  transform:translate3d(0,0,0) scale(1);
  transform-origin:center;
  background:
    linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,0) 34%),
    var(--pm-chrome-fill);
  background-size:100% 100%,180% 180%;
  background-position:center,30% 50%;
  box-shadow:var(--pm-chrome-shadow);
  transition:
    transform 180ms cubic-bezier(.2,.8,.2,1),
    box-shadow 220ms ease,
    border-color 220ms ease,
    filter 220ms ease,
    background-position 420ms cubic-bezier(.2,.8,.2,1);
}

/* Sizing for the pack's own class. The mapped classes keep theirs. */
.pm-liquid-chrome{
  gap:.6em;
  min-height:var(--pm-chrome-height);
  padding:0 var(--pm-chrome-pad-x);
  font:var(--pm-chrome-font);
  letter-spacing:-.01em;
  white-space:nowrap;
}

/* Pointer-following chrome reflection. No bubbles, no particles. */
:is(.pm-liquid-chrome,.pm-btn,.btn,.btn-secondary)::before{
  content:"";
  position:absolute;
  inset:-35%;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(circle at var(--pm-x) var(--pm-y),
      rgba(255,255,255,.95) 0%,
      rgba(255,215,250,.72) 7%,
      rgba(255,139,226,.38) 18%,
      rgba(124,56,184,.12) 34%,
      rgba(0,0,0,0) 52%),
    linear-gradient(102deg,
      transparent 22%,
      rgba(255,255,255,.50) 35%,
      rgba(255,188,241,.34) 43%,
      transparent 56%);
  mix-blend-mode:screen;
  opacity:calc(.52 * var(--pm-intensity));
  transform:translateZ(0) rotate(-5deg);
  transition:opacity 180ms ease,transform 260ms ease;
}

/* Depth layer only; still inside the silhouette. */
:is(.pm-liquid-chrome,.pm-btn,.btn,.btn-secondary)::after{
  content:"";
  position:absolute;
  inset:1px;
  z-index:-1;
  pointer-events:none;
  border-radius:calc(var(--pm-chrome-radius) - 1px);
  background:
    linear-gradient(180deg,rgba(255,255,255,.16),transparent 24%,transparent 72%,rgba(72,0,100,.16)),
    radial-gradient(120% 80% at 15% 0%,rgba(244,167,255,.22),transparent 48%),
    radial-gradient(90% 90% at 86% 100%,rgba(255,100,193,.18),transparent 52%);
  opacity:.95;
}

:is(.pm-liquid-chrome,.pm-btn,.btn,.btn-secondary) > svg{width:1.05em;height:1.05em;flex:0 0 auto}

:is(.pm-liquid-chrome,.pm-btn,.btn,.btn-secondary):hover{
  color:var(--pm-chrome-text);
  text-decoration:none;
  transform:translate3d(0,-2px,0) scale(1.018);
  background-position:center,72% 48%;
  border-color:rgba(255,255,255,.38);
  box-shadow:var(--pm-chrome-shadow-hover);
  filter:saturate(1.08) brightness(1.04);
}
:is(.pm-liquid-chrome,.pm-btn,.btn,.btn-secondary):hover::before{
  opacity:calc(.82 * var(--pm-intensity));
  transform:translateZ(0) rotate(1deg) scale(1.04);
}

:is(.pm-liquid-chrome,.pm-btn,.btn,.btn-secondary):active,
:is(.pm-liquid-chrome,.pm-btn,.btn,.btn-secondary).is-pressed{
  transform:translate3d(0,1px,0) scale(.985);
  box-shadow:0 7px 18px rgba(130,33,149,.28),inset 0 2px 5px rgba(69,0,87,.28),inset 0 1px 0 rgba(255,255,255,.24);
  filter:saturate(1.02) brightness(.98);
  transition-duration:80ms;
}

:is(.pm-liquid-chrome,.pm-btn,.btn,.btn-secondary):focus-visible{
  outline:none;
  box-shadow:var(--pm-chrome-shadow-hover),var(--pm-chrome-focus);
}

:is(.pm-liquid-chrome,.pm-btn,.btn,.btn-secondary):is([disabled],[aria-disabled="true"],.is-disabled){
  opacity:.44;
  cursor:not-allowed;
  transform:none !important;
  filter:grayscale(.16) saturate(.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16);
}
:is(.pm-liquid-chrome,.pm-btn,.btn,.btn-secondary):is([disabled],[aria-disabled="true"],.is-disabled)::before{opacity:.18}

/* Loading state. Keeps its width as long as the label stays in the DOM. */
:is(.pm-liquid-chrome,.pm-btn,.btn,.btn-secondary).is-loading{cursor:progress}
.is-loading .pm-liquid-chrome__label{opacity:.62}
.is-loading .pm-liquid-chrome__spinner{
  display:inline-block;
  width:1em;height:1em;
  border:2px solid rgba(255,255,255,.35);
  border-top-color:rgba(255,255,255,.95);
  border-radius:999px;
  animation:pmChromeSpin .8s linear infinite;
}
@keyframes pmChromeSpin{to{transform:rotate(360deg)}}

/* Secondary: the same family in dark chrome, not a second style. */
:is(.pm-liquid-chrome--secondary,.pm-btn--ghost,.pm-btn-ghost,.btn-ghost,.btn-secondary){
  background:
    linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,0) 34%),
    var(--pm-chrome-fill-dark);
  background-size:100% 100%,180% 180%;
  background-position:center,30% 50%;
  border-color:rgba(241,173,255,.26);
  box-shadow:0 8px 24px rgba(68,20,86,.22),inset 0 1px 0 rgba(255,255,255,.18);
}
:is(.pm-liquid-chrome--secondary,.pm-btn--ghost,.pm-btn-ghost,.btn-ghost,.btn-secondary):hover{
  border-color:rgba(255,190,244,.44);
  box-shadow:0 12px 30px rgba(122,35,132,.28),inset 0 1px 0 rgba(255,255,255,.24);
}
:is(.pm-liquid-chrome--secondary,.pm-btn--ghost,.pm-btn-ghost,.btn-ghost,.btn-secondary):focus-visible{
  box-shadow:0 12px 30px rgba(122,35,132,.28),inset 0 1px 0 rgba(255,255,255,.24),var(--pm-chrome-focus);
}

/* Sizes. */
.pm-liquid-chrome--sm{--pm-chrome-height:40px;--pm-chrome-pad-x:16px;--pm-chrome-radius:12px;font-size:13px}
.pm-liquid-chrome--lg{--pm-chrome-height:56px;--pm-chrome-pad-x:28px;--pm-chrome-radius:16px;font-size:15px}
.pm-liquid-chrome--block{width:100%}
.pm-btn--lg{--pm-chrome-radius:16px}

/* Optional icon micro-motion. */
.pm-liquid-chrome__icon{transition:transform 180ms ease}
:is(.pm-liquid-chrome,.pm-btn,.btn,.btn-secondary):hover .pm-liquid-chrome__icon{transform:translateX(2px) scale(1.04)}

/* Nothing moves for visitors who ask for reduced motion. */
@media (prefers-reduced-motion:reduce){
  :is(.pm-liquid-chrome,.pm-btn,.btn,.btn-secondary),
  :is(.pm-liquid-chrome,.pm-btn,.btn,.btn-secondary)::before,
  .pm-liquid-chrome__icon,
  .pm-liquid-chrome__spinner{
    transition-duration:.001ms !important;
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
  }
  :is(.pm-liquid-chrome,.pm-btn,.btn,.btn-secondary):hover{transform:none}
}

/* Touch: no lift that sticks after a tap. */
@media (hover:none){
  :is(.pm-liquid-chrome,.pm-btn,.btn,.btn-secondary):hover{transform:none}
  :is(.pm-liquid-chrome,.pm-btn,.btn,.btn-secondary)::before{opacity:.46}
}