/* ============================================================================
   Motions shared design system — buttons + glass. Loaded on every page
   (home.html, index.html, pricing.html, docs.html, etc). Contains ONLY the
   parts that need to appear cross-page: the button system and the base
   glass surface tokens. Page-specific styling stays in each page's own CSS.
   ============================================================================ */

:root {
  --motions-accent: #6de0c9;
  --motions-accent-soft: rgba(109,224,201,0.10);
  --motions-accent-line: rgba(109,224,201,0.35);
  --motions-accent-glow: rgba(109,224,201,0.45);
}

/* ---------- Static liquid glass buttons ---------- */
a.motions-btn, a.motions-btn--dark, a.motions-btn-hero,
button.motions-btn, button.motions-btn--dark, button.motions-btn-hero,
.motions-btn, .motions-btn--dark {
  --_btn-h: 44px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: var(--_btn-h);
  padding: 0 22px;
  border-radius: calc(var(--_btn-h) / 2) !important;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #e9ecf1;
  text-decoration: none !important;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 220ms ease,
              border-color 220ms ease,
              background 220ms ease;
}

/* Liquid glass — Apple iOS 26 style pill. Two-tone body with a bright top
   shine and a darker beveled bottom, floated on a soft drop shadow. */
a.motions-btn, button.motions-btn, .motions-btn {
  color: #0a0a0d !important;
  text-transform: none;
  letter-spacing: -0.005em;
  font-size: 15px;
  font-weight: 600;
  padding: 0 32px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(180deg,
    #f5f6fa 0%,
    #e8eaf0 50%,
    #c9ccd4 100%);
  border: 1px solid rgba(255,255,255,0.9);
  box-shadow:
    /* bright glass rim across the top */
    inset 0 1.5px 0 rgba(255,255,255,1),
    /* soft inner top-glow */
    inset 0 4px 8px -3px rgba(255,255,255,0.9),
    /* concave bottom bevel — pronounced */
    inset 0 -3px 6px -1px rgba(0,0,0,0.18),
    inset 0 -1px 0 rgba(0,0,0,0.06),
    /* hairline outer stroke */
    0 0 0 0.5px rgba(0,0,0,0.08),
    /* tight contact shadow */
    0 3px 5px rgba(0,0,0,0.14),
    /* main floor shadow — deep + soft */
    0 16px 30px -6px rgba(0,0,0,0.35),
    /* diffused halo */
    0 28px 50px -10px rgba(0,0,0,0.20);
  transition: transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 220ms ease,
              background 220ms ease;
}
/* Extra top-arc specular via ::before — the bright shine reflection */
a.motions-btn::before, button.motions-btn::before, .motions-btn::before {
  content: "";
  position: absolute;
  top: 1px; left: 6%; right: 6%;
  height: 55%;
  border-radius: 999px;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.85) 0%,
    rgba(255,255,255,0.20) 60%,
    rgba(255,255,255,0) 100%);
  pointer-events: none;
  z-index: 1;
}
a.motions-btn > *, button.motions-btn > *, .motions-btn > * { position: relative; z-index: 2; }

.motions-btn:hover {
  transform: translateY(-2px);
  background: linear-gradient(180deg,
    #f8f9fc 0%, #ecedf3 50%, #cfd2da 100%);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,1),
    inset 0 4px 8px -3px rgba(255,255,255,1),
    inset 0 -3px 6px -1px rgba(0,0,0,0.18),
    inset 0 -1px 0 rgba(0,0,0,0.06),
    0 0 0 0.5px rgba(0,0,0,0.10),
    0 5px 8px rgba(0,0,0,0.18),
    0 22px 40px -6px rgba(0,0,0,0.42),
    0 36px 64px -10px rgba(0,0,0,0.26);
}
.motions-btn:active {
  transform: translateY(0);
  box-shadow:
    inset 0 3px 6px rgba(0,0,0,0.18),
    inset 0 -1px 1px rgba(255,255,255,0.7),
    0 0 0 0.5px rgba(0,0,0,0.12),
    0 2px 4px rgba(0,0,0,0.12);
}
.motions-btn:active::before { opacity: 0.7; }

/* Static dark liquid glass — matches the hero shell but flat, not animated */
.motions-btn--dark {
  color: #d8dae0;
  text-transform: none;
  letter-spacing: 0;
  font-size: 14px;
  font-weight: 500;
  padding: 0 26px;
  background:
    linear-gradient(180deg,
      rgba(48,52,60,0.95) 0%,
      rgba(18,20,26,0.98) 55%,
      rgba(8,10,14,1) 100%);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 -1px 0 rgba(0,0,0,0.50),
    0 1px 2px rgba(0,0,0,0.35),
    0 12px 28px -10px rgba(0,0,0,0.6);
}
.motions-btn--dark:hover {
  transform: translateY(-1px);
  color: #ffffff;
  border-color: rgba(255,255,255,0.16);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    inset 0 -1px 0 rgba(0,0,0,0.50),
    0 4px 8px rgba(0,0,0,0.45),
    0 16px 36px -10px rgba(0,0,0,0.7);
}
.motions-btn--dark:active { transform: translateY(0); }

.motions-btn--sm { --_btn-h: 36px; font-size: 11.5px; padding: 0 16px; }
.motions-btn--lg { --_btn-h: 52px; font-size: 13.5px; padding: 0 28px; }
.motions-btn--xl { --_btn-h: 62px; font-size: 14px;   padding: 0 34px; }
.motions-btn--block { display: flex; width: 100%; }

.motions-btn > svg,
.motions-btn--dark > svg { width: 16px; height: 16px; flex-shrink: 0; opacity: 0.9; }

/* ---------- Animated hero button — glass + rotating metallic border sheen.
   Pure CSS, no WebGL. Uses conic-gradient rotated via CSS var animation
   (@property + Houdini) to sweep a mint highlight around the border.
   The button itself is dark liquid glass with the border layer on top.
   ---------- */
@property --mbh-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
@keyframes mbh-sweep {
  to { --mbh-angle: 360deg; }
}

.motions-btn-hero {
  --_h: 52px;
  --_r: calc(var(--_h) / 2);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--_h);
  min-width: 168px;
  padding: 0 30px;
  border: none;
  background: transparent;
  border-radius: var(--_r);
  cursor: pointer;
  outline: none;
  font-family: inherit;
  color: #f2f4f8;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  transition: transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 220ms ease,
              color 220ms ease;
  box-shadow:
    0 12px 28px -14px rgba(0,0,0,0.7),
    0 6px 14px -6px rgba(0,0,0,0.5);
}

