/* Floating top-left name + page list. Shared across every page.

   Color is driven by --floating-nav-fg, set per page body class so we
   never have invisible text against a same-colored background.
   Default is white (covers the dark pages: home video, tree, dark about).
   Light pages opt in via body.page-grid / body.page-lab. */
:root {
  --floating-nav-fg: #fff;
}
body.page-grid {
  --floating-nav-fg: #111;
}

.floating-name {
  position: fixed;
  top: clamp(20px, 3vh, 32px);
  left: clamp(20px, 3vw, 32px);
  font-family: var(--font-display, "IBM Plex Sans", system-ui, sans-serif);
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--floating-nav-fg);
  text-decoration: none;
  z-index: 600; /* above the footer (500) — wordmark stays on top of everything */
  pointer-events: auto;
  opacity: 0;
  filter: blur(8px);
  transform: translateY(-6px);
  animation: floatingNameIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.05s forwards;
}

.floating-nav {
  position: fixed;
  top: calc(clamp(20px, 3vh, 32px) + clamp(1rem, 1.4vw, 1.25rem) + 18px);
  left: clamp(20px, 3vw, 32px);
  z-index: 600; /* above the footer (500) — left nav stays on top */
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 100;
  /* Only the link text catches pointer events */
  pointer-events: none;
}

.floating-nav-link {
  position: relative;
  font-family: var(--font-mono, ui-monospace, Menlo, monospace);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--floating-nav-fg);
  text-decoration: none;
  line-height: 1.7;
  opacity: 0;
  filter: blur(6px);
  transform: translateY(-4px);
  transition: opacity 0.25s ease, letter-spacing 0.25s ease;
  pointer-events: auto;
  width: fit-content;
  animation: floatingLinkIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Stagger the entrance — short delay between each link */
.floating-nav-link:nth-child(1) { animation-delay: 0.30s; }
.floating-nav-link:nth-child(2) { animation-delay: 0.38s; }
.floating-nav-link:nth-child(3) { animation-delay: 0.46s; }
.floating-nav-link:nth-child(4) { animation-delay: 0.54s; }
.floating-nav-link:nth-child(5) { animation-delay: 0.62s; }
.floating-nav-link:nth-child(6) { animation-delay: 0.70s; }
.floating-nav-link:nth-child(7) { animation-delay: 0.78s; }

.floating-nav-link:hover {
  opacity: 1;
  letter-spacing: 0.22em;
}

/* Active page is bolded — that's the only marker. */
.floating-nav-link.is-active {
  opacity: 1;
  font-weight: 700;
}

@keyframes floatingNameIn {
  to { opacity: 1; filter: blur(0); transform: translateY(0); }
}
@keyframes floatingLinkIn {
  to { opacity: 0.65; filter: blur(0); transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .floating-name,
  .floating-nav-link {
    animation: none;
    opacity: 1;
    filter: none;
    transform: none;
  }
}

/* Floating nav stays visible across scroll states (cover + footer). */