/* A purple jelly-glass finish reserved for the Discord button. */
.discord-button {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(ellipse at 50% 0%, rgb(231 210 255 / 55%), transparent 65%),
    linear-gradient(170deg, rgb(166 112 239 / 72%), rgb(116 71 205 / 60%) 48%, rgb(106 54 185 / 76%));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  outline: 1px solid rgb(237 218 255 / 80%);
  outline-offset: -1px;
  transition: transform 180ms ease, background-color 180ms ease;
}

.discord-button::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(ellipse 65% 16% at 50% 0%, rgb(255 255 255 / 85%), transparent),
    radial-gradient(ellipse 60% 16% at 50% 100%, rgb(217 178 255 / 65%), transparent),
    linear-gradient(90deg, rgb(240 218 255 / 35%), transparent 12% 88%, rgb(228 198 255 / 35%));
}

.discord-button:hover { background-color: rgb(190 146 255 / 25%); }
.discord-button:active { transform: scale(0.98); }
.discord-button:focus-visible { outline: 2px solid white; outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .discord-button { transition: none; }
}