/* Glass nav: Work / About / Contact as small glass pills, "Hiring? Build with
   me →" as the one emphasised glass button. Vanilla port of a shadcn
   glass-button: a conic-gradient rim (--angle-1), a moving sheen on the label
   (--angle-2), a soft drop shadow, a slight press tilt.

   The nav no longer uses mix-blend-mode: difference (glass can't blend that
   way); the pills carry their own light fill so they read on any background. */

@property --angle-1 { syntax: "<angle>"; inherits: false; initial-value: -75deg; }
@property --angle-2 { syntax: "<angle>"; inherits: false; initial-value: -45deg; }

.nav {
  --foreground: #141414;
  --background: #ffffff;
  /* Every tint the glass uses, from the two colours above. */
  --g-fg-5: oklch(from var(--foreground) l c h / 5%);
  --g-fg-10: oklch(from var(--foreground) l c h / 10%);
  --g-fg-12: oklch(from var(--foreground) l c h / 12%);
  --g-fg-20: oklch(from var(--foreground) l c h / 20%);
  --g-fg-50: oklch(from var(--foreground) l c h / 50%);
  --g-fg-88: oklch(from var(--foreground) l c h / 88%);
  --g-fg-90: oklch(from var(--foreground) l c h / 90%);
  --g-bg-5: oklch(from var(--background) l c h / 5%);
  --g-bg-20: oklch(from var(--background) l c h / 20%);
  --g-bg-50: oklch(from var(--background) l c h / 50%);
  --g-bg-60: oklch(from var(--background) l c h / 60%);
}
/* Browsers without relative colour syntax get the same tints as plain rgba. */
@supports not (color: oklch(from red l c h)) {
  .nav {
    --g-fg-5: rgba(20, 20, 20, .05); --g-fg-10: rgba(20, 20, 20, .10); --g-fg-12: rgba(20, 20, 20, .12);
    --g-fg-20: rgba(20, 20, 20, .20); --g-fg-50: rgba(20, 20, 20, .50); --g-fg-88: rgba(20, 20, 20, .88);
    --g-fg-90: rgba(20, 20, 20, .90);
    --g-bg-5: rgba(255, 255, 255, .05); --g-bg-20: rgba(255, 255, 255, .20); --g-bg-50: rgba(255, 255, 255, .50);
    --g-bg-60: rgba(255, 255, 255, .60);
  }
}

/* No more difference blending: the logo is ink in both states. */
.nav, .nav:not(.scrolled) { mix-blend-mode: normal; color: var(--ink); }
.nav:not(.scrolled) .logo { color: var(--ink); }

.menu { align-items: center; gap: 6px; perspective: 600px; }

/* ---------- Glass button ---------- */
.glass-button-wrap {
  --anim-time: 400ms;
  --anim-ease: cubic-bezier(.25, 1, .5, 1);
  --border-width: clamp(1px, .0625em, 4px);
  position: relative; z-index: 2; display: inline-flex;
  transform-style: preserve-3d;
  transition: transform var(--anim-time) var(--anim-ease);
}
.glass-button-wrap:has(.glass-button:active) { transform: rotateX(25deg); }