/* Rotating conic-gradient border — silver/chrome sheen (no mint) */
.motions-btn-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(
    from var(--mbh-angle),
    rgba(120,124,132,0.30) 0deg,
    rgba(255,255,255,0.95) 60deg,
    rgba(210,214,222,0.85) 90deg,
    rgba(255,255,255,0.20) 130deg,
    rgba(140,144,152,0.30) 180deg,
    rgba(255,255,255,0.90) 250deg,
    rgba(220,224,232,0.75) 280deg,
    rgba(255,255,255,0.10) 320deg,
    rgba(120,124,132,0.30) 360deg
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  z-index: 2;
  animation: mbh-sweep 5s linear infinite;
  pointer-events: none;
  filter: blur(0.3px);
}

/* Dark liquid-glass body */
.motions-btn-hero::after {
  content: "";
  position: absolute;
  inset: 1.5px;
  border-radius: calc(var(--_r) - 1px);
  background:
    linear-gradient(180deg,
      rgba(48,52,60,0.90) 0%,
      rgba(18,20,26,0.94) 55%,
      rgba(8,10,14,0.98) 100%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 -1px 0 rgba(0,0,0,0.5);
  z-index: 1;
  pointer-events: none;
}

.motions-btn-hero > span,
.motions-btn-hero > .mbh-label {
  position: relative;
  z-index: 3;
  text-shadow: 0 1px 2px rgba(0,0,0,0.7);
  pointer-events: none;
  transition: text-shadow 220ms ease;
}

.motions-btn-hero:hover {
  transform: translateY(-1px);
  color: #ffffff;
  box-shadow:
    0 18px 36px -12px rgba(0,0,0,0.75),
    0 8px 18px -6px rgba(0,0,0,0.5);
  animation: none;
}
.motions-btn-hero:hover::before { animation-duration: 2s; }
.motions-btn-hero:hover > span,
.motions-btn-hero:hover > .mbh-label {
  text-shadow: 0 0 10px rgba(255,255,255,0.35), 0 1px 2px rgba(0,0,0,0.7);
}
.motions-btn-hero:active { transform: translateY(1px) scale(0.98); }
.motions-btn-hero:active::before { animation-duration: 0.8s; }

/* Ripple — subtle white flash on click */
.motions-btn-hero .mbh-ripple {
  position: absolute;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0) 70%);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 4;
  animation: mbh-ripple 600ms ease-out;
}
@keyframes mbh-ripple {
  0%   { transform: translate(-50%, -50%) scale(0);   opacity: 0.6; }
  100% { transform: translate(-50%, -50%) scale(5);   opacity: 0; }
}

/* Sizes */
.motions-btn-hero.motions-btn-hero--sm { --_h: 44px; font-size: 11.5px; padding: 0 22px; min-width: 138px; }
.motions-btn-hero.motions-btn-hero--lg { --_h: 60px; font-size: 13.5px; padding: 0 36px; min-width: 200px; }

/* Firefox fallback (no @property support in some versions) — static border */
@supports not (background: conic-gradient(from 0deg, red, red)) {
  .motions-btn-hero::before {
    background: linear-gradient(135deg,
      rgba(255,255,255,0.08) 0%,
      rgba(109,224,201,0.5) 45%,
      rgba(255,255,255,0.95) 50%,
      rgba(109,224,201,0.5) 55%,
      rgba(255,255,255,0.08) 100%);
    animation: none;
  }
}