/* ShopDirect: a till printer jerks out a long receipt that runs toward the viewer, off the frame. Section names are the line items; the total is a smart purchase, never a price. */
.ns-sig--receipt { --sig-bg: #f4d35e; --sig-fg: #0d3b66; min-height: clamp(35rem, 86svh, 52rem); }
.ns-sig--receipt .ns-sig__inner { box-sizing: border-box; gap: .75rem; padding-inline-end: min(43vw, 40rem); }
.ns-sig--receipt .ns-sig__title { direction: ltr; font-size: clamp(3.3rem, 7.7vw, 7rem); font-weight: 800; letter-spacing: -.035em; line-height: .95; }
.ns-sig--receipt .ns-sig__tagline { font-size: clamp(1.3rem, 2.5vw, 2rem); font-weight: 600; max-width: none; }
.ns-sig--receipt .ns-sig__topics { margin-block-start: .5rem; }
.ns-sig--receipt .ns-sig__topics a { padding: .55rem 1rem; color: #0d3b66; background: #fffdf5; border: 2px dashed #0d3b66; border-radius: 3px; font-weight: 700; transform: rotate(calc((var(--i) - 1.5) * .9deg)); transition: transform .15s; }
.ns-sig--receipt .ns-sig__topics a:hover { color: #fffdf5; background: #0d3b66; border-color: #0d3b66; transform: translateY(-3px); }

/* a giant barcode behind everything: two periods laid over each other never quite repeat */
.rc-bars { position: absolute; inset: 0; background: linear-gradient(90deg, #eec746 0 22%, transparent 0 38%, #eec746 0 44%, transparent 0 70%, #eec746 0 92%, transparent 0) 0 0 / 11.3rem 100%, linear-gradient(90deg, #efcb50 0 8%, transparent 0 26%, #efcb50 0 54%, transparent 0 81%, #efcb50 0 88%, transparent 0) 0 0 / 17.9rem 100%; }

.rc-scene { position: absolute; inset-block: 0; inset-inline-end: clamp(.5rem, 4vw, 4.5rem); width: clamp(21rem, 37vw, 34rem); perspective: 1050px; perspective-origin: 50% -15%; }
.rc-tilt { position: absolute; top: 5.4rem; left: 9%; right: 9%; height: 165%; transform-origin: 50% 0; transform: rotateX(38deg) rotateY(calc((var(--mx) - .5) * 9deg)) rotateZ(-2.5deg); transition: transform .4s ease-out; }
.rc-clip { position: absolute; inset: 0; overflow: hidden; filter: drop-shadow(-1rem 1.8rem 1.4rem rgb(13 59 102 / .36)); }
.rc-feed::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(rgb(13 59 102 / .4), transparent 4%, rgb(13 59 102 / .05) 26%, transparent 33%, rgb(13 59 102 / .07) 49%, transparent 58%, rgb(13 59 102 / .06) 74%, transparent 82%); }
.rc-feed { position: relative; -webkit-mask: conic-gradient(from 135deg at top, #000 90deg, #0000 0) bottom / .9rem .5rem repeat-x, linear-gradient(#000 0 0) top / 100% calc(100% - .49rem) no-repeat; mask: conic-gradient(from 135deg at top, #000 90deg, #0000 0) bottom / .9rem .5rem repeat-x, linear-gradient(#000 0 0) top / 100% calc(100% - .49rem) no-repeat; padding: 4.2rem 1.5rem 7rem; color: #16202c; background: #fffdf5; font: 700 1.05rem/1.25 "Courier New", ui-monospace, monospace; text-align: center; animation: rc-feed 3.8s .15s steps(34) both; }
@keyframes rc-feed { from { transform: translateY(-100%); } }
.rc-brand { margin: 0; font: inherit; font-size: 2.2rem; letter-spacing: -.03em; color: #0d3b66; }
.rc-sub { margin: .2rem 0 .8rem; padding-block-end: .7rem; border-block-end: 2px dashed #16202c; font-size: .9rem; }
.rc-feed ol { margin: 0; padding: 0; list-style: none; }
.rc-feed li { display: flex; align-items: baseline; gap: .4rem; padding-block: .32rem; text-align: start; }
.rc-feed li b { max-width: 78%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.rc-feed li i { flex: 1; border-block-end: 2px dotted #16202c; }
.rc-tot { display: flex; justify-content: space-between; margin: .7rem 0 1rem; padding-block: .55rem; border-block: 3px double #16202c; font-size: 1.3rem; color: #b23c22; }
.rc-code { height: 6rem; background: linear-gradient(90deg, #16202c 0 9%, transparent 0 20%, #16202c 0 25%, transparent 0 41%, #16202c 0 58%, transparent 0 64%, #16202c 0 71%, transparent 0 88%, #16202c 0) 0 0 / 2.3rem 100%, linear-gradient(90deg, #16202c 0 14%, transparent 0 47%, #16202c 0 53%, transparent 0 79%, #16202c 0 86%, transparent 0) 0 0 / 3.7rem 100%; }
.rc-bye { margin: .9rem 0 0; font-size: 1rem; }
.rc-till { position: absolute; top: 0; left: 0; width: 100%; filter: drop-shadow(0 .6rem .7rem rgb(13 59 102 / .4)); animation: rc-jit .09s 42 .15s linear; }
@keyframes rc-jit { 50% { transform: translateX(1.5px); } }
.rc-led { animation: rc-led .5s 8 .15s steps(1); }
@keyframes rc-led { 50% { opacity: .25; } }

@media (max-width: 767px) {
	.ns-sig--receipt { align-items: start; padding-block-start: 2rem; min-height: min(46rem, 92svh); }
	.ns-sig--receipt .ns-sig__inner { padding-inline-end: 0; }
	.ns-sig--receipt .ns-sig__title { font-size: 15.4vw; }
	.ns-sig--receipt .ns-sig__topics a { padding: .35rem .7rem; font-size: .92rem; }
	.ns-sig--receipt .ns-sig__topics a:nth-child(n + 4) { display: none; }
	.rc-scene { inset: clamp(19rem, 45svh, 22rem) 0 0; width: min(100%, 26rem); margin-inline: auto; perspective: 760px; }
	.rc-tilt { top: 3.5rem; left: 12%; right: 12%; transform: rotateX(36deg) rotateZ(-2deg); }
	.rc-feed { font-size: .86rem; padding: 3.2rem .9rem 7rem; }
	.rc-brand { font-size: 1.6rem; }
	.rc-tot { font-size: 1.05rem; }
}

/* touches: a till-roll edge under section titles; a card torn off with a slight tilt */
body.ns-sig-receipt .ns-cat-block__head { border-block-end: 2px dashed #0d3b66; padding-block-end: .4rem; }
body.ns-sig-receipt .ns-fc { transition: transform .2s; }
body.ns-sig-receipt .ns-fc:hover { transform: translateY(3px) rotate(.6deg); }