/* ============================================================
   Reusable components — nav, buttons, scroll progress
   ============================================================ */

/* ---------- Nav link (thin animated underline + mint active dot) ----------
   The underline is the hover/focus affordance; the small mint dot is
   the "contextual active state" micro-interaction, set by the
   scrollspy in interactions.js as the matching section is in view. */
.nav-link {
  position: relative;
  font-size: 0.9rem;
  padding-block: 0.2rem;
  padding-right: 0.9rem;
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0; right: 0.9rem; bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--dur-base) var(--ease-precise);
}
.nav-link:hover::after,
.nav-link:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}
.nav-link::before {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-mint);
  transform: translateY(-50%) scale(0);
  transition: transform var(--dur-base) var(--ease-precise);
}
.nav-link.is-current::before { transform: translateY(-50%) scale(1); }

/* ---------- Minimal text link ---------- */
.link-underline {
  position: relative;
  display: inline-block;
  padding-bottom: 0.2em;
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0% 100%;
  background-repeat: no-repeat;
  background-size: 100% 1px;
  transition: background-size var(--dur-base) var(--ease-precise);
}
.link-underline:hover,
.link-underline:focus-visible {
  background-size: 0% 1px;
  background-position: 100% 100%;
}
.link-underline--contrast { color: var(--color-contrast-text); }

/* ---------- Directional fill button ----------
   .btn-fill__bg expands from the pointer's entry point via clip-path,
   driven by --fx/--fy set in interactions.js on pointerenter/leave.
   The label uses mix-blend-mode:difference against a white base and a
   white label color, so it inverts to read correctly the instant the
   black fill passes beneath it — no duplicated/masked text required. */
.btn-fill {
  --fx: 50%;
  --fy: 50%;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.9rem 1.6rem;
  border: 1px solid var(--color-ink);
  background: var(--color-white);
  overflow: hidden;
  isolation: isolate;
}
.btn-fill__bg {
  position: absolute;
  inset: 0;
  background: var(--color-ink);
  clip-path: circle(0% at var(--fx) var(--fy));
  transition: clip-path var(--dur-slow) var(--ease-precise);
  z-index: 0;
}
.btn-fill.is-active .btn-fill__bg {
  /* farthest-corner (not a percentage like 150%) guarantees full coverage
     regardless of the button's aspect ratio, and avoids a real rendering
     issue in some engines where clip-path circle() radius percentages
     above 100% are silently treated as invalid. */
  clip-path: circle(farthest-corner at var(--fx) var(--fy));
}
.btn-fill__label,
.btn-fill__arrow {
  position: relative;
  z-index: 1;
  color: var(--color-white);
  mix-blend-mode: difference;
  font-size: 0.9rem;
  font-weight: var(--fw-medium);
}
.btn-fill__arrow {
  display: inline-flex;
  transition: transform var(--dur-base) var(--ease-precise);
}
.btn-fill.is-active .btn-fill__arrow {
  transform: translate(3px, -3px);
}
.btn-fill--contrast { border-color: var(--color-contrast-text); background: transparent; }
.btn-fill--contrast .btn-fill__bg { background: var(--color-contrast-text); }
.btn-fill--contrast .btn-fill__label,
.btn-fill--contrast .btn-fill__arrow {
  color: var(--color-contrast-text);
}

/* Mint indicator: a small dot, never a full mint fill — the one
   restrained mint detail on the contact section's button. */
.btn-fill__mint-dot {
  position: relative;
  z-index: 1;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-mint);
  transform: scale(0);
  transition: transform var(--dur-fast) var(--ease-out);
}
.btn-fill:hover .btn-fill__mint-dot,
.btn-fill:focus-visible .btn-fill__mint-dot,
.btn-fill.is-active .btn-fill__mint-dot {
  transform: scale(1);
}

/* ---------- Split text button ---------- */
.btn-split {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--color-ink);
}
.btn-split__mask {
  display: block;
  overflow: hidden;
  height: 1.3em;
  line-height: 1.3em;
}
.btn-split__mask + .btn-split__mask {
  position: absolute;
  inset: 0 auto 0 0;
}
.btn-split__text {
  display: block;
  font-size: 0.95rem;
  font-weight: var(--fw-medium);
  transition: transform var(--dur-base) var(--ease-precise);
}
.btn-split__mask:first-of-type .btn-split__text { transform: translateY(0); }
.btn-split__mask + .btn-split__mask .btn-split__text { transform: translateY(100%); }
.btn-split:hover .btn-split__mask:first-of-type .btn-split__text,
.btn-split:focus-visible .btn-split__mask:first-of-type .btn-split__text {
  transform: translateY(-100%);
}
.btn-split:hover .btn-split__mask + .btn-split__mask .btn-split__text,
.btn-split:focus-visible .btn-split__mask + .btn-split__mask .btn-split__text {
  transform: translateY(0%);
}
.btn-split__arrow {
  display: inline-flex;
  transition: transform var(--dur-base) var(--ease-precise);
}
.btn-split:hover .btn-split__arrow,
.btn-split:focus-visible .btn-split__arrow {
  transform: translate(4px, -4px);
}

/* ---------- Magnetic arrow ----------
   Nudged toward the pointer within a small radius by interactions.js
   (GSAP quickTo), reset to 0,0 on leave. Movement stays restrained —
   see MAGNETIC_MAX_PX there. */
[data-magnetic] {
  display: inline-flex;
  will-change: transform;
}

/* ---------- Scroll progress indicator ---------- */
.scroll-progress {
  position: fixed;
  right: clamp(1rem, 2vw, 1.75rem);
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: clamp(120px, 24vh, 220px);
  background: var(--color-border);
  z-index: 400;
}
.scroll-progress__fill {
  width: 100%;
  height: 0%;
  background: var(--color-mint);
  transform-origin: top;
}
@media (max-width: 780px) {
  .scroll-progress { display: none; }
}

/* ---------- Contact link ---------- */
.contact-link {
  display: inline-flex;
  align-items: baseline;
  gap: 1rem;
}