.glass-button {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9999px; text-decoration: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  -webkit-backdrop-filter: blur(clamp(1px, .125em, 4px)); backdrop-filter: blur(clamp(1px, .125em, 4px));
  background-color: var(--g-bg-60);
  background-image: linear-gradient(-75deg, var(--g-bg-5), var(--g-bg-20), var(--g-bg-5));
  box-shadow:
    inset 0 .125em .125em var(--g-fg-5),
    inset 0 -.125em .125em var(--g-bg-50),
    0 .25em .125em -.125em var(--g-fg-20),
    0 0 .1em .25em inset var(--g-bg-20),
    0 0 0 0 var(--background);
  transition: all var(--anim-time) var(--anim-ease);
}
.glass-button:hover {
  transform: scale(.975);
  -webkit-backdrop-filter: blur(.01em); backdrop-filter: blur(.01em);
  box-shadow:
    inset 0 .125em .125em var(--g-fg-5),
    inset 0 -.125em .125em var(--g-bg-50),
    0 .15em .05em -.1em var(--g-fg-20),
    0 0 .05em .1em inset var(--g-bg-50),
    0 0 0 0 var(--background);
}
.glass-button:focus-visible { outline: 2px solid var(--cobalt, #2f2bff); outline-offset: 3px; }

/* The rim: a conic gradient masked to a thin ring that turns on hover. */
.glass-button::after {
  content: ""; position: absolute; z-index: 1; pointer-events: none;
  top: calc(0% - var(--border-width)); left: calc(0% - var(--border-width));
  width: calc(100% + var(--border-width) * 2); height: calc(100% + var(--border-width) * 2);
  padding: var(--border-width); box-sizing: border-box; border-radius: 9999px;
  background:
    conic-gradient(from var(--angle-1) at 50% 50%, var(--g-fg-50) 0%, transparent 5% 40%, var(--g-fg-50) 50%, transparent 60% 95%, var(--g-fg-50) 100%),
    linear-gradient(180deg, var(--g-bg-50), var(--g-bg-50));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  box-shadow: inset 0 0 0 calc(var(--border-width) / 2) var(--g-bg-50);
  transition: all var(--anim-time) var(--anim-ease), --angle-1 500ms ease;
}
.glass-button:hover::after { --angle-1: -125deg; }
.glass-button:active::after { --angle-1: -75deg; }

/* The label, with a sheen that slides across it on hover and press. */
.glass-button-text {
  position: relative; display: block; user-select: none;
  color: var(--g-fg-90);
  text-shadow: 0 .25em .05em var(--g-fg-10);
  font-weight: 500; letter-spacing: -.01em; line-height: 1; white-space: nowrap;
  transition: all var(--anim-time) var(--anim-ease);
}
.glass-button:hover .glass-button-text { text-shadow: .025em .025em .025em var(--g-fg-12); }
.glass-button-text::after {
  content: ""; position: absolute; z-index: 3; pointer-events: none;
  inset: calc(var(--pad-y, .5em) * -1) calc(var(--pad-x, 1em) * -1);
  border-radius: 9999px; overflow: clip;
  background: linear-gradient(var(--angle-2), transparent 0%, var(--g-bg-50) 40% 50%, transparent 55%);
  background-size: 200% 200%; background-position: 0% 50%;
  mix-blend-mode: screen;
  transition: background-position calc(var(--anim-time) * 1.25) var(--anim-ease), --angle-2 calc(var(--anim-time) * 1.25) var(--anim-ease);
}
.glass-button:hover .glass-button-text::after { background-position: 25% 50%; }
.glass-button:active .glass-button-text::after { background-position: 50% 15%; --angle-2: -15deg; }

/* Soft shadow under the button, a blurred ring that lifts on hover. */
.glass-button-shadow {
  --shadow-cutoff-fix: 2em;
  position: absolute; z-index: 0; pointer-events: none; overflow: visible;
  width: calc(100% + var(--shadow-cutoff-fix)); height: calc(100% + var(--shadow-cutoff-fix));
  top: calc(0% - var(--shadow-cutoff-fix) / 2); left: calc(0% - var(--shadow-cutoff-fix) / 2);
  filter: blur(clamp(2px, .125em, 12px));
  transition: filter var(--anim-time) var(--anim-ease);
}
.glass-button-shadow::after {
  content: ""; position: absolute; border-radius: 9999px; box-sizing: border-box; padding: .125em;
  width: calc(100% - var(--shadow-cutoff-fix) - .25em); height: calc(100% - var(--shadow-cutoff-fix) - .25em);
  top: calc(var(--shadow-cutoff-fix) - .5em); left: calc(var(--shadow-cutoff-fix) - .875em);
  background: linear-gradient(180deg, var(--g-fg-20), var(--g-fg-10));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  transition: all var(--anim-time) var(--anim-ease);
}
.glass-button-wrap:has(.glass-button:hover) .glass-button-shadow { filter: blur(clamp(2px, .0625em, 6px)); }
.glass-button-wrap:has(.glass-button:hover) .glass-button-shadow::after { top: calc(var(--shadow-cutoff-fix) - .875em); }
.glass-button-wrap:has(.glass-button:active) .glass-button-shadow::after { top: calc(var(--shadow-cutoff-fix) - .5em); opacity: .75; }

/* Sizes: "sm" for the three links, default for the CTA. */
.glass-button { --pad-y: .55em; --pad-x: 1.05em; padding: var(--pad-y) var(--pad-x); font-size: 14px; }
.glass-button-wrap.is-primary .glass-button { --pad-y: .72em; --pad-x: 1.35em; font-size: 15px; }

/* The one primary: same glass, ink fill, white label. */
.glass-button-wrap.is-primary .glass-button { background-color: var(--g-fg-88); }
.glass-button-wrap.is-primary .glass-button-text { color: #fff; text-shadow: 0 .2em .05em rgba(0, 0, 0, .25); }
.glass-button-wrap.is-primary .glass-button:hover .glass-button-text { text-shadow: .025em .025em .025em rgba(0, 0, 0, .3); }

/* styles.css sets `.menu a` transition and colour hover; keep both off the glass. */
.menu a.glass-button { transition: all var(--anim-time) var(--anim-ease); }
.menu a.glass-button:hover, .menu a.glass-button:focus-visible { color: inherit; }
.menu a.glass-button[aria-current="page"] .glass-button-text { text-decoration: underline; text-underline-offset: .2em; }

.nav-cta .cta-short { display: none; }

@media (max-width: 820px) {
  .menu { gap: 4px; }
  .glass-button { --pad-y: .55em; --pad-x: .8em; font-size: 12.5px; }
  .glass-button-wrap.is-primary .glass-button { --pad-y: .6em; --pad-x: 1em; font-size: 13px; }
  .nav-cta .cta-long { display: none; }
  .nav-cta .cta-short { display: inline; }
}

@media (prefers-reduced-motion: reduce) {
  .glass-button-wrap:has(.glass-button:active) { transform: none; }
  .glass-button, .glass-button-wrap, .glass-button::after, .glass-button-text, .glass-button-text::after, .glass-button-shadow, .glass-button-shadow::after { transition: none; }
  .glass-button:hover { transform: none; }
}

/* Safari draws the label's text-shadow as a pale double of the word; the glass reads fine without it. */
.glass-button .glass-button-text, .glass-button:hover .glass-button-text,
.glass-button-wrap.is-primary .glass-button-text, .glass-button-wrap.is-primary .glass-button:hover .glass-button-text { text-shadow: none; }