/* ==========================================================================
   COMPONENTS: nav pill, buttons, image frames, tags, links
   ========================================================================== */

/* ---------- Floating pill navigation ---------- */
.site-header {
  position: fixed;
  top: max(1rem, env(safe-area-inset-top));
  left: 0; right: 0;
  z-index: 50;
  padding-inline: 1rem;
  pointer-events: none;
}

.nav-shell { width: max-content; margin-inline: auto; }

.nav-pill {
  pointer-events: auto;
  position: relative;
  display: flex;
  align-items: center;
  width: 5.5rem;
  margin-inline: auto;
  padding: 0.375rem;
  border-radius: var(--radius-pill);
  background: var(--color-glass);
  border: 1px solid var(--color-line);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 10px 40px var(--color-shadow);

}

.nav-pill__brand {
  display: grid;
  place-items: center;
  height: 2.5rem;
  width: 4.625rem;
  flex: none;
  border: 0;
  cursor: pointer;
  padding-inline: 0.9rem;
  border-radius: var(--radius-pill);
  background: var(--color-text);
  color: var(--color-bg);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-decoration: none;
}

.nav-pill__links { display: flex; align-items: center; gap: 0.125rem; }

.nav-pill__links a {
  display: block;
  padding: 0.55rem 1rem;
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  color: var(--color-muted);
  transition: color var(--duration-fast), background-color var(--duration-fast);
}

.nav-pill__links a:hover,
.nav-pill__links a.is-active { color: var(--color-text); background: var(--color-tint); }

.nav-pill__links .nav-pill__cta { background: var(--color-accent); color: var(--color-accent-ink); }
.nav-pill__links .nav-pill__cta:hover,
.nav-pill__links .nav-pill__cta.is-active { background: var(--color-text); color: var(--color-bg); }

/* ---------- Theme toggle (sun / moon) ----------
   Shows the sun in dark mode (tap for light) and the moon in light mode. */
.theme-toggle {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--color-muted);
  cursor: pointer;
  transition: color var(--duration-fast), background-color var(--duration-fast);
}
.theme-toggle:hover { color: var(--color-text); background: var(--color-tint); }
.theme-toggle:active svg { scale: 0.88; }

.theme-toggle svg {
  grid-area: 1 / 1;
  width: 1.15rem;
  height: 1.15rem;
  transition:
    opacity var(--duration-normal) var(--ease-out-expo),
    transform var(--duration-normal) var(--ease-out-expo),
    scale var(--duration-fast);
}
.theme-toggle__moon { opacity: 0; transform: rotate(-90deg) scale(0.5); }
:root[data-theme='light'] .theme-toggle__sun { opacity: 0; transform: rotate(90deg) scale(0.5); }
:root[data-theme='light'] .theme-toggle__moon { opacity: 1; transform: none; }

/* Without JavaScript the toggle can't work, so don't show it */
@media (scripting: none) {
  .theme-toggle { display: none; }
}

/* Touch and small viewports use a compact dropdown. */
.nav-pill__menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 50%;
  width: 13rem;
  max-width: calc(100vw - 2rem);
  padding: 0.625rem;
  border-radius: var(--radius-card);
  border: 1px solid var(--color-line);
  background: var(--color-glass-strong);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 10px 40px var(--color-shadow);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -0.5rem);
  transition: opacity 300ms ease, transform 300ms var(--ease-out-expo), visibility 0s 300ms;
}
.nav-pill.is-open .nav-pill__menu {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition-delay: 0s;
}
.nav-pill__links { flex-direction: column; align-items: stretch; }
.nav-pill__links a { white-space: nowrap; padding: 0.65rem 1rem; }
.nav-pill__content > .theme-toggle { margin: 0.25rem auto 0; }

/* The shell's full-size layout stays centered and never animates. Only the
   glass layer scales; the logo and menu text retain their natural proportions. */
