:root {
  --print-line-duration: 260ms;
  --print-marker-duration: 350ms;
  --print-marker-delay: 1800ms;
  --print-offset: 8px;
}
@media (prefers-reduced-motion: no-preference) {
  .receipt--printing > * {
    animation: receipt-line var(--print-line-duration) ease-out var(--print-delay) backwards;
  }
  .receipt--printing .cofein-receipt__row--mark {
    background-color: transparent;
    background-image: linear-gradient(var(--marker), var(--marker));
    background-repeat: no-repeat;
    background-size: 100% 100%;
    animation-name: receipt-line, receipt-marker;
    animation-duration: var(--print-line-duration), var(--print-marker-duration);
    animation-delay: var(--print-delay), var(--print-marker-delay);
    animation-timing-function: ease-out, ease-out;
    animation-fill-mode: backwards, backwards;
  }
}
@keyframes receipt-line {
  from { clip-path: inset(0 0 100% 0); transform: translateY(calc(-1 * var(--print-offset))); }
  to { clip-path: inset(0); transform: translateY(0); }
}
@keyframes receipt-marker {
  from { background-size: 0% 100%; }
  to { background-size: 100% 100%; }
}