/* catkeys pride-gradient wordmark.
 *
 * Deliberately its own file, separate from landing.css and css/pages.css, so the vault
 * (catkeys/web/src/app.css — locked to another agent at the time this was written) can pick up
 * the identical rule later just by adding a <link> and the class, with no merge conflict against
 * either static-page stylesheet.
 *
 * Mirrors public/cattracks/css/base.css's `.wordmark` rule (same six pride-flag stops), but holds
 * ONLY the gradient-fill mechanics — no font-size/weight/letter-spacing. cattracks applies its
 * version to one nav-sized brand link, so baking in a size was safe there; catkeys applies this to
 * headings of very different scale (a page <h1> here, a small in-app header brand in the vault),
 * so typography stays with each caller's own heading/element rules and this file only supplies the
 * paint. Apply by adding `class="wordmark"` to any text element — a heading, a brand link, a span.
 *
 * The `color` property is a pre-clip fallback for browsers without background-clip: text support;
 * -webkit-text-fill-color is what actually keeps the fill transparent (and the gradient visible)
 * on :hover and other states that might otherwise reassert `color`.
 *
 * `--pride-gradient` is the same six stops promoted to a custom property, not just inlined below,
 * because the vault (catkeys/web/src/app.css) links this file and reuses the identical gradient
 * for a non-text accent (a header underline — see that file's own comments) instead of
 * hand-copying the six stops a second time. Consumers outside this file should carry a literal
 * fallback in their own var() call — matching the pattern generator.css/totp.css already use for
 * --accent etc. — since this stylesheet may not always be the one loaded first.
 */

:root {
  --pride-gradient: linear-gradient(90deg, #e40303 0%, #ff8c00 20%, #ffed00 40%, #008026 60%, #004dff 80%, #750787 100%);
}

.wordmark {
  background: var(--pride-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.wordmark:hover {
  opacity: 0.85;
}