.rp-ink-capable [data-rp-ink-trigger] [data-rp-ink-reveal] {
  --rp-ink-delay: 0s;
  --rp-ink-duration: 0.9s;
  opacity: 0;
  -webkit-mask-image: var(--rp-ink-mask-png);
  mask-image: var(--rp-ink-mask-png);
  -webkit-mask-image: image-set(var(--rp-ink-mask-avif) type('image/avif'), var(--rp-ink-mask-png) type('image/png'));
  mask-image: image-set(var(--rp-ink-mask-avif) type('image/avif'), var(--rp-ink-mask-png) type('image/png'));
  -webkit-mask-position: 0% 50%;
  mask-position: 0% 50%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 2500% 100%;
  mask-size: 2500% 100%;
}
.rp-ink-capable [data-rp-ink-reveal].rp-ink-item-playing {
  animation:
    rp-kv-ink-visibility 0s linear forwards,
    rp-kv-ink-mask var(--rp-ink-duration) steps(24, end) both;
  will-change: mask-position, opacity;
}
.rp-ink-capable [data-rp-ink-reveal].rp-ink-item-complete {
  opacity: 1;
  animation: none;
  -webkit-mask-image: none;
  mask-image: none;
  will-change: auto;
}
@keyframes rp-kv-ink-visibility {
  to {
    opacity: 1;
  }
}
@keyframes rp-kv-ink-mask {
  from {
    -webkit-mask-position: 0% 50%;
    mask-position: 0% 50%;
  }
  to {
    -webkit-mask-position: 100% 50%;
    mask-position: 100% 50%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .rp-ink-capable [data-rp-ink-trigger] [data-rp-ink-reveal] {
    opacity: 1;
    animation: none;
    -webkit-mask-image: none;
    mask-image: none;
  }
}