/* Receipt reveal. Shadows belong to the paper, never the printed artwork. */
.planque-loader {
  --paper: #f4eee3; --ink: #29251f; --red: #bc1016;
  position: fixed; inset: 0; z-index: 999999; display: grid; place-items: center;
  overflow: hidden; isolation: isolate; color: var(--ink);
  text-shadow: none; transition: visibility 0s .8s;
}
.planque-loader::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: url("paper-grain.svg") repeat, #f4eee2;
  background-size: 170px 170px, auto;
  opacity: 1; transition: opacity .65s cubic-bezier(.22,1,.36,1) .12s;
}
.planque-loader[hidden] { display: none; }
.planque-loader__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.planque-loader__printer { position: relative; width: min(82vw, 370px, 61svh); aspect-ratio: .69; container-type: inline-size; }
.planque-loader__slot {
  position: absolute; z-index: 3; top: -3.5%; left: -20px; right: -20px; height: 9%;
  box-sizing: border-box;
  border: 1px solid #fff9; border-radius: 12px;
  background: linear-gradient(175deg, #f4eee3, #c8bead 65%, #ded5c6);
  box-shadow: inset 0 1px 1px #fff, inset 0 -2px 3px #71655538, 0 7px 13px #493e3033;
  transition: opacity .22s ease, transform .35s ease;
}
.planque-loader__slot::after {
  content: ""; position: absolute; inset: 33% 16px 25%; border-radius: 5px;
  background: #191713; box-shadow: inset 0 3px 5px #000, 0 1px 1px #fff9;
}
/* Percentage padding uses the printer width: 120% - 2 × 10% = exactly 100%.
   The opening is 6px wider, leaving 3px of clearance on each side. */
.planque-loader__feed { position: absolute; z-index: 4; inset: 0 -10% -15%; overflow: hidden; padding: 0 10%; }
.planque-loader__ticket {
  position: relative; isolation: isolate; height: 86.9565%;
  transform-origin: 50% 0; animation: planque-print 1.08s .12s cubic-bezier(.22,.65,.24,1) both;
}
.planque-loader__paper-shadow { position: absolute; inset: 0; z-index: -1; filter: drop-shadow(0 12px 10px #47382738); }
.planque-loader__paper {
  position: absolute; inset: 0; background: url("paper-grain.svg") repeat, linear-gradient(105deg, #fffaf1, var(--paper));
  background-size: 170px 170px, auto; box-shadow: inset 0 11px 12px -9px #342b2070;
  clip-path: polygon(var(--paper-top, 0 0,100% 0),100% 98.5%,98% 100%,96% 98.5%,94% 100%,92% 98.5%,90% 100%,88% 98.5%,86% 100%,84% 98.5%,82% 100%,80% 98.5%,78% 100%,76% 98.5%,74% 100%,72% 98.5%,70% 100%,68% 98.5%,66% 100%,64% 98.5%,62% 100%,60% 98.5%,58% 100%,56% 98.5%,54% 100%,52% 98.5%,50% 100%,48% 98.5%,46% 100%,44% 98.5%,42% 100%,40% 98.5%,38% 100%,36% 98.5%,34% 100%,32% 98.5%,30% 100%,28% 98.5%,26% 100%,24% 98.5%,22% 100%,20% 98.5%,18% 100%,16% 98.5%,14% 100%,12% 98.5%,10% 100%,8% 98.5%,6% 100%,4% 98.5%,2% 100%,0 98.5%);
}
.planque-loader__ink { height: 100%; padding: 7% 8% 5%; box-sizing: border-box; text-align: center; font-family: "Courier New", monospace; text-shadow: 0 1px #fff9; }
.planque-loader__logo-wrap { position: relative; width: 88%; margin: 0 auto; }
.planque-loader__logo { display: block; width: 100%; height: auto; }
.planque-loader__crown { position: absolute; inset: 0; width: 100%; height: auto; clip-path: inset(0 41% 72% 43%); filter: brightness(0) saturate(100%) invert(10%) sepia(100%) saturate(6214%) hue-rotate(6deg) brightness(87%) contrast(109%); }
.planque-loader__tagline { margin: 3% 0 5%; font-size: 2.45cqw; text-transform: uppercase; letter-spacing: .2em; }
.planque-loader__rule { border-top: 1px solid #756a585e; }
.planque-loader__eyebrow { margin: 4% 0; font-size: 3.15cqw; letter-spacing: .04em; text-transform: uppercase; }
.planque-loader__cutlery { display: flex; align-items: center; gap: 7%; width: 68%; margin: 5% auto; }
.planque-loader__cutlery span { flex: 1; border-top: 1px solid #756a5877; }
.planque-loader__cutlery svg { width: 10cqw; height: 10cqw; }
.planque-loader__status { margin: 4% 0 7%; font-size: 6.2cqw; line-height: 1.2; letter-spacing: -.055em; text-transform: uppercase; white-space: nowrap; }
.planque-loader__track { height: 1.65cqw; overflow: hidden; border-radius: 1px; background: #786b551c; box-shadow: inset 0 1px 2px #54432d25; }
.planque-loader__track span { display: block; height: 100%; background: var(--red); transform-origin: left; animation: planque-progress 1.5s ease-out both; }
.planque-loader__note { margin: 4% 0 5%; font-size: 3.8cqw; line-height: 1.6; color: #70685e; }
.planque-loader__signature { position: relative; padding-top: 6%; border-top: 1px solid #756a585e; font: italic 5.4cqw/1.2 Georgia, serif; letter-spacing: -.035em; }
.planque-loader__signature svg { display: block; width: 49%; height: 3cqw; margin: 1% 8% 0 auto; color: var(--red); }
.planque-loader__location { margin: 3% 0 0; text-transform: uppercase; letter-spacing: .2em; font-size: 2.35cqw; color: #70685e; }
.planque-loader.is-leaving { visibility: hidden; pointer-events: none; }
.planque-loader.is-leaving::before { opacity: 0; }
.is-leaving .planque-loader__feed { overflow: visible; }
.is-leaving .planque-loader__ticket { animation: planque-tear-away .7s cubic-bezier(.32,0,.25,1) both; }
.is-leaving .planque-loader__slot { opacity: 0; transform: translateY(-4px); }
.is-leaving .planque-loader__track span { animation: none; transform: scaleX(1); }
.is-leaving .planque-loader__paper { --paper-top: 0 1%,4% 0,8% 1%,12% 0,16% 1%,20% 0,24% 1%,28% 0,32% 1%,36% 0,40% 1%,44% 0,48% 1%,52% 0,56% 1%,60% 0,64% 1%,68% 0,72% 1%,76% 0,80% 1%,84% 0,88% 1%,92% 0,96% 1%,100% 0; }
@keyframes planque-print { 0% { transform: translateY(-103%); } 32% { transform: translateY(-53%); } 55% { transform: translateY(-28%); } 72% { transform: translateY(-14%) rotate(.15deg); } 84% { transform: translateY(-6%) rotate(-.1deg); } 100% { transform: translateY(0); } }
@keyframes planque-progress { from { transform: scaleX(.06); } to { transform: scaleX(.93); } }
@keyframes planque-tear-away {
  0% { transform: translateY(0) rotate(0); opacity: 1; }
  16% { transform: translateY(5px) rotate(.6deg); opacity: 1; }
  45% { opacity: .9; }
  100% { transform: translate(2%, -38svh) rotate(-3deg) scale(.98); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .planque-loader, .planque-loader::before, .planque-loader__slot { transition: none; }
  .planque-loader__ticket, .planque-loader__track span, .is-leaving .planque-loader__ticket { animation: none; }
}
