/* The printing animation (107). ≤1.5 s, skippable by a tap or Esc; light or dark follows the computer. */
.rl-anim { position: fixed; inset: 0; width: 100vw; height: 100vh; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; display: flex; align-items: flex-start; justify-content: center;
  background: rgba(246, 246, 248, .92); cursor: pointer; }
.rl-anim::backdrop { background: transparent; }
.rl-stage { position: relative; margin-top: 9vh; width: 320px; }
.rl-slot { height: 30px; border-radius: 14px; background: #d2d2d8; position: relative; z-index: 2; }
.rl-slot::after { content: ""; position: absolute; left: 12px; right: 12px; top: 13px; height: 5px;
  background: #78787f; border-radius: 3px; }
.rl-paper { position: relative; z-index: 1; margin: -6px 18px 0; overflow: hidden; background: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .18); }
.rl-paper img { display: block; width: 100%; height: auto; }
.rl-hint { margin: 14px 0 0; text-align: center; font-size: 13px; color: #78787f; }

/* slide: the whole receipt slides down out of the slot */
.rl-slide .rl-paper img { animation: rl-slide 1.2s cubic-bezier(.2, .7, .2, 1) both; background: #fff;
  box-shadow: 0 6px 14px rgba(0, 0, 0, .18); }      /* small enough to stay inside the paper's padding */
/* white on the receipt itself, not the slot: while it slides, no blank paper under it */
.rl-slide .rl-paper { background: transparent; box-shadow: none; padding: 0 16px 24px; margin: -6px 2px 0; }
@keyframes rl-slide { from { transform: translateY(-100%); } to { transform: translateY(0); } }

/* unroll: the paper grows downward from the slot */
.rl-unroll .rl-paper { animation: rl-unroll 1.2s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes rl-unroll { from { max-height: 0; } to { max-height: 70vh; } }

/* lines: printed top to bottom in steps, the last step (the total) after a beat */
.rl-lines .rl-paper { animation: rl-lines 1.3s steps(14, end) both; }
@keyframes rl-lines {
  0% { clip-path: inset(0 0 100% 0); }
  80% { clip-path: inset(0 0 22% 0); }
  100% { clip-path: inset(0 0 0 0); }
}

@media (prefers-color-scheme: dark) {
  .rl-anim { background: rgba(18, 18, 20, .92); }
  .rl-slot { background: #2c2c30; }
  .rl-slot::after { background: #000; }
  .rl-hint { color: #8e8e96; }
}
@media (prefers-reduced-motion: reduce) {
  .rl-slide .rl-paper img, .rl-unroll .rl-paper, .rl-lines .rl-paper { animation-duration: .01s; }
}