/* ntvrli design system — motion
   ------------------------------------------------------------------------
   Entrance, focus and hover. The rule from the system holds: one orchestrated
   moment per page, everything else a 180ms acknowledgement. What follows is
   the entrance — the site previously had none, so the first frame simply
   existed, which is the single cheapest-feeling thing a page can do.

   Nothing here animates a property that triggers layout. Transform and
   opacity only, so the entrance cannot cost a frame during load.
   ------------------------------------------------------------------------ */

/* Hold the first paint until the space has a frame to show. Without this the
   type appears on a white page and the ground colour snaps in afterwards. */
html:not(.ready) .enter { opacity: 0; }

.enter {
  opacity: 1;
  animation: enter-rise 900ms var(--ease) backwards;
}

/* The statement arrives a line at a time. The delay is small enough to read
   as one gesture rather than a list assembling itself. */
.enter-1 { animation-delay: 60ms; }
.enter-2 { animation-delay: 150ms; }
.enter-3 { animation-delay: 230ms; }
.enter-4 { animation-delay: 300ms; }
.enter-5 { animation-delay: 380ms; }
.enter-6 { animation-delay: 480ms; }

@keyframes enter-rise {
  from { opacity: 0; transform: translate3d(0, 1.1rem, 0); }
  to   { opacity: 1; transform: none; }
}

/* The canvas fades up once it has rendered, rather than popping in. */
#space {
  opacity: 0;
  transition: opacity 1200ms var(--ease) 120ms;
}
html.ready #space { opacity: 1; }

/* ── Links ────────────────────────────────────────────────────────────
   A rule that grows from the left rather than fading in. Cheap to run,
   and it reads as deliberate where a colour change reads as a default. */
.text-link {
  position: relative;
  text-decoration: none;
  color: var(--fg);
}
.text-link::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -.18em;
  height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform 320ms var(--ease);
}
.text-link:hover::after,
.text-link:focus-visible::after { transform: scaleX(1); }

/* ── Focus ────────────────────────────────────────────────────────────
   A visible ring that belongs to the palette rather than the browser's. */
:focus-visible {
  outline: 2px solid var(--fg-accent);
  outline-offset: 3px;
  border-radius: 1px;
}

@media (prefers-reduced-motion: reduce) {
  html:not(.ready) .enter { opacity: 1; }
  .enter { animation: none; }
  #space { opacity: 1; transition: none; }
  .text-link::after { transition: none; }
}