/* ==========================================================================
   Components: progress bar, header, brand mark, menu, buttons, dividers
   ========================================================================== */

/* ---------- Scroll progress ---------- */
.progress {
  position: fixed;
  left: 0;
  top: 0;
  height: 2px;
  width: 100%;
  background: var(--ink);
  transform-origin: left;
  transform: scaleX(0);
  z-index: 80;
  pointer-events: none;
  transition: background var(--dur-base);
}
body.on-dark .progress { background: #fff; }

/* ---------- Header ---------- */
.hdr {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  height: var(--hdr-h);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding-inline: var(--gut);
  background: rgba(255, 255, 255, .78);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-bottom: 1px solid var(--rule);
  color: var(--ink);
  font-size: .9375rem;
  transition:
    transform .7s var(--ease-out),
    background .5s var(--ease),
    color .5s var(--ease),
    border-color .5s var(--ease);
}
.hdr.dark, .hdr.menu-open {
  background: rgba(24, 24, 24, .78);
  color: #fff;
  border-color: #ffffff26;
}
.hdr.hide { transform: translateY(-100%); }

.hdr nav { display: flex; gap: var(--xl); }
.hdr nav a {
  position: relative;
  text-decoration: none;
  padding: 6px 0;
  opacity: .7;
  transition: opacity var(--dur-fast);
}
.hdr nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--dur-base) var(--ease);
}
.hdr nav a:hover { opacity: 1; }
.hdr nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.hdr .right {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: var(--sm);
}

/* ---------- Brand + animated mark ---------- */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  justify-self: start;
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -.04em;
}
/* logo intro: each arch rises into place, then the name slides in */
.brand span { animation: nameIn .7s var(--ease) .35s both; }

.mark {
  width: 40px;
  height: 24px;
  display: block;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mark path {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  /* backwards fill: once the intro ends the hover transforms below take over */
  animation: archIn .8s var(--ease-spring) .1s backwards;
  transition: transform .5s var(--ease-spring);
}
.mark path + path { animation-delay: .22s; }
.brand:hover .mark path:first-child { transform: translateX(-3px); }
.brand:hover .mark path + path { transform: translateX(3px); }

/* ---------- Pill button (header CTA) ---------- */
.pill-btn {
  display: inline-flex;
  align-items: center;
  padding: 9px 16px;
  background: var(--ink);
  color: var(--bg);
  text-decoration: none;
  font-size: .875rem;
  letter-spacing: -.02em;
  transition: background .3s, color .3s, transform .3s var(--ease-spring);
}
.pill-btn:hover { transform: translateY(-1px); }
.pill-btn:active { transform: scale(.97); transition-duration: .1s; }
.hdr.dark .pill-btn, .hdr.menu-open .pill-btn { background: #fff; color: var(--dk); }

/* ---------- Menu button + overlay (small screens) ---------- */
.menu-btn {
  display: none;
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 8px 0 8px 12px;
  cursor: pointer;
  letter-spacing: -.02em;
}

.menu {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: var(--dk);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 96px var(--gut) 48px;
  clip-path: circle(0% at 100% 0%);
  visibility: hidden;
  transition: clip-path .8s var(--ease-in-out), visibility 0s .8s;
}
.menu.open {
  clip-path: circle(150% at 100% 0%);
  visibility: visible;
  transition: clip-path .9s var(--ease-out), visibility 0s;
}
.menu nav { display: grid; gap: 4px; width: 100%; }
.menu a {
  display: block;
  font-size: clamp(2.5rem, 12vw, 5rem);
  line-height: 1.08;
  letter-spacing: -.055em;
  text-decoration: none;
  opacity: 0;
  transform: translateY(48px) rotate(3deg);
  transform-origin: 0 100%;
  transition: opacity .4s var(--ease), transform .5s var(--ease), color var(--dur-fast);
}
.menu.open a {
  opacity: 1;
  transform: none;
  transition:
    opacity .6s var(--ease-out) calc(var(--i) * 70ms + 250ms),
    transform .9s var(--ease-out) calc(var(--i) * 70ms + 250ms),
    color var(--dur-fast);
}
.menu a:hover { color: #ffffff80; }

/* ---------- Underline wipe button ---------- */
.wipe {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--xs);
  padding: var(--sm) 0;
  border: 0;
  border-bottom: 1.5px solid currentColor;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: -.03em;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: padding .45s var(--ease), color .3s var(--ease);
}
.wipe::before {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform .45s var(--ease);
  z-index: -1;
}
.wipe:hover { padding-inline: var(--md); }
.wipe:hover::before { transform: scaleY(1); }
.light .wipe:hover { color: var(--bg); }
.dark .wipe:hover { color: var(--dk); }
.wipe[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.wipe[aria-disabled="true"]:hover { padding-inline: 0; color: inherit; }
.wipe[aria-disabled="true"]:hover::before { transform: none; }

/* ---------- Section divider with label ---------- */
.divider {
  border-top: 1px solid var(--rule);
  text-align: center;
  padding: 14px 0 0;
  font-size: .75rem;
  letter-spacing: -.02em;
  position: relative;
}
.divider::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  height: 1px;
  width: 100%;
  background: var(--ink);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 1.6s var(--ease-in-out);
}
.divider span {
  display: inline-block;
  transition: opacity .8s var(--ease) .3s, transform .8s var(--ease-out) .3s;
}
.js .divider:not(.in) span { opacity: 0; transform: translateY(8px); }
.js .divider:not(.in)::before { transform: scaleX(0); }
.divider.in::before {
  transform: scaleX(1);
  opacity: 0;
  transition: transform 1.6s var(--ease-in-out), opacity .6s 1.4s;
}
.dark .divider { border-color: var(--dk-rule); }
.dark .divider::before { background: #fff; }