.sauce-ink-burst {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: visible;
  color: #080808;
  pointer-events: none;
  contain: layout style;
}

.sauce-ink-drop {
  position: absolute;
  display: block;
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: currentColor;
  opacity: var(--ink-alpha);
  transform: translate(-50%, -50%);
}

.sauce-ink-burst.is-painting .sauce-ink-drop {
  animation: sauce-ink-shoot var(--ink-duration) cubic-bezier(.16,.76,.22,1) var(--ink-delay) both;
}

@keyframes sauce-ink-shoot {
  0% {
    transform: translate(-50%, -50%) scale(.28);
    opacity: 0;
  }
  12% { opacity: var(--ink-alpha); }
  66% { transform: translate(-50%, -50%) scale(.82); }
  82% { transform: translate(-50%, -50%) scale(.96); }
  100% { transform: translate(-50%, -50%) scale(1); opacity: var(--ink-alpha); }
}

.layout-editor-active .sauce-ink-burst { display: none; }

@media (prefers-reduced-motion: reduce) {
  .sauce-ink-burst.is-painting .sauce-ink-drop { animation: none; }
}

.sauce-swipe-hint { display: none; }
@media (max-width: 700px) {
  .responsive-site .sauce-canvas { touch-action: pan-y pinch-zoom; }
  .responsive-site .mobile-sauce-bottle { user-select: none; -webkit-user-drag: none; }
  .responsive-site .sauce-swipe-hint { display: block; font-size: 12px; line-height: 1.3; letter-spacing: .025em; opacity: .75; }
  .responsive-site .sauce-pin { transition: background-color 540ms cubic-bezier(.22,.75,.25,1); }
  .responsive-site .sauce-bottom-cut path { transition-duration: 540ms; }
}
@media (prefers-reduced-motion: reduce) {
  .responsive-site .sauce-pin, .responsive-site .sauce-bottom-cut path { transition: none; }
}