/* Pearl button: glossy deep-blue pill, same as the landing page's buttons. Markup:
   <button class="pearl"><span class="wrap"><span class="txt"><span>&#10023;</span><span>&#10022;</span><span class="lbl">Label</span></span></span></button> */
.pearl {
  --pearl-bg: #0a1929;
  position: relative; display: inline-flex; border: 0; outline: none; cursor: pointer;
  border-radius: 100px; background-color: var(--pearl-bg); text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  box-shadow:
    inset 0 0.2rem 0.55rem rgba(110,190,255,0.32),
    inset 0 -0.1rem 0.3rem rgba(0,0,0,0.7),
    inset 0 -0.25rem 0.55rem rgba(64,170,255,0.4),
    0 1.6rem 2rem rgba(0,0,0,0.3),
    0 0.7rem 0.8rem -0.5rem rgba(0,0,0,0.8);
  transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s;
}
.pearl .wrap {
  position: relative; display: block; overflow: hidden; border-radius: inherit;
  padding: 15px 30px; font-size: 16px; font-weight: 600; color: rgba(129,216,255,0.92);
}
.pearl .wrap::before, .pearl .wrap::after { content: ''; position: absolute; transition: transform 0.3s ease, opacity 0.3s ease; }
.pearl .wrap::before { left: -15%; right: -15%; bottom: 25%; top: -100%; border-radius: 50%; background-color: rgba(64,180,255,0.15); }
.pearl .wrap::after {
  left: 6%; right: 6%; top: 12%; bottom: 40%; border-radius: 16px 16px 0 0;
  box-shadow: inset 0 10px 8px -10px rgba(129,216,255,0.6);
  background: linear-gradient(180deg, rgba(64,180,255,0.25) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0) 100%);
}
.pearl .txt {
  position: relative; z-index: 1; display: flex; align-items: center; gap: 9px; white-space: nowrap;
  transform: translateY(2%); transition: transform 0.2s ease;
  -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent);
          mask-image: linear-gradient(to bottom, #000 40%, transparent);
}
.pearl .txt > span:nth-child(2) { display: none; }
.pearl:hover .txt > span:nth-child(1) { display: none; }
.pearl:hover .txt > span:nth-child(2) { display: inline-block; }
.pearl:hover {
  box-shadow:
    inset 0 0.2rem 0.35rem rgba(129,216,255,0.4),
    inset 0 -0.1rem 0.3rem rgba(0,0,0,0.7),
    inset 0 -0.25rem 0.55rem rgba(64,180,255,0.6),
    0 1.6rem 2rem rgba(0,0,0,0.3),
    0 0.7rem 0.8rem -0.5rem rgba(0,0,0,0.8);
}
.pearl:hover .wrap::before { transform: translateY(-5%); }
.pearl:hover .wrap::after { opacity: 0.4; transform: translateY(5%); }
.pearl:hover .txt { transform: translateY(-4%); }
.pearl:active { transform: translateY(3px); }
.pearl:disabled { opacity: 0.6; cursor: progress; transform: none; }
/* Red pearl for sign-out and other "leave / remove" actions */
.pearl.red {
  --pearl-bg: #290a0e;
  box-shadow:
    inset 0 0.2rem 0.55rem rgba(255,130,120,0.32),
    inset 0 -0.1rem 0.3rem rgba(0,0,0,0.7),
    inset 0 -0.25rem 0.55rem rgba(255,80,70,0.4),
    0 1.6rem 2rem rgba(0,0,0,0.3),
    0 0.7rem 0.8rem -0.5rem rgba(0,0,0,0.8);
}
.pearl.red .wrap { color: rgba(255,170,160,0.95); }
.pearl.red .wrap::before { background-color: rgba(255,90,80,0.15); }
.pearl.red .wrap::after {
  box-shadow: inset 0 10px 8px -10px rgba(255,160,150,0.6);
  background: linear-gradient(180deg, rgba(255,90,80,0.25) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0) 100%);
}
.pearl.red:hover {
  box-shadow:
    inset 0 0.2rem 0.35rem rgba(255,160,150,0.4),
    inset 0 -0.1rem 0.3rem rgba(0,0,0,0.7),
    inset 0 -0.25rem 0.55rem rgba(255,90,80,0.6),
    0 1.6rem 2rem rgba(0,0,0,0.3),
    0 0.7rem 0.8rem -0.5rem rgba(0,0,0,0.8);
}
.pearl .arrow { width: 17px; height: 17px; transition: transform 0.2s; }
.pearl:hover .arrow { transform: translateX(3px); }