/* Ink belongs to controls: no moving landscape or continuous canvas. */
.ink-press-layer {
  position: fixed;
  z-index: 80;
  pointer-events: none;
  user-select: none;
  overflow: visible;
  contain: layout style;
}
.ink-press-layer * { pointer-events: none; }
.ink-control-clip { position: absolute; inset: 0; border-radius: var(--ink-radius); overflow: hidden; }
.ink-control-wash {
  position: absolute;
  left: var(--ink-x);
  top: var(--ink-y);
  width: var(--ink-reach);
  height: 125px;
  margin: -62px 0 0 calc(var(--ink-reach) * -.5);
  border-radius: 39% 61% 56% 44% / 60% 38% 62% 40%;
  background: radial-gradient(ellipse, #111c147d 3%, #263c2d59 36%, #4965522e 61%, transparent 74%);
  filter: blur(1.2px);
  animation: control-ink-wash 1450ms cubic-bezier(.16,.7,.25,1) both;
}
.ink-control-bloom {
  position: absolute;
  width: 174px;
  height: 174px;
  left: calc(var(--ink-x) - 87px);
  top: calc(var(--ink-y) - 87px);
  filter: blur(.55px);
  animation: control-ink-bloom 1450ms cubic-bezier(.16,.7,.25,1) both;
}
.ink-control-tide {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 0;
  height: 19px;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 100%, #14261bb3, #344f3e59 54%, transparent 74%);
  transform-origin: 50% 100%;
  animation: control-ink-tide 1450ms ease-out both;
}
.ink-control-particle {
  position: absolute;
  background: #0b160e;
  border-radius: 42% 58% 67% 33%;
  opacity: 0;
  animation: control-ink-particle 1250ms cubic-bezier(.13,.65,.25,1) both;
  animation-delay: var(--delay);
}
.ink-hover, .ink-focus { opacity: .55; }
.ink-hover .ink-control-bloom { opacity: 0; animation: none; }
.ink-hover .ink-control-wash { opacity: .45; animation-duration: 600ms; }
.ink-hover .ink-control-tide { animation-duration: 600ms; opacity: .5; }
.ink-focus .ink-control-bloom { opacity: .35; }
.ink-focus .ink-control-wash { opacity: .5; }
.ink-selection .ink-control-tide { height: 22px; }
@keyframes control-ink-wash {
  0% { transform: scale(.12,.25) rotate(-8deg); opacity: 0; }
  16% { opacity: .85; }
  45% { opacity: .7; }
  100% { transform: scale(1.7,1.15) rotate(6deg); opacity: 0; }
}
@keyframes control-ink-bloom {
  0% { transform: scale(.06) rotate(-12deg); opacity: 0; }
  15% { opacity: .9; }
  52% { opacity: .67; }
  100% { transform: scale(1.6) rotate(9deg); opacity: 0; }
}
@keyframes control-ink-tide {
  0% { transform: scaleX(.1) scaleY(.35); opacity: 0; }
  25% { opacity: .65; }
  100% { transform: scaleX(1.25) scaleY(.7); opacity: 0; }
}
@keyframes control-ink-particle {
  0% { transform: translate(0,0) scale(.2); opacity: 0; }
  18% { opacity: .92; }
  55% { opacity: .6; }
  78% { opacity: .2; }
  100% { transform: translate(var(--dx),var(--dy)) scale(.4); opacity: 0; }
}
@media(prefers-reduced-motion: reduce) { .ink-press-layer { display: none; } }