@media (hover: hover) and (pointer: fine) and (min-width: 64em) {
  .nav-pill {
    --nav-motion: 250ms;
    --nav-ease: cubic-bezier(0.22, 1, 0.36, 1);
    width: calc(5.5rem + var(--nav-width, 32rem));
    background: none;
    border-color: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    pointer-events: none;
    isolation: isolate;
  }
  .nav-pill.is-open { --nav-motion: 340ms; }
  .nav-pill::before {
    content: '';
    position: absolute;
    inset: -1px;
    z-index: -1;
    border-radius: inherit;
    border: 1px solid var(--color-line);
    background: var(--color-glass);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    box-shadow: 0 10px 40px var(--color-shadow);
    transform-origin: center;
    transform: scaleX(var(--nav-scale, 0.147));
    opacity: 0;
    transition: transform var(--nav-motion) var(--nav-ease), opacity 160ms ease;
    pointer-events: auto;
  }
  .nav-pill.is-open::before { transform: scaleX(1); opacity: 1; }
  /* Crossfade the resting capsule so scaling never flattens its rounded ends. */
  .nav-pill::after {
    content: '';
    position: absolute;
    top: -1px;
    bottom: -1px;
    left: calc(50% - 2.75rem);
    width: 5.5rem;
    z-index: -1;
    border-radius: inherit;
    border: 1px solid var(--color-line);
    background: var(--color-glass);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    box-shadow: 0 10px 40px var(--color-shadow);
    opacity: 1;
    transition: opacity 160ms ease;
  }
  .nav-pill.is-open::after { opacity: 0; }
  .nav-pill__brand {
    transform: translateX(calc(var(--nav-width, 32rem) / 2));
    transition: transform var(--nav-motion) var(--nav-ease);
    pointer-events: auto;
  }
  .nav-pill.is-open .nav-pill__brand { transform: translateX(0); }
  .nav-pill__menu {
    position: static;
    width: var(--nav-width, 32rem);
    max-width: none;
    flex: none;
    padding: 0;
    border: 0;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    transform: translateX(-6px);
    transition: opacity 140ms ease, transform var(--nav-motion) var(--nav-ease), visibility 0s 250ms;
    pointer-events: none;
  }
  .nav-pill.is-open .nav-pill__menu {
    transform: translateX(0);
    transition: opacity 220ms ease 50ms, transform 290ms var(--nav-ease) 50ms, visibility 0s;
    pointer-events: auto;
  }
  .nav-pill__content { display: flex; align-items: center; gap: 0.25rem; width: max-content; padding-left: 0.25rem; }
  .nav-pill__links { flex-direction: row; align-items: center; }
  .nav-pill__links a { padding: 0.55rem 1rem; }
  .nav-pill__content > .theme-toggle { margin: 0; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 3rem;
  padding: 0.8rem 1.6rem;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: var(--text-sm);
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--duration-fast),
    color var(--duration-fast),
    border-color var(--duration-fast),
    transform var(--duration-fast) var(--ease-out-expo),
    box-shadow var(--duration-normal);
}
.btn:active { transform: scale(0.97); }

.btn--accent { background: var(--color-accent); color: var(--color-accent-ink); }
.btn--accent:hover { box-shadow: 0 0 0 6px var(--color-accent-soft), 0 12px 40px var(--color-accent-glow); }

.btn--ghost {
  background: var(--color-tint-soft);
  border-color: var(--color-line-strong);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.btn--ghost:hover { background: var(--color-text); color: var(--color-bg); }

.btn--line { border-color: var(--color-line); }
.btn--line:hover { border-color: var(--color-accent-strong); color: var(--color-accent-strong); }

.btn--lg { min-height: 3.5rem; padding-inline: 2.25rem; font-size: var(--text-base); }

.btn[disabled] { opacity: 0.6; cursor: progress; }

/* Links whose URL hasn't been set in js/config.js yet */
.is-placeholder { opacity: 0.45; cursor: not-allowed; }

/* ---------- Corner frame ----------
   Accent corner brackets that slide in on hover/focus. */
.frame-corners { position: relative; }

.frame-corners::before,
.frame-corners::after {
  content: '';
  position: absolute;
  z-index: 2;
  width: 1.5rem;
  height: 1.5rem;
  border: 2px solid var(--color-accent);
  pointer-events: none;
  opacity: 0;
  transition:
    opacity var(--duration-normal),
    transform var(--duration-normal) var(--ease-out-expo);
}
.frame-corners::before { top: 0.9rem; left: 0.9rem; border-right: 0; border-bottom: 0; transform: translate(-0.5rem, -0.5rem); }
.frame-corners::after { bottom: 0.9rem; right: 0.9rem; border-left: 0; border-top: 0; transform: translate(0.5rem, 0.5rem); }

.frame-corners:hover::before,
.frame-corners:hover::after,
.frame-corners:focus-within::before,
.frame-corners:focus-within::after { opacity: 1; transform: none; }

/* ---------- Social links ---------- */
.social-links { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; }
.social-links a {
  position: relative;
  font-weight: 600;
  text-decoration: none;
  padding-block: 0.35rem;
}
.social-links a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0.1rem;
  height: 2px;
  background: var(--color-accent-strong);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--duration-normal) var(--ease-out-expo);
}
.social-links a:not(.is-placeholder):hover::after { transform: scaleX(1); transform-origin: left; }

/* ---------- Carousel controls ---------- */
.carousel-controls { display: flex; gap: 0.5rem; }
.carousel-btn {
  width: 3.25rem; height: 3.25rem;
  display: grid; place-items: center;
  border: 1px solid var(--color-line);
  border-radius: 50%;
  background: transparent;
  font-size: 1.1rem;
  cursor: pointer;
  transition: background-color var(--duration-fast), color var(--duration-fast), opacity var(--duration-fast);
}
.carousel-btn:hover:not(:disabled) { background: var(--color-accent); color: var(--color-accent-ink); border-color: var(--color-accent); }
.carousel-btn:disabled { opacity: 0.3; cursor: default; }