/* Buttons: main CTA (.btn--slide) and secondary (.btn--alt).
   Used in the hero, the nav ("Open CV"), "All work" and Typevibes. */

/* Both buttons: label + diagonal stripe + arrow block (.btn__end).
   .btn--slide  main CTA: light panel, blue stripe, white stripe, dark arrow block.
                Hover: blue sweeps across, label turns white, arrow block widens.
   .btn--alt    secondary: translucent panel, thin stripe, arrow area.
                Hover: fill grows leftwards from the stripe in the button's own
                colour (white on dark/photo, ink with .btn--alt-light), label inverts. */
.btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; gap: 0.9em;
  border-radius: var(--radius-btn);   /* small rounded corners; overflow: hidden clips the stripes and fills to them */
  font-family: var(--font-body); font-size: var(--text-sm); font-weight: 500; line-height: 1;
  text-decoration: none;
}
.btn > span:first-child { position: relative; z-index: 1; }
.btn__end {
  position: absolute; top: 0; bottom: 0; right: 0; width: var(--end);
  display: grid; place-items: center;
  font-size: 1rem;
}

.btn--slide {
  --end: 50px;
  padding: 1.25em calc(1.4em + var(--end) + 14px) 1.25em 1.4em;
  background: var(--color-panel); color: var(--color-ink);
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.45);
  outline: 1.5px solid #fff; outline-offset: -1.5px;
  transition: background 200ms var(--ease), color 200ms var(--ease);
}
.btn--slide:hover { background: var(--color-accent); }
.btn--slide:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 3px; }
.btn--slide::before, .btn--slide::after {
  content: ""; position: absolute; inset: 0 0 0 auto; z-index: -1; pointer-events: none;
  clip-path: polygon(16px 0, 100% 0, 100% 100%, 0 100%);
  transition: width 400ms var(--ease);
}
.btn--slide::before, .btn--slide::after, .btn--slide .btn__end { border-radius: 0 var(--radius-btn) var(--radius-btn) 0; }   /* the white stroke follows the corners */
.btn--slide::before { width: calc(var(--end) + 9px); background: var(--color-accent); box-shadow: inset 0 1.5px 0 #fff, inset 0 -1.5px 0 #fff; }
.btn--slide::after { width: calc(var(--end) + 4px); background: #fff; }
.btn--slide > span:first-child { transition: color 300ms var(--ease); }
.btn--slide .btn__end {
  z-index: 0; padding-left: 12px; background: var(--color-tile); color: #fff;
  clip-path: polygon(16px 0, 100% 0, 100% 100%, 0 100%);
  box-shadow: inset 0 1.5px 0 #fff, inset 0 -1.5px 0 #fff, inset -1.5px 0 0 #fff;
  transition: width 400ms var(--ease);
}
.btn--slide:hover::before { width: calc(100% + 16px); }
.btn--slide:hover::after { width: calc(var(--end) + 20px); }
.btn--slide:hover > span:first-child { color: #fff; }
.btn--slide:hover .btn__end { width: calc(var(--end) + 16px); }

.btn--alt {
  --end: 34px;
  --s: calc(var(--end) - 6px);      /* stripe position from the right edge: close to the arrow, like the main CTA */
  --alt-bg: rgba(10, 10, 12, 0.45); --alt-fg: #fff; --alt-line: rgba(255, 255, 255, 0.55);
  --alt-stripe: #fff; --alt-fill: #fff; --alt-fg-hover: var(--color-ink); --alt-stripe-hover: var(--color-ink);
  padding: 1.25em calc(1.4em + var(--end) + 14px) 1.25em 1.4em;
  background: var(--alt-bg); color: var(--alt-fg);
  outline: 1px solid var(--alt-line); outline-offset: -1px;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: color 300ms var(--ease);
}
.btn--alt-light {
  --alt-bg: rgba(29, 29, 31, 0.05); --alt-fg: var(--color-ink); --alt-line: var(--color-line);
  --alt-stripe: var(--color-ink); --alt-fill: var(--color-ink); --alt-fg-hover: #fff; --alt-stripe-hover: #fff;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.btn--alt:hover { --s: calc(var(--end) + 6px); color: var(--alt-fg-hover); }   /* on hover the stripe moves only 12px left */
.btn--alt:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 3px; }
/* The stripe and the fill edge are skewed, so the diagonal keeps the main CTA's angle
   (17°: its arrow block slants 16px over 52.5px) at every button height. */
/* fill, collapsed onto the stripe until hover, then grows leftwards */
.btn--alt::before {
  content: ""; position: absolute; top: 0; bottom: 0; z-index: -1; pointer-events: none;
  right: calc(var(--s) + 10px); left: calc(100% - var(--s) - 10px);
  background: var(--alt-fill); transform: skewX(-17deg);
  transition: left 500ms var(--ease), right 450ms var(--ease);
}
.btn--alt:hover::before { left: -40px; }
/* thin diagonal stripe before the arrow */
.btn--alt::after {
  content: ""; position: absolute; top: 0; bottom: 0; right: calc(var(--s) + 6.5px); width: 3.5px; z-index: 0;
  background: var(--alt-stripe); transform: skewX(-17deg);
  transition: right 450ms var(--ease), background 300ms var(--ease);
}
.btn--alt:hover::after { background: var(--alt-stripe-hover); }
.btn--alt .btn__end { z-index: 1; width: calc(var(--s) + 8px); padding-left: 0; color: var(--alt-fg); transition: width 450ms var(--ease), color 300ms var(--ease); }

.nav .btn { font-size: var(--text-xs); }
.nav .btn--alt { --end: 30px; padding: 0.85em calc(1.1em + var(--end) + 12px) 0.85em 1.1em; }