.living-ink,
.ink-morph {
  pointer-events: none;
  visibility: hidden;
  overflow: hidden;
}

.living-ink {
  position: absolute;
  inset: 0;
}

.ink-morph {
  position: fixed;
  z-index: 8;
  inset: var(--header) 0 0;
}

.living-ink[data-ink-active="true"][data-ink-ready="true"],
.ink-morph[data-ink-active="true"][data-ink-ready="true"] {
  visibility: visible;
}

.living-ink canvas,
.ink-morph canvas {
  display: block;
  width: 100%;
  height: 100%;
}

[data-ink-renderer="css"]::before {
  content: "";
  position: absolute;
  inset: -9%;
  background: url("./assets/ink-diffusion.webp") 50% 50% / cover;
  opacity: var(--ink-fallback-alpha, 0);
  transform: translateY(calc(-11% * var(--ink-fallback-progress, 0))) scale(calc(1.08 + .49 * var(--ink-fallback-progress, 0)));
  mask-image: radial-gradient(ellipse at 60% 49%, #000 8%, #000e 29%, transparent 75%);
}

:root[data-motion="reduced"] :is(.living-ink, .ink-morph) {
  visibility: hidden;
}