/* ic-metal: the liquid-metal CTA. Design-system component (see design-system/brand-guide.md, "Liquid-metal CTA").
   An ink pill inside a moving warm-metal rim. The rim is a WebGL shader (js/metal-button.js);
   until it starts, or where WebGL is missing, a still CSS metal gradient stands in so the button never looks unfinished.

   <a class="ic-metal" href="…">
     <span class="ic-metal__rim" aria-hidden="true"></span>
     <span class="ic-metal__body"><span class="ic-metal__label">See my work</span><span class="ic-metal__icon"><svg…/></span></span>
   </a>
   Modifier: .ic-metal--light puts paper inside the rim for use on the black band. */
.ic-metal {
  --metal-h: 56px; --metal-rim: 1.5px;
  position: relative; display: inline-flex; height: var(--metal-h); border-radius: 999px; text-decoration: none; isolation: isolate;
  color: var(--paper); font: 600 16px/20px var(--font-sans); white-space: nowrap; -webkit-tap-highlight-color: transparent;
  box-shadow: 0 0 0 .5px rgb(14 14 14 / .25), 0 2px 5px rgb(40 26 14 / .16), 0 10px 18px -6px rgb(40 26 14 / .28), 0 26px 34px -18px rgb(40 26 14 / .32);
  transition: transform .5s cubic-bezier(.34, 1.56, .64, 1), box-shadow .18s cubic-bezier(.4, 0, .2, 1);
}
.ic-metal__rim { position: absolute; inset: 0; z-index: -1; border-radius: inherit; overflow: hidden;
  background: conic-gradient(from 210deg, #FFFFFF, #8C857C, #F4F2EE, #4A4743, #DAD5CC, #FFFFFF, #6E6A63, #FFFFFF); }
.ic-metal__rim canvas { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; display: block; border-radius: inherit; }
.ic-metal__rim.is-live { background: #2A2724; }
.ic-metal__body { margin: var(--metal-rim); flex: 1; display: inline-flex; align-items: center; gap: 12px; padding: 0 8px 0 24px; border-radius: inherit;
  background: linear-gradient(180deg, #2A2724 0%, #0E0E0E 100%); box-shadow: inset 0 1px 0 rgb(255 255 255 / .10);
  transition: box-shadow .15s cubic-bezier(.4, 0, .2, 1), transform .5s cubic-bezier(.34, 1.56, .64, 1); }
.ic-metal__label { text-shadow: 0 1px 2px rgb(0 0 0 / .5); }
.ic-metal__icon { width: calc(var(--metal-h) - 2 * var(--metal-rim) - 12px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center;
  background: var(--orange); color: var(--on-orange); box-shadow: inset 0 -2px 0 rgb(0 0 0 / .18), inset 0 1px 0 rgb(255 255 255 / .35);
  transition: transform .5s cubic-bezier(.34, 1.56, .64, 1); }
.ic-metal__icon svg { width: 18px; height: 18px; transition: transform .3s cubic-bezier(.34, 1.56, .64, 1); }
.ic-metal__ripple { position: absolute; width: 22px; height: 22px; border-radius: 50%; pointer-events: none; z-index: 2;
  background: radial-gradient(circle, rgb(255 255 255 / .45) 0%, rgb(255 255 255 / 0) 70%); transform: translate(-50%, -50%) scale(0);
  animation: ic-metal-ripple .6s ease-out forwards; }
@keyframes ic-metal-ripple { to { transform: translate(-50%, -50%) scale(5); opacity: 0; } }

@media (hover: hover) and (pointer: fine) {
  .ic-metal:hover { transform: translateY(-2px);
    box-shadow: 0 0 0 .5px rgb(14 14 14 / .3), 0 2px 4px rgb(40 26 14 / .2), 0 14px 22px -8px rgb(40 26 14 / .34), 0 34px 44px -20px rgb(40 26 14 / .4); }
  .ic-metal:hover .ic-metal__icon { transform: scale(1.08); }
  .ic-metal:hover .ic-metal__icon svg { transform: translate(2px, -2px); }
}
.ic-metal:active { transform: translateY(1px) scale(.98); box-shadow: 0 0 0 1px rgb(14 14 14 / .5), 0 1px 2px rgb(40 26 14 / .3); }
.ic-metal:active .ic-metal__body { box-shadow: inset 0 2px 4px rgb(0 0 0 / .45), inset 0 1px 2px rgb(0 0 0 / .3); }
.ic-metal:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }

.ic-metal--light { color: var(--ink); }
.ic-metal--light .ic-metal__body { background: linear-gradient(180deg, #FFFFFF 0%, #E9E5DE 100%); box-shadow: inset 0 1px 0 #fff; }
.ic-metal--light .ic-metal__label { text-shadow: none; }

@media (max-width: 760px) {
  .ic-metal { --metal-h: 58px; width: 100%; }
  .ic-metal__body { justify-content: space-between; }
}
@media (prefers-reduced-motion: reduce) { .ic-metal, .ic-metal__body, .ic-metal__icon { transition: none; } }

/* Leading-icon variant (icon first, label after) and an ink icon disc for the light pill. */
.ic-metal--lead .ic-metal__body { padding: 0 24px 0 8px; }
.ic-metal__icon--ink { background: var(--ink); color: var(--paper); box-shadow: inset 0 1px 0 rgb(255 255 255 / .18); }
@media (hover: hover) and (pointer: fine) {
  .ic-metal--lead:hover .ic-metal__icon svg { transform: rotate(-10deg) scale(1.08); }
}

/* metal-edge: the same moving metal as a hairline around any block (score card, round Message me button).
   The block's own fill moves to ::before so the rim can sit behind it and show only at the edge. */
.metal-edge { position: relative; isolation: isolate; --edge: 1.5px; }
.metal-edge > .ic-metal__rim { position: absolute; inset: 0; z-index: -2; border-radius: inherit; }
.metal-edge::before { content: ""; position: absolute; inset: var(--edge); z-index: -1; border-radius: inherit; background: var(--edge-fill, var(--ink)); }