/* The screenshot keeps its HTML dimensions while the print travels across it. */
.folio-sheet {
  position: relative;
  min-width: 0;
  overflow: hidden;
  background: var(--board);
}

.case-preview:has(> .folio-rule),
.shop-services > div:has(> .folio-rule) {
  position: relative;
}

.folio-rule {
  position: absolute;
  inset-inline: 0;
  height: 2px;
  pointer-events: none;
}

.case-preview > .folio-rule {
  bottom: 0;
  border-bottom: 1px solid var(--thin, var(--rule));
}
.shop-services > div > .folio-rule { top: -1px; }

@media screen and (prefers-reduced-motion: no-preference) {
  .folio-enter > .folio-word {
    display: inline-block;
    max-width: 100%;
    transform-origin: left bottom;
    animation: folio-typeset 550ms cubic-bezier(.2,.78,.22,1) backwards;
    animation-delay: calc(var(--word-order) * 55ms);
  }

  .folio-rule.folio-enter {
    transform-origin: left;
    animation: folio-draw 760ms cubic-bezier(.22,.7,.19,1) both;
  }

  .folio-sheet.folio-enter img {
    animation: folio-uncover 820ms cubic-bezier(.33,0,.16,1) both;
  }

  /* A thin blade marks the exposed edge, then passes off the finished print. */
  .folio-sheet.folio-enter::after {
    content: "";
    position: absolute;
    inset: 0;
    border-right: 2px solid var(--ink);
    pointer-events: none;
    animation: folio-blade 820ms cubic-bezier(.33,0,.16,1) both;
  }
}

@keyframes folio-typeset {
  from { transform: translateY(.45em) rotate(3deg); }
  77% { transform: translateY(-.025em) rotate(-.2deg); }
  to { transform: none; }
}

@keyframes folio-draw {
  0% { transform: scaleX(0); background: #b84828; }
  72% { background: var(--ink); }
  100% { transform: scaleX(1); background: transparent; }
}

@keyframes folio-uncover {
  from { clip-path: inset(0 65% 0 0); }
  to { clip-path: inset(0); }
}

@keyframes folio-blade {
  from { transform: translateX(-65%); }
  to { transform: translateX(2px); }
}