#fx-canvas {
  position: fixed;
  inset: 0;
  z-index: var(--z-cursor);
  pointer-events: none;
  width: 100vw;
  height: 100vh;
  mix-blend-mode: difference;
}

.cursor-label {
  position: fixed;
  top: 0;
  left: 0;
  z-index: calc(var(--z-cursor) + 1);
  pointer-events: none;
  transform: translate(-50%, -50%);
  font-family: var(--font-body);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-950);
  opacity: 0;
  transition: opacity 0.2s ease;
  mix-blend-mode: difference;
}
.cursor-label.is-visible { opacity: 1; }

/* Page transition curtain */
.page-transition {
  position: fixed;
  inset: 0;
  z-index: var(--z-transition);
  background: var(--ink-950);
  transform: translateY(101%);
  pointer-events: none;
}
.page-transition.is-active {
  transform: translateY(0);
  transition: transform 0.55s var(--ease-in-out);
}
.page-transition.is-leaving {
  transform: translateY(-101%);
  transition: transform 0.55s var(--ease-in-out);
}

@media (hover: none), (pointer: coarse) {
  #fx-canvas, .cursor-label { display: none; }
  body.has-custom-cursor, body.has-custom-cursor a, body.has-custom-cursor button { cursor: auto; }
}