/*
 * Koi Pond Kit: the look of the pond's frame and its link captions.
 * The water, koi, pads and petals are drawn by koi-pond.js; their colours live in its settings.
 */

.koi-pond {
  position: relative;
  overflow: hidden;
  color-scheme: dark;
  user-select: none;
  -webkit-user-select: none;
}

/* A soft vignette, like looking down into deep water. Delete this block for flat edges. */
.koi-pond::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(4, 14, 16, 0.5) 100%);
}

/*
 * The caption pill that follows each link koi. --tint and --ink come from each link's
 * `tint` and `ink` settings.
 */
.koi-pond__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 15px;
  border-radius: 999px;
  /* The see-through pond pill, tinted just a little with its koi's colour. */
  background: linear-gradient(135deg, rgba(var(--tint), 0.16), rgba(18, 40, 42, 0.6) 70%);
  border: 1px solid rgba(var(--tint), 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  opacity: 0;
  transition: background 0.2s, border-color 0.2s, opacity 0.6s;
  touch-action: manipulation;
}

.koi-pond__link:hover,
.koi-pond__link:focus-visible {
  background: linear-gradient(135deg, rgba(var(--tint), 0.26), rgba(18, 40, 42, 0.78) 70%);
  border-color: rgba(var(--tint), 0.9);
}

.koi-pond__link:focus-visible {
  outline: 2px solid rgb(var(--tint));
  outline-offset: 3px;
}