/* A lightweight, code-native interpretation of Sprout's live charcoal gel. */
a.aqua-gel {
  --gel-outer-x: 0px;
  --gel-outer-y: 0px;
  --gel-inner-x: 0px;
  --gel-inner-y: 0px;
  --gel-tilt-x: 0deg;
  --gel-tilt-y: 0deg;
  --gel-shell-light-x: 50%;
  --gel-inner-light-x: 50%;
  --gel-press: 1;

  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 229px;
  min-width: 0;
  max-width: calc(100vw - 44px);
  height: auto;
  min-height: 0;
  aspect-ratio: 229 / 84;
  margin: 14px 0;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow:
    0 1px 0 rgb(255 255 255 / 0.16),
    0 8px 22px rgb(0 0 0 / 0.18);
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  font-size: 32px;
  font-weight: 500;
  letter-spacing: -1.2px;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  text-shadow: 0 1px 3px rgb(0 0 0 / 0.18);
  transform:
    perspective(430px)
    rotateX(var(--gel-tilt-x))
    rotateY(var(--gel-tilt-y))
    scale(var(--gel-press));
  transform-style: preserve-3d;
  transition: box-shadow 180ms ease, filter 180ms ease;
  -webkit-tap-highlight-color: transparent;
}

/* Outer shell: the pale rim and lower glow move as one refractive surface. */
a.aqua-gel::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(
      94% 72% at var(--gel-shell-light-x) 108%,
      rgb(237 242 241 / 0.96) 0%,
      rgb(163 170 168 / 0.78) 20%,
      rgb(83 89 87 / 0.28) 42%,
      transparent 67%
    ),
    radial-gradient(
      88% 50% at calc(var(--gel-shell-light-x) - 16%) -6%,
      rgb(255 255 255 / 0.42) 0%,
      transparent 63%
    ),
    linear-gradient(180deg, #858988 0%, #4b4e4d 13%, #242726 43%, #171918 66%, #555b59 84%, #d5dbd9 100%);
  box-shadow:
    inset 0 2px 3px rgb(255 255 255 / 0.55),
    inset 0 -3px 6px rgb(255 255 255 / 0.42),
    inset 6px 0 10px rgb(255 255 255 / 0.08),
    inset -6px 0 10px rgb(255 255 255 / 0.08);
  content: "";
  pointer-events: none;
  transform: translate3d(var(--gel-outer-x), var(--gel-outer-y), 0) scale(1.015);
}

a.aqua-gel[data-aqua-renderer="webgl"]::before,
a.aqua-gel[data-aqua-renderer="webgl"]::after {
  display: none;
}

a.aqua-gel > canvas[data-aqua-gel-layer] {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  pointer-events: none;
}

/* A narrow travelling reflection belongs to the shell, not the inner dome. */
a.aqua-gel::after {
  position: absolute;
  z-index: 1;
  inset: 1px;
  border-radius: inherit;
  background:
    linear-gradient(112deg, transparent 20%, rgb(255 255 255 / 0.12) 42%, transparent 63%),
    radial-gradient(65% 26% at var(--gel-shell-light-x) 1%, rgb(255 255 255 / 0.22), transparent 74%);
  background-size: 165% 100%, 100% 100%;
  background-position: calc(var(--gel-shell-light-x) - 50%) 0, center;
  content: "";
  mix-blend-mode: screen;
  opacity: 0.82;
  pointer-events: none;
}

.aqua-gel__inner {
  display: none;
}

.aqua-gel__label {
  position: relative;
  z-index: 3;
  display: block;
  transform: translateZ(22px);
}

a.aqua-gel:visited,
a.aqua-gel:hover {
  color: #fff;
}

a.aqua-gel:hover {
  filter: brightness(1.035);
  box-shadow:
    0 1px 0 rgb(255 255 255 / 0.2),
    0 10px 26px rgb(0 0 0 / 0.22);
}

a.aqua-gel:active {
  --gel-press: 0.985;
  filter: brightness(0.97);
}

a.aqua-gel:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 6px;
}

@media (max-width: 340px) {
  a.aqua-gel {
    width: 210px;
    font-size: 29px;
  }
}

@media (prefers-reduced-motion: reduce) {
  a.aqua-gel {
    transform: none;
    transition: none;
  }

  a.aqua-gel::before,
  a.aqua-gel::after {
    transform: none;
  }
}

@media (forced-colors: active) {
  a.aqua-gel {
    border: 2px solid LinkText;
    background: Canvas;
    color: LinkText;
    text-shadow: none;
  }

  a.aqua-gel::before,
  a.aqua-gel::after,
  a.aqua-gel > canvas[data-aqua-gel-layer],
  .aqua-gel__inner {
    display: none;
  }
}