/* ==========================================================================
   Page transitions — ink dots and the destination's name.

   Leave (main.js): the clicked link is outlined in the accent, ink dots
   spread from the click until they cover the page, the destination's name
   rises with its address above it, then the browser navigates.
   Arrive: the new page's first paint is already covered (`html.is-arriving`,
   set in <head>): fully grown dots are the solid panel. The name lifts away
   and the dots shrink from the top down while the hero builds itself.

   Only when motion is on (not for "reduce motion" or the footer toggle);
   without JS, links navigate normally.
   ========================================================================== */

.page-transition {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: flex-end;
  background: var(--color-primary);
  color: var(--color-inverse);
  transform: translateY(100%);
  visibility: hidden;
  pointer-events: none;
}
.page-transition__inner { position: relative; padding-bottom: var(--space-9); }
/* While dots are drawn the canvas is the cover; solid otherwise */
.page-transition.is-dots { background: transparent; }
.page-transition__dots {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
/* The address, as on the hover label: what you're going to */
.page-transition__meta {
  margin-bottom: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  line-height: 16px;
  font-weight: 400;
  opacity: 0.65;
}
.page-transition__label {
  overflow: clip;
  padding-bottom: 0.08em; /* room for descenders inside the mask */
  font-family: var(--font-serif);
  font-size: var(--text-display-l);
  line-height: 0.95;
}
.page-transition__label span { display: block; }

.is-arriving .page-transition,
.is-leaving .page-transition {
  transform: none;
  visibility: visible;
  pointer-events: auto; /* swallow clicks while covered */
}

/* Motion off: no movement anywhere ------------------------------------------- */

.reduce-motion *,
.reduce-motion *::before,
.reduce-motion *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}