---
/**
 * The signature wordmark, optionally writing itself on load.
 *
 * A signature is a brush stroke and a personal seal at once, which is why
 * it carries the sumi-e direction better than any lettering could. The
 * write-on is a left-to-right reveal — the direction of writing — and it
 * says "autonomous" by drawing itself without a hand on it.
 *
 * The SVG is a single-colour black wordmark, so it inverts for dark
 * grounds rather than shipping a second file.
 */
const {
  width = "148px",
  animate = false,
  invert = false,
  seal = true,
  class: className = "",
} = Astro.props;
---

<span class={`ca-mark inline-flex items-center gap-3 ${className}`}>
  <img
    src="/brand/carlos-arias-signature.svg"
    alt="Carlos Arias"
    width="2077"
    height="520"
    style={`width:${width};height:auto`}
    class={`ca-mark-img ${invert ? "ca-invert" : ""} ${animate ? "ca-write" : ""}`}
  />
  {seal && <span class="ca-seal" aria-hidden="true">印</span>}
</span>

<style>
  /* Black artwork: inverted wherever it sits on an ink ground. */
  :global(.dark) .ca-mark-img,
  .ca-mark-img.ca-invert {
    filter: invert(1);
  }

  .ca-seal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    flex: none;
    border-radius: var(--radius);
    background: var(--ca-seal);
    color: #fff;
    font-family: var(--font-serif);
    font-size: 0.8rem;
    line-height: 1;
  }

  .ca-write {
    clip-path: inset(0 100% 0 0);
    animation: ca-write-on var(--ca-dur-ink) cubic-bezier(0.31, 0.06, 0.2, 1) 0.25s forwards;
  }

  @keyframes ca-write-on {
    to {
      clip-path: inset(0 -2% 0 0);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .ca-write {
      clip-path: none;
      animation: none;
    }
  }
</